Key frame

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"[1]) e al colore.

Nel digital video[modifica | modifica wikitesto]

Si usano i keyframes nella produzione dei video digitali, sia 3D che 2D, sia su computer che su dispositivi mobili[2].

Keyframes in Blender
Keyframes in Blender
Keyframes in Première Pro
Keyframes in Première Pro
Confronto tra keyframes analogici e digitali. Questi ultimi possono essere creati uno alla volta oppure far creare al software i keyframes intermezzi. Visivamente questi tre metodi possono dare lo stesso risultato.
Confronto tra keyframes analogici e digitali. Questi ultimi possono essere creati uno alla volta oppure è possibile far creare al software i keyframes intermezzi. Visivamente questi tre metodi possono dare lo stesso risultato.

Nel web[modifica | modifica wikitesto]

A ogni keyframe la forma cambia aspetto o posizione
A ogni keyframe la forma cambia aspetto o posizione

Nel web ci sono diverse tecniche per creare animazioni tramite keyframes:

CSS3[modifica | modifica wikitesto]

Esempio[3]:

div {   width: 100px;   height: 100px;   background: red;   position: relative;   animation: filmato 5s infinite; }  @keyframes filmato {   from {top: 0px;}   to {top: 200px;} } 

Canvas HTML5[modifica | modifica wikitesto]

Esempio[4]:

window.requestAnimFrame =     window.requestAnimationFrame ||     window.webkitRequestAnimationFrame ||     window.mozRequestAnimationFrame ||     window.oRequestAnimationFrame ||     window.msRequestAnimationFrame ||     function (callback) {         window.setTimeout(callback, 1000 / 60); }; 

WebGL[modifica | modifica wikitesto]

Esempio[5]:

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[modifica | modifica wikitesto]

Esempio con CSS3[6]:

.left-leg {   animation: danza 2s infinite alternate; } @keyframes danza {   100% {     transform: rotate(3deg);   } } 

Esempio con SMIL[6]:

<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[7])[modifica | modifica wikitesto]

Keyframes in Adobe Flash con relativi livelli nella timeline
Keyframes in Adobe Flash con relativi livelli nella timeline

GIF[modifica | modifica wikitesto]

Keyframes di un'immagine in formato GIF
Keyframes di un'immagine in formato GIF

X3D[modifica | modifica wikitesto]

Esempio[8]:

<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[modifica | modifica wikitesto]

Esempio[9]:

 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[modifica | modifica wikitesto]

Esempio[10]:

struct MyVertex_VNTVN {     float x, y, z;            float nx, ny, nz;       float s0, t0;             float x1, y1, z1;         float nx1, ny1, nz1;  } 

Esempi[modifica | modifica wikitesto]

Note[modifica | modifica wikitesto]

  1. ^ Cosa sono gli shape hints?. Flash.HTML.it
  2. ^ DESKTOP, WEB & MOBILE APPS – Keyframe Animation | Digital Writing 101, su digitalwriting101.net. URL consultato il 7 marzo 2021.
  3. ^ CSS @keyframes Rule, su w3schools.com. URL consultato il 7 marzo 2021.
  4. ^ (EN) Create Beautiful HTML5 Animations With the Canvas Element, su Cloudinary. URL consultato il 7 marzo 2021.
  5. ^ (EN) 4. Animation - WebGL: Up and Running [Book], su oreilly.com. URL consultato il 7 marzo 2021.
  6. ^ a b (EN) #135: Three Ways to Animate SVG, su CSS-Tricks. URL consultato il 7 marzo 2021.
  7. ^ Flash & The Future of Interactive Content | Adobe Blog, su web.archive.org, 2 dicembre 2017. URL consultato il 7 marzo 2021 (archiviato dall'url originale il 2 dicembre 2017).
  8. ^ X3DOM Documentation: Tutorials, su doc.x3dom.org. URL consultato il 7 marzo 2021.
  9. ^ Make fragments — Open3D latest (664eff5) documentation, su open3d.org. URL consultato il 7 marzo 2021.
  10. ^ opengl, su khronos.org.

Voci correlate[modifica | modifica wikitesto]

Altri progetti[modifica | modifica wikitesto]

  Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica