Cadru cheie

De la Wikipedia, enciclopedia liberă.
Salt la navigare Salt la căutare

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] .

Cadre cheie în Blender
Cadre cheie în Blender
Cadre cheie în Première Pro
Cadre cheie în Première Pro
Comparație între cadre cheie analogice și digitale. Acesta din urmă poate fi creat unul câte unul sau software-ul poate crea cadrele cheie de interludiu. Vizual, aceste trei metode pot da același rezultat.
Comparație între cadre cheie analogice și digitale. Acesta din urmă poate fi creat unul câte unul sau software-ul poate crea cadrele cheie de interludiu. Vizual, aceste trei metode pot da același rezultat.

Pe internet

Cu fiecare cadru cheie forma schimbă aspectul sau poziția
Cu fiecare cadru cheie forma schimbă aspectul sau poziția

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] )

Cadre cheie în Adobe Flash cu straturi corelate în cronologie
Cadre cheie în Adobe Flash cu straturi corelate în cronologie

GIF

Cadre cheie ale unei imagini în format GIF
Cadre cheie ale unei imagini în format 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ă

  1. ^ Ce sunt indicii de formă? . Flash.HTML.it
  2. ^ DESKTOP, WEB ȘI APLICAȚII MOBILE - Keyframe Animation | Digital Writing 101 , pe digitalwriting101.net . Adus pe 7 martie 2021 .
  3. ^ CSS @keyframes Rule , la www.w3schools.com . Adus pe 7 martie 2021 .
  4. ^ (RO) Creați animații frumoase cu elementul HTML5 Canvas pe Cloudinary. Adus pe 7 martie 2021 .
  5. ^ (RO) 4. Animație - WebGL: Up and Running [Book] pe www.oreilly.com. Adus pe 7 martie 2021 .
  6. ^ A b (EN) # 135: Three Ways to Animate SVG , CSS-Tricks. Adus pe 7 martie 2021 .
  7. ^ 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) .
  8. ^ Documentație X3DOM: Tutoriale , la doc.x3dom.org . Adus pe 7 martie 2021 .
  9. ^ Creați fragmente - documentația cea mai recentă Open3D (664eff5) , la www.open3d.org . Adus pe 7 martie 2021 .
  10. ^ opengl , la khronos.org .

Elemente conexe

Alte proiecte

Informatică Portal IT : accesați intrările Wikipedia care se ocupă cu IT