Cadru cheie
Termenul englez key frame (traductibil în italiană ca key key ) este un tip de cadru care definește starea inițială, finală sau intermediară a unei animații pe computer și, în general, în crearea de filme. După ce ați stabilit cadrele cheie de pornire și de sfârșit ale unui film, puteți crea cadrele între ele, ceea ce se numește tweening (sau interpolare).
În animația clasică, cadrele cheie sunt de obicei desenate de artiștii principali, iar munca de creare a cadrelor între ele este încredințată asistenților săi. Același lucru se întâmplă și în animația computerizată, unde programatorul stabilește cadrele cheie, în timp ce operațiile de interpunere sunt efectuate automat de către software. Această tehnică, numită keyframing , este utilizată pentru tranziții legate de mișcare, formă (folosind și „indicații” numite „sugestii de formă” [1] ) și culoare .
În video digital
Cadrele cheie sunt utilizate în producția de video digitale, atât 3D cât și 2D, atât pe computere, cât și pe dispozitive mobile [2] .
Pe internet
Pe web există mai multe tehnici de creare a animațiilor folosind cadre cheie:
CSS3
Exemplul [3] :
div {
lățime : 100 px ;
înălțime : 100 px ;
fundal : roșu ;
poziție : relativă ;
animație : film infinit de 5 s ;
}
@ cadre cheie de film {
de la { sus : 0 px ;}
la { sus : 200 px ;}
}
Pânză HTML5
Exemplul [4] :
fereastră . requestAnimFrame =
fereastră . requestAnimationFrame ||
fereastră . webkitRequestAnimationFrame ||
fereastră . mozRequestAnimationFrame ||
fereastră . oRequestAnimationFrame ||
fereastră . msRequestAnimationFrame ||
funcție ( apel invers ) {
fereastră . setTimeout (apel invers, 1000/60);
};
WebGL
Exemplul [5] :
chei var = [ 0 , 0,25 , 1 ];
valori var = [ TREI noi . Vector3 ( 0 , 0 , 0 ),
TREI noi . Vector3 ( 0 , 1 , 0 ),
TREI noi . Vector3 ( 0 , 2 , 5 )];
SVG
Exemplu cu CSS3 [6] :
. picior stâng {
animație : dans alternant infinit de 2 s ;
}
@ keyframes dance {
100 % {
transformare : rotire ( 3 grade );
}
}
Exemplu cu SMIL [6] :
< svg viewBox = "0 0 127.9 178.4" >
< cale d = "M37.6.138.8c0 ..." >
< animate attributeName = "fill" dur = "5000ms" to = "# f06d06" fill = "freeze" />
</ cale >
</ svg >
Adobe Flash (învechit la 31 decembrie 2020 [7] )
GIF
X3D
Exemplul [8] :
< x3d width = '500px' height = '400px' >
< scene >
< transform DEF = "ball" >
< formă >
< aspect >
< material diffuseColor = '1 0 0' > < / material>
< / aspect>
< sfera > < / sfera>
< / forma>
< / transforma>
< / scene>
< / x3d>
O3D
Exemplul [9] :
if s % config [ 'n_keyframes_per Balconeframe' ] == 0 \
și t % config [ 'n_keyframes_per Balconeframe' ] == 0 :
imprima (
"Fragment% 03d /% 03d :: RGBD potrivire între cadru:% d și% d"
% ( fragment_id , n_fragments - 1 , s , t ))
[ succes , trans ,
info ] = register_one_rgbd_pair ( s , t , color_files , deep_files ,
intrinsec , cu_opencv , config )
OpenGL
Exemplul [10] :
struct MyVertex_VNTVN
{
plutitor x , y , z ;
float nx , ny , nz ;
float s0 , t0 ;
plutitor x1 , y1 , z1 ;
float Nx1, NY1, nz1;
}
Exemple
Notă
- ^ Ce sunt indicii de formă? . Flash.HTML.it
- ^ DESKTOP, WEB ȘI APLICAȚII MOBILE - Keyframe Animation | Digital Writing 101 , pe digitalwriting101.net . Adus pe 7 martie 2021 .
- ^ CSS @keyframes Rule , la www.w3schools.com . Adus pe 7 martie 2021 .
- ^ (RO) Creați animații frumoase cu elementul HTML5 Canvas pe Cloudinary. Adus pe 7 martie 2021 .
- ^ (RO) 4. Animație - WebGL: Up and Running [Book] pe www.oreilly.com. Adus pe 7 martie 2021 .
- ^ A b (EN) # 135: Three Ways to Animate SVG , CSS-Tricks. Adus pe 7 martie 2021 .
- ^ Flash și viitorul conținutului interactiv | Adobe Blog , pe web.archive.org , 2 decembrie 2017. Adus pe 7 martie 2021 (arhivat din original la 2 decembrie 2017) .
- ^ Documentație X3DOM: Tutoriale , la doc.x3dom.org . Adus pe 7 martie 2021 .
- ^ Creați fragmente - documentația cea mai recentă Open3D (664eff5) , la www.open3d.org . Adus pe 7 martie 2021 .
- ^ opengl , la khronos.org .
Elemente conexe
Alte proiecte
- Wikimedia Commons conține imagini sau alte fișiere pe cadru cheie