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.

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

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

Esempio^[3]:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: filmato 5s infinite;
}

@keyframes filmato {
  from {top: 0px;}
  to {top: 200px;}
}

Esempio^[4]:

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

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)];

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>

Obsoleto dal 31 dicembre 2020^[7]

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>

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)

Esempio^[10]:

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

• 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

• Animazione al computer
• Tweening

• Wikimedia Commons contiene immagini o altri file sul Key frame

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