10.1 Kombinə olunmuş animasiyalar
Çətin animasiyalar istifadəçi interfeysini əhəmiyyətli dərəcədə yaxşılaşdıra bilər, onu daha interaktiv və cəlbedici edir. Belə animasiyalar yaratmaq üçün tez-tez CSS və JavaScript-in kombinasyonu istifadə olunur. Daha irəliləmiş animasiya texnikalarını nəzərdən keçirək, daxil olmaqla daha mürəkkəb ssenarilər və interaktivlik.
Bir neçə animasiyanı birləşdirmək üçün CSS istifadə edərək mürəkkəb effektlər yarada bilmək olar. Məsələn, elementi eyni anda ölçüdə dəyişən, dönən və hərəkət edən nümunəni nəzərdən keçirək.
Nümunə: Kombinə olunmuş animasiyalar
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kombinə olunmuş animasiyalar</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: combined 4s infinite alternate;
}
@keyframes combined {
0% {
transform: scale(1) rotate(0deg) translateX(0);
}
50% {
transform: scale(1.5) rotate(45deg) translateX(100px);
}
100% {
transform: scale(1) rotate(0deg) translateX(0);
}
}
</style>
</head>
<body>
<div style="min-height: 250px; padding: 20px 0;">
<div class="box"></div>
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kombinə olunmuş animasiyalar</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: combined 4s infinite alternate;
}
@keyframes combined {
0% {
transform: scale(1) rotate(0deg) translateX(0);
}
50% {
transform: scale(1.5) rotate(45deg) translateX(100px);
}
100% {
transform: scale(1) rotate(0deg) translateX(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Kodun izahı:
.box: kombinə olunmuş animasiyanı tətbiq edən element@keyframes combined: elementin miqyasını, dönməsini və yerini dəyişən animasiyanı müəyyənləşdirir
10.2 JavaScript-animasiyaları
requestAnimationFrame funksiyası yüksək performansla hamar animasiyalar yaratmağa imkan verir. Bu funksiya animasiyanı ekranın yenilənmə tezliyi ilə sinxronlaşdırır ki, bu da onu daha hamar edir.
Nümunə: requestAnimationFrame istifadə edərək hərəkət animasiyası
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>requestAnimationFrame ilə animasiya</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div style="min-height: 60px; padding: 20px 0;">
<div class="ball"></div>
</div>
<script>
const ball = document.querySelector('.ball');
let start = null;
function animate(time) {
if (!start) start = time;
let progress = time - start;
ball.style.left = Math.min(progress / 10, 200) + 'px';
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>requestAnimationFrame ilə animasiya</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
// "ball" sinfli elementi seçirik və onu ball dəyişəninə saxlayırıq
const ball = document.querySelector('.ball');
// Animasiya üçün başlanğıc vaxtını saxlamaq üçün dəyişən
let start = null;
// Animasiya funksiyası
function animate(time) {
// Əgər animasiya ilk dəfə başlanırsa, cari vaxtı saxlayırıq
if (!start) start = time;
// Animasiyanın başlanmasından keçən vaxtı hesablayırıq
let progress = time - start;
// Topun sol ox üzrə mövqeyini keçən vaxta görə təyin edirik
// Maksimum dəyişməni 200 piksel ilə məhdudlaşdırırıq
ball.style.left = Math.min(progress / 10, 200) + 'px';
// Əgər 2000 millisekunddan az vaxt keçibsə, animasiyanı davam etdiririk
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
// Animasiya işə salınır
requestAnimationFrame(animate);
</script>
</body>
</html>
Kodun izahı:
requestAnimationFrame: animasiya kadrlarını yerinə yetirmək üçünanimatefunksiyasını çağıran funksiyaanimate: 2 saniyə ərzində.ballelementini sağa doğru 200 piksel hərəkət etdirən funksiya
10.3 CSS animasiyalarını JavaScript vasitəsilə idarəetmə
JavaScript CSS animasiyalarını idarə etmək üçün istifadə edilə bilər, məsələn, elementlərin siniflərini və ya üslublarını dəyişdirərək.
Nümunə: Düyməyə basmaqla CSS animasiyasını işə salmaq
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Düyməyə basmaqla animasiyanı işə salmaq</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
position: relative;
}
.box.animate {
animation: moveAndRotate 3s forwards;
}
@keyframes moveAndRotate {
0% {
transform: translateX(0) rotate(0deg);
}
100% {
transform: translateX(200px) rotate(360deg);
}
}
</style>
</head>
<body>
<div style="padding: 30px 0">
<div class="box" id="box"></div>
</div>
<button id="startButton">Start Animation</button>
<script>
document.getElementById('startButton').addEventListener('click', function() {
document.getElementById('box').classList.toggle('animate');
});
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Düyməyə basmaqla animasiyanı işə salmaq</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
position: relative;
}
.box.animate {
animation: moveAndRotate 3s forwards;
}
@keyframes moveAndRotate {
0% {
transform: translateX(0) rotate(0deg);
}
100% {
transform: translateX(200px) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<button id="startButton">Start Animation</button>
<script>
document.getElementById('startButton').addEventListener('click', function() {
document.getElementById('box').classList.toggle('animate');
});
</script>
</body>
</html>
Kod izahı:
.box.animate:.boxelementinə moveAndRotate animasiyasını əlavə edən sinif- JavaScript:
#startButtondüyməsi üzərindəkiclickhadisəsi#boxelementinəanimatesinifini əlavə edir və ya silir, animasiyanı işə salır
10.4 Animasiya ilə hadisələr vasitəsilə qarşılıqlı əlaqə
Animasiya hadisələri, məsələn animationstart, animationend və animationiteration, animasiyaların izlənməsinə və idarə olunmasına imkan verir.
Məsəl: Animasiya hadisələrinin izlənməsi
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animasiya hadisələrinin izlənməsi</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
animation: scaleUp 2s infinite;
}
@keyframes scaleUp {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
const box = document.getElementById('box');
box.addEventListener('animationstart', () => {
console.log('Animasiya başladı');
});
box.addEventListener('animationend', () => {
console.log('Animasiya bitdi');
});
box.addEventListener('animationiteration', () => {
console.log('Animasiyanın təkrarı');
});
</script>
</body>
</html>
Kodun təsviri:
animationstart: animasiyanın başlanğıcında işə düşən hadisəanimationend: animasiyanın sonunda işə düşən hadisəanimationiteration: animasiyanın hər təkrarı zamanı işə düşən hadisə
GO TO FULL VERSION