Il termine inglese key frame (traducibile in italiano come fotogramma chiave) è un tipo di fotogramma che definisce lo stato iniziale, intermedio e finale di un'animazione. Una volta stabiliti i key frame, è possibile creare i fotogrammi intermedi, operazione definita inbetweening (intercalazione).
Nell'animazione tradizionale, i key frame sono generalmente disegnati dai key animator (animatori chiave), e il lavoro di creare i fotogrammi intermedi viene affidato agli inbetweener (intercalatori). Lo stesso capita nell'animazione al computer, dove l'animatore stabilisce i key frame, mentre le operazioni di inbetweening vengono svolte automaticamente dai software. Questa tecnica, denominata keyframing, viene impiegata per transizioni riferite al movimento, alla forma (utilizzando anche "indicazioni" denominate "shape hints"Cosa sono gli shape hints?. Flash.HTML.it) e al colore.
Nel digital video Si usano i keyframes nella produzione dei video digitali, sia 3D che 2D, sia su computer che su dispositivi mobili.
Nel web
Nel web ci sono diverse tecniche per creare animazioni tramite keyframes:
CSS3 Esempio:div { width: 100px; height: 100px; background: red; position: relative; animation: filmato 5s infinite; }
@keyframes filmato { from {top: 0px;} to {top: 200px;} }
Canvas HTML5 Esempio:window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60);
WebGL Esempio:var keys = [0, 0.25, 1]; var values = [new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 2, 5)];
SVG Esempio con CSS3:.left-leg { animation: danza 2s infinite alternate; } @keyframes danza { 100% { transform: rotate(3deg);
}Esempio con SMIL:<svg viewBox="0 0 127.9 178.4"> <path d="M37.6,138.8c0 ... "> <animate attributeName="fill" dur="5000ms" to="#f06d06" fill="freeze" /> </path> </svg>
Adobe Flash Obsoleto dal 31 dicembre 2020
GIF
X3D Esempio:<x3d width='500px' height='400px'> <scene> <transform DEF="ball"> <shape> <appearance> <material diffuseColor='1 0 0'> </material> </appearance> <sphere></sphere> </shape> </transform> </scene> </x3d>
O3D Esempio: if s % config['n_keyframes_per_n_frame'] == 0 \ and t % config['n_keyframes_per_n_frame'] == 0: print( "Fragment %03d / %03d :: RGBD matching between frame : %d and %d" % (fragment_id, n_fragments - 1, s, t)) [success, trans, info] = register_one_rgbd_pair(s, t, color_files, depth_files, intrinsic, with_opencv, config)
OpenGL Esempio:struct MyVertex_VNTVN { float x, y, z; float nx, ny, nz; float s0, t0; float x1, y1, z1; float nx1, ny1, nz1; }
Esempi
Note
Voci correlate Animazione al computer Tweening
Altri progetti
Categoria:Animazione Categoria:Computer grafica