Key frame: differenze tra le versioni

Versione delle 06:55, 18 nov 2022

Versione attuale delle 15:02, 7 lug 2024

(12 versioni intermedie di 3 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 ==

Riga 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|accesso=2021-03-07}}</ref>:<syntaxhighlight lang="css">

div {

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

var keys = [0, 0.25, 1];

Riga 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 69:

</syntaxhighlight>

=== Adobe Flash ===

=== [[Adobe Flash]] (obsoletoObsoleto 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]]

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

<x3d width='500px' height='400px'>

Line 91 ⟶ 92:

</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 \

Line 103 ⟶ 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

Line 148 ⟶ 149:

== Altri progetti ==

{{interprogetto|preposizione=sul}}

{{Portale|informatica}}