アニメーションの基本原理

3859 ワード

アニメーションの原理、箱のoffsetleft+ステップ


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
            margin-top: 100px;
        }
    style>
head>
<body>
    <button> button>
    <div>div>
body>
html>
<script>
    // ， offsetleft+ 
    var btn = document.getElementsByTagName("button")[0];
    var div = document.getElementsByTagName("div")[0];
    var timer = null;
    btn.onclick = function () {
        timer = setInterval(function(){
            if(div.offsetLeft > 400){
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 10 + "px";
        },20);
    }
script>

iOSの実用的な知識

14-3