Wikipedia

Key frame: differenze tra le versioni

Naviga nella cronologia in modo interattivo
← Differenza precedente
Contenuto cancellato Contenuto aggiunto
VisualeWikitesto
Nessun oggetto della modifica
m Eliminato il grassetto da tre parole nell'introduzione
 
(32 versioni intermedie di 18 utenti non mostrate)
Riga 1:
Il termine [[Lingua inglese|inglese]] '''key frame''' (traducibile in [[Lingua italiana|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 [[tweening|inbetweening]] (intercalazione).
{{s|informatica}}
Il termine [[Lingua inglese|inglese]] '''key frame''' (traducibile in [[Lingua italiana|italiano]] come '''fotogramma chiave''') è un tipo di [[fotogramma]] che definisce lo stato iniziale, finale o intermedio, di un'[[Animazione al computer|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 classicatradizionale, i keyframekey frame sono generalmente disegnati daglidai key animator artisti(animatori principalichiave), e il lavoro di creare i fotogrammi intermedi viene affidato aiagli suoiinbetweener assistenti(intercalatori). Lo stesso capita nell'[[Animazione digitale|animazione al computer]], dove il programmatorel'animatore stabilisce i keyframekey frame, mentre le operazioni di tweeninginbetweening vengono svolte automaticamente dai software. Questa tecnica, denominata '''keyframing''', viene impiegata per transizioni riferite al [[movimento]], alla [[forma]] (utilizzando anche "indicazioni" denominate "shape hints"<ref>[http://flash.html.it/faq/leggi/1151/cosa-sono-gli-shape-hints/ Cosa sono gli shape hints?]. ''Flash.HTML.it''</ref>) e al [[colore]].
 
== Nel digital video ==
<gallery Caption="Transizione di movimento utilizzando i keyframe">
Si usano i keyframes nella produzione dei video digitali, sia 3D che 2D, sia su computer che su dispositivi mobili<ref>{{Cita web|url=http://digitalwriting101.net/content/apps-keyframe-animation/|titolo=DESKTOP, WEB & MOBILE APPS – Keyframe Animation {{!}} Digital Writing 101|sito=digitalwriting101.net|accesso=2021-03-07}}</ref>.
File:Motion Start.gif|<center>Keyframe iniziale</center>
[[File:Blender-keyframes.png|alt=Keyframes in Blender|centro|miniatura|Keyframes in [[Blender (programma)|Blender]]|290x290px]]
File:Motion End.gif|<center>Keyframe finale</center>
[[File:Premiere-keyframes.jpg|alt=Keyframes in Première Pro|centro|miniatura|Keyframes in [[Adobe Premiere Pro|Première Pro]]|290x290px]]
File:Motion Animated.gif|<center>Animazione completa</center>
[[File:Keyframes-paragone.png|alt=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.|centro|miniatura|385x385px|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 ==
[[File:Keyframe-concept.png|alt=A ogni keyframe la forma cambia aspetto o posizione|centro|miniatura|370x370px|A ogni keyframe la forma cambia aspetto o posizione]]
Nel web ci sono diverse tecniche per creare animazioni tramite keyframes:
 
=== CSS3 ===
Esempio<ref>{{Cita web|url=https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp|titolo=CSS @keyframes Rule|accesso=2021-03-07}}</ref>:<syntaxhighlight lang="css">
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: filmato 5s infinite;
}
 
@keyframes filmato {
from {top: 0px;}
to {top: 200px;}
}
 
</syntaxhighlight>
 
=== Canvas HTML5 ===
Esempio<ref>{{Cita web|url=https://cloudinary.com/blog/creating_html5_animations|titolo=Create Beautiful HTML5 Animations With the Canvas Element|sito=Cloudinary|lingua=en|accesso=2021-03-07}}</ref>:<syntaxhighlight lang="javascript">
window.requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
</syntaxhighlight>
 
=== WebGL ===
Esempio<ref>{{Cita web|url=https://www.oreilly.com/library/view/webgl-up-and/9781449326487/ch04.html|titolo=4. Animation - WebGL: Up and Running [Book]|lingua=en|accesso=2021-03-07}}</ref>:<syntaxhighlight lang="javascript">
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)];
</syntaxhighlight>
 
=== SVG ===
Esempio con CSS3<ref name=":0">{{Cita web|url=https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/|titolo=#135: Three Ways to Animate SVG|sito=CSS-Tricks|lingua=en|accesso=2021-03-07}}</ref>:<syntaxhighlight lang="css">
.left-leg {
animation: danza 2s infinite alternate;
}
@keyframes danza {
100% {
transform: rotate(3deg);
}
}
</syntaxhighlight>Esempio con SMIL<ref name=":0" />:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
 
=== Adobe Flash ===
Obsoleto dal 31 dicembre 2020<ref>{{Cita web|url=https://theblog.adobe.com/adobe-flash-update/|titolo=Flash & The Future of Interactive Content {{!}} Adobe Blog|sito=web.archive.org|data=2017-12-02|accesso=2021-03-07|dataarchivio=2 dicembre 2017|urlarchivio=https://web.archive.org/web/20171202123704/https://theblog.adobe.com/adobe-flash-update/|urlmorto=sì}}</ref>
[[File:Flash-frames.png|alt=Keyframes in Adobe Flash con relativi livelli nella timeline|centro|miniatura|370x370px|Keyframes in Adobe Flash con relativi livelli nella timeline]]
 
=== GIF ===
[[File:Gif-keyframes.png|alt=Keyframes di un'immagine in formato GIF|centro|miniatura|Keyframes di un'immagine in formato GIF]]
 
=== X3D ===
Esempio<ref>{{Cita web|url=https://doc.x3dom.org/tutorials/animationInteraction/animate/index.html|titolo=X3DOM Documentation: Tutorials|sito=doc.x3dom.org|accesso=2021-03-07}}</ref>:<syntaxhighlight lang="xml">
<x3d width='500px' height='400px'>
<scene>
<transform DEF="ball">
<shape>
<appearance>
<material diffuseColor='1 0 0'> </material>
</appearance>
<sphere></sphere>
</shape>
</transform>
</scene>
</x3d>
</syntaxhighlight>
 
=== O3D ===
Esempio<ref>{{Cita web|url=http://www.open3d.org/docs/latest/tutorial/ReconstructionSystem/make_fragments.html|titolo=Make fragments — Open3D latest (664eff5) documentation|accesso=2021-03-07}}</ref>:<syntaxhighlight lang="javascript">
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)
</syntaxhighlight>
 
=== OpenGL ===
Esempio<ref>{{Cita web|url=https://www.khronos.org/opengl/wiki/Keyframe_Animation|titolo=opengl}}</ref>:<syntaxhighlight lang="javascript">
struct MyVertex_VNTVN
{
float x, y, z;
float nx, ny, nz;
float s0, t0;
float x1, y1, z1;
float nx1, ny1, nz1;
}
</syntaxhighlight>
 
== Esempi ==
<gallery caption="Transizione di movimento utilizzando i keyframe">
File:Motion Start.gif|<div align="center">Keyframe iniziale</div>
File:Motion End.gif|<div align="center">Keyframe finale</div>
File:Motion Animated.gif|<div align="center">Animazione completa</div>
</gallery>
 
<gallery Captioncaption="Transizione di forma utilizzando i keyframe (senza shape hints)">
File:Shape NoHint Start.gif|<div align="center">Keyframe iniziale</centerdiv>
File:Shape NoHint End.gif|<div align="center">Keyframe finale</centerdiv>
File:Shape NoHint.gif|<div align="center">Animazione completa</centerdiv>
</gallery>
 
<gallery Captioncaption="Transizione di forma utilizzando i keyframe (con shape hints)">
File:Shape Hinted Start.gif|<div align="center">Keyframe iniziale</centerdiv>
File:Shape Hinted End.gif|<div align="center">Keyframe finale</centerdiv>
File:Shape Hinted.gif|<div align="center">Animazione completa</centerdiv>
</gallery>
 
<gallery Captioncaption="Trasformazione di colore utilizzando i key frame">
File:Color Start.gif|<div align="center">Keyframe iniziale</centerdiv>
File:Color End.gif|<div align="center">Keyframe finale</centerdiv>
File:Color Animated.gif|<div align="center">Animazione completa</centerdiv>
</gallery>
 
Line 34 ⟶ 147:
*[[Animazione al computer]]
*[[Tweening]]
 
== Altri progetti ==
{{interprogetto|preposizione=sul}}
 
{{Portale|informatica}}
 
[[Categoria:Animazione]]
[[Categoria:Computer grafica]]
 
[[de:Schlüsselbildanimation]]
[[en:Key frame]]
[[he:תמונת מפתח]]
[[pl:Klatka kluczowa]]
[[pt:Key frame]]
[[sv:Nyckelbild]]
[[zh:關鍵格]]
Estratto da "https://it.wikipedia.org/wiki/Key_frame"