HTML DOM அனிமேஷன்
JavaScript ஐப் பயன்படுத்தி HTML அனிமேஷன்களை உருவாக்க கற்றுக்கொள்ளுங்கள்.
ஒரு அடிப்படை வலைப்பக்கம்
JavaScript உடன் HTML அனிமேஷன்களை எவ்வாறு உருவாக்குவது என்பதை நிரூபிக்க, நாங்கள் ஒரு எளிய வலைப்பக்கத்தைப் பயன்படுத்துவோம்:
எடுத்துக்காட்டு
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript Animation</h1>
<div id="animation">My animation will go here</div>
</body>
</html>அனிமேஷன் கொள்கலனை உருவாக்குதல்
அனைத்து அனிமேஷன்களும் ஒரு கொள்கலன் உறுப்புடன் தொடர்புடையதாக இருக்க வேண்டும்.
எடுத்துக்காட்டு
<div id="container">
<div id="animate">My animation will go here</div>
</div>உறுப்புகளை பாணிப்படுத்துதல்
கொள்கலன் உறுப்பு style = "position: relative" உடன் உருவாக்கப்பட வேண்டும்.
அனிமேஷன் உறுப்பு style = "position: absolute" உடன் உருவாக்கப்பட வேண்டும்.
எடுத்துக்காட்டு
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}அனிமேஷன் குறியீடு
JavaScript அனிமேஷன்கள் ஒரு உறுப்பின் பாணியில் படிப்படியான மாற்றங்களை நிரலாக்கம் செய்வதன் மூலம் செய்யப்படுகின்றன.
மாற்றங்கள் ஒரு டைமர் மூலம் அழைக்கப்படுகின்றன. டைமர் இடைவெளி சிறியதாக இருக்கும்போது, அனிமேஷன் தொடர்ச்சியாக தோன்றுகிறது.
அடிப்படை குறியீடு:
எடுத்துக்காட்டு
id = setInterval(frame, 5);
function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}JavaScript ஐப் பயன்படுத்தி முழு அனிமேஷனையும் உருவாக்குதல்
எடுத்துக்காட்டு
function myMove() {
let id = null;
const elem = document.getElementById("animate");
let pos = 0;
clearInterval(id);
id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}ஊடாடும் அனிமேஷன் ஆர்ப்பாட்டம்
வாழும் அனிமேஷன் ஆர்ப்பாட்டம்
let animationId = null;
let position = 0;
function startAnimation() {
const elem = document.getElementById("animateBox");
clearInterval(animationId);
animationId = setInterval(frame, 5);
function frame() {
if (position == 350) {
clearInterval(animationId);
} else {
position++;
elem.style.top = position + 'px';
elem.style.left = position + 'px';
}
}
}
அனிமேஷன் உதவிக்குறிப்புகள்
நிகழ்வு இடைவெளி
சிறிய இடைவெளிகள் (5-10ms) மென்மையான அனிமேஷன்களை வழங்குகின்றன, ஆனால் CPU பயன்பாட்டை அதிகரிக்கின்றன
பொருத்தமான நிறுத்தங்கள்
அனிமேஷன் முடிந்ததும் clearInterval() ஐப் பயன்படுத்துவதை உறுதிப்படுத்தவும், இல்லையெனில் நினைவகக் கசிவு ஏற்படலாம்
கணக்கீட்டு செயல்திறன்
சிக்கலான கணக்கீடுகளைத் தவிர்க்கவும். CSS டிரான்ஸ்ஃபார்ம்கள் JavaScript ஐ விட செயல்திறனுடன் இருக்கும்
உலாவி இணக்கத்தன்மை
அனைத்து நவீன உலாவிகளிலும் setInterval() மற்றும் clearInterval() ஆதரவு உள்ளது