Key frame

Da Wikipedia, l'enciclopedia libera.
Jump to navigation Jump to search

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"[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 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 www.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 www.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 www.open3d.org. URL consultato il 7 marzo 2021.
  10. ^ opengl, su khronos.org.

Voci correlate[modifica | modifica wikitesto]

Altri progetti[modifica | modifica wikitesto]

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