Wikipedia

Key frame: differenze tra le versioni

Naviga nella cronologia in modo interattivo
← Differenza precedente
Contenuto cancellato Contenuto aggiunto
VisualeWikitesto
m - Link errato
m Eliminato il grassetto da tre parole nell'introduzione
 
(27 versioni intermedie di 14 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>
 
Riga 34 ⟶ 147:
*[[Animazione al computer]]
*[[Tweening]]
 
== Altri progetti ==
{{interprogetto|preposizione=sul}}
 
{{Portale|informatica}}
 
[[Categoria:Glossario di animazioneAnimazione]]
[[Categoria:Computer grafica]]
 
[[de:Schlüsselbildanimation]]
[[en:Key frame]]
[[fa:فریم کلیدی]]
[[he:תמונת מפתח]]
[[pl:Klatka kluczowa]]
[[pt:Quadro-chave]]
[[sv:Nyckelbild]]
[[zh:關鍵格]]
Estratto da "https://it.wikipedia.org/wiki/Key_frame"