Key frame

Il termine inglese key frame (traducibile in italiano come fotogramma chiave) è un tipo di fotogramma che definisce lo stato iniziale, finale o intermedio, di un'animazione computerizzata, ed in generale nella creazione di filmati. Una volta stabiliti i keyframe iniziali e finali di un filmato, è possibile crearne i fotogrammi intermedi, operazione definita tweening (o interpolazione).

Nell'animazione classica, i keyframe sono generalmente disegnati dagli artisti principali, e il lavoro di creare i fotogrammi intermedi viene affidato ai suoi assistenti. Lo stesso capita nell'animazione al computer, dove il programmatore stabilisce i keyframe, mentre le operazioni di tweening vengono svolte automaticamente dai software. Questa tecnica, denominata keyframing, viene impiegata per transizioni riferite al movimento, alla forma (utilizzando anche "indicazioni" denominate "shape hints") 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.

Keyframes in Blender

Keyframes in Première Pro

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

A ogni keyframe la forma cambia aspetto o posizione

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)

Keyframes in Adobe Flash con relativi livelli nella timeline

GIF

Keyframes di un'immagine in formato 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

• Transizione di movimento utilizzando i keyframe
• 
  Keyframe iniziale
• 
  Keyframe finale
• 
  Animazione completa

• Transizione di forma utilizzando i keyframe (senza shape hints)
• 
  Keyframe iniziale
• 
  Keyframe finale
• 
  Animazione completa

• Transizione di forma utilizzando i keyframe (con shape hints)
• 
  Keyframe iniziale
• 
  Keyframe finale
• 
  Animazione completa

• Trasformazione di colore utilizzando i key frame
• 
  Keyframe iniziale
• 
  Keyframe finale
• 
  Animazione completa

Voci correlate

• Animazione al computer
• Tweening

Altri progetti

Altri progetti

• Wikimedia Commons

• Wikimedia Commons contiene immagini o altri file su Key frame