Najważniejsze typy animacji komputerowej
Animacja wektorowa – SVG, CSS, animowane ikony i kształty (lekkie, skalowalne)Animacja klatkowa – GIF, PNG/APNG, sprite sheets (kreskówki, efekty poklatkowe)Animacja trójwymiarowa – Blender, Unity, WebGL, glTF (efekty 3D w grach i filmach)Efekty CSS i JavaScript – dynamiczne ruszanie, powiększanie, „bounce”, pokaz/ukryj, fade-in/out itd.
Porównanie: Animacje SVG/CSS idealne do interakcji na stronie. Klatkowe – proste efekty. 3D – zaawansowane prezentacje i gry.
Efekty animacji – przykłady na stronie WWW
Pulsujący okrąg (CSS):
.demo1 { width:54px; height:54px; background:#3fb1ff; border-radius:50%; animation: pulse 1.35s infinite alternate;}
@keyframes pulse { 0% {transform:scale(0.88);} 100%{transform:scale(1.23);} }
Przesuwający się prostokąt (CSS):
.demo2 { width:60px;height:38px;background:linear-gradient(90deg,#ffd600,#0a66c2); animation:moveX 2s infinite alternate;}
@keyframes moveX {0%{left:0;} 100%{left:100px;} }
Zmienny kolor/rozmiar po najechaniu (CSS hover):
.demo3 { width:70px; height:70px; background:#e54f2b; border-radius:55%; transition:.45s;}
.demo3:hover { background:#0a66c2; width:110px; height:60px; border-radius:60%; }
Animacje interaktywne – pokaz/ukryj (JS+CSS)
Pokaż / Ukryj element
<button onclick="showHideAnim()">Pokaż / Ukryj</button>
<div id="hiddenAnim">...</div>
Efekt bounce (CSS+przycisk)
Kliknij mnie!
.bounceBtn { animation: btnBounce 1.3s infinite;}
@keyframes btnBounce {
0% {transform:translateY(0);}
35% {transform:translateY(-13px);}
60% {transform:translateY(2px);}
100% {transform:translateY(0);}
}
Animacje SVG i klatkowe – przykłady:
<svg width="90" height="90">
<circle cx="45" cy="45" r="24" fill="#0a66c2">
<animate attributeName="r" values="24;42;24" dur="1.2s" repeatCount="indefinite"/>
<animate attributeName="fill" values="#0a66c2;#e54f2b;#0a66c2" dur="1.2s" repeatCount="indefinite"/>
</circle>
</svg>
<img src="sprite.gif" alt="Animacja klatkowa" width="64">
Ćwiczenia praktyczne – efekty do wykonania
Zadania: