JavaScript HTML DOM ਐਨੀਮੇਸ਼ਨ

学习使用 JavaScript 来创建 HTML 动画。

基础页面

为了演示如何通过 JavaScript 来创建 HTML 动画，我们将使用一张简单的网页：

ਇੰਸਟੈਂਸ

<!DOCTYPE html>
<html>
<body>
<h1>我的第一部 JavaScript 动画</h1>
<div id="animation">我的动画在这里。</div>
</body>
</html>

创建动画容器

所有动画都应该与容器元素关联。

ਇੰਸਟੈਂਸ

<div id ="container">
    <div id ="animate">我的动画在这里。</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 ਐਨੀਮੇਸ਼ਨ ਐਲੀਮੈਂਟ ਦੇ ਸਟਾਈਲ ਨੂੰ ਪ੍ਰਗਤੀਸ਼ੀਲ ਰੂਪ ਨਾਲ ਬਦਲਣ ਰਾਹੀਂ ਪ੍ਰੋਗਰਾਮਿੰਗ ਕੀਤੀ ਜਾਂਦੀ ਹੈ。

ਇਹ ਬਦਲਾਅ ਇੱਕ ਕੌਂਟਰ ਰਾਹੀਂ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।ਜਦੋਂ ਕੌਂਟਰ ਦਾ ਅੰਤਰ ਘੱਟ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਐਨੀਮੇਸ਼ਨ ਲਗਾਤਾਰ ਦਿਸਦੀ ਹੈ。

ਮੂਲ ਕੋਡ ਹੈ:

ਇੰਸਟੈਂਸ

var id = setInterval(frame, 5);
function frame() {
    if (/* ਟੈਸਟ ਕੀਤਾ ਹੈ ਕਿ ਸੰਪੂਰਨ ਹੋਇਆ ਹੈ ਜਾਂ ਨਹੀਂ */) {
        clearInterval(id);
    } else {
         /* ਐਲੀਮੈਂਟ ਦੇ ਸਟਾਈਲ ਨੂੰ ਬਦਲਣ ਵਾਲੇ ਕੋਡ */
    }
}

ਜ਼ਰੀਏ JavaScript ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ

ਇੰਸਟੈਂਸ

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

ਆਪਣੇ ਹੀ ਮੋਹਰੇ ਕਰੋ