如何创建：JavaScript HTML 动画
సృష్టించడం ఎలా: జావాస్క్రిప్ట్ HTML అనిమేషన్
జావాస్క్రిప్ట్ ద్వారా అనిమేషన్ సృష్టించడాన్ని నేర్చుకోండి.
మాదిరి పేజీ
ప్రతిరూపం
జావాస్క్రిప్ట్ ద్వారా HTML అనిమేషన్ సృష్టించడాన్ని ప్రదర్శించడానికి, మాదిరి పేజీ ఉపయోగించవచ్చు.
</body>
<!DOCTYPE html>
<body>
<h1>My First JavaScript Animation</h1>
<div id="myContainer">
<div id="myAnimation">My animation will go here</div>
</div>
</body>
<html>
ప్రతిరూపాన్ని సెట్ చేయండి
అనిమేషన్ ప్రతిరూపం ఒక 'ప్రాతిరూప కంటైనర్' నుండి అనిమేషన్ చేయాలి కాబట్టి అనిమేషన్ ప్రతిరూపం ప్రాతిరూప కంటైనర్ కు సంబంధించి అనిమేషన్ చేయాలి. కంటైనర్ ప్రతిరూపం ఉపయోగించాలి style="position: absolute"
style="position: relative" అనిమేషన్ ప్రతిరూపం ఉపయోగించాలి style="position: absolute"
ప్రతిరూపం
సృష్టించండి。
#myContainer {
వెడిథ్: 400px;
హైత్: 400px;
పోజిషన్: రెలేటివ్;
}
బ్యాక్‌గ్రౌండ్: యెల్లో;
#myAnimation {
వెడిథ్: 50px;
హైత్: 50px;
పోజిషన్: అబ్సూల్యూట్;
}
బ్యాక్‌గ్రౌండ్: రెడ్;
అనిమేషన్ కోడ్
జావాస్క్రిప్ట్ అనిమేషన్ ప్రతిరూపాలను ప్రోగ్రామింగ్ ద్వారా పద్ధతిలో మార్చడం ద్వారా అనిమేషన్ సృష్టించబడుతుంది.
ఈ మార్పులు కాలక్రమం ద్వారా సిగ్నల్ ద్వారా సంభవిస్తాయి. కాలక్రమం చిన్నది ఉన్నప్పుడు, అనిమేషన్ స్పష్టంగా కనిపిస్తుంది.
ప్రతిరూపం
ప్రాథమిక కోడ్ ఉంది:
function frame() {
var id = setInterval(frame, 5);
clearInterval(id);
} else {
/* ముగించబడిన పరికరం పరీక్షించండి */
}
}
జావాస్క్రిప్ట్ ద్వారా అనిమేషన్ సృష్టించండి
ప్రతిరూపం
var id = null;
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
