Key frame: differenze tra le versioni

Versione delle 20:47, 7 mar 2021

Versione attuale delle 15:02, 7 lug 2024

(19 versioni intermedie di 10 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, finaleintermedio oe intermedio,finale di un'[[Animazione al computer|animazione computerizzata]], ed in generale nella creazione di filmati. Una volta stabiliti i keyframekey iniziali e finali di un filmatoframe, è possibile crearnecreare i fotogrammi intermedi, operazione definita [[tweening|inbetweening]] (o interpolazioneintercalazione).

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 ==

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:Blender-keyframes.png|alt=Keyframes in Blender|centro|miniatura|Keyframes in [[Blender (programma)|Blender]]|290x290px]]

[[File:Premiere-keyframes.jpg|alt=Keyframes in PremierePremière Pro|centro|miniatura|Keyframes in [[Adobe Premiere Pro|PremierePremière Pro]]|290x290px]]

[[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 ==

Riga 12 ⟶ 13:

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

=== [[CSS|CSS3]]: ===

Esempio<ref>{{Cita web|url=https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp|titolo=CSS @keyframes Rule|sito=www.w3schools.com|accesso=2021-03-07}}</ref>:<syntaxhighlight lang="css">

div {

width: 100px;

Riga 29 ⟶ 30:

</syntaxhighlight>

=== [[Canvas (elemento HTML)|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 =

Riga 42 ⟶ 43:

</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]|sito=www.oreilly.com|lingua=en|accesso=2021-03-07}}</ref>:<syntaxhighlight lang="javascript">

var keys = [0, 0.25, 1];

var values = [new THREE.Vector3(0, 0, 0),

Riga 50 ⟶ 51:

</syntaxhighlight>

=== [[Scalable Vector Graphics|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 {

Riga 68 ⟶ 69:

</syntaxhighlight>

=== Adobe Flash ===

=== [[Adobe Flash]] (obsoletoObsoleto dal 31 dicembre 2020<ref>{{Cita web|url=https://web.archive.org/web/20171202123704/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]]

=== [[Graphics Interchange Format|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="javascriptxml">

<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|sito=www.open3d.org|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:

Riga 102 ⟶ 104:

</syntaxhighlight>

=== [[OpenGL]] ===

Esempio<ref>{{Cita web|url=https://www.khronos.org/opengl/wiki/Keyframe_Animation|titolo=opengl}}</ref>:<syntaxhighlight lang="javascript">

struct MyVertex_VNTVN

Riga 147 ⟶ 149:

== Altri progetti ==

{{interprogetto|preposizione=sul}}

{{Portale|informatica}}

[[Categoria:Glossario di animazioneAnimazione]]

[[Categoria:Computer grafica]]