缓动动画原理--封装基本函数

最新推荐文章于 2022-07-02 23:49:38 发布

吃瓜群众欢乐多

最新推荐文章于 2022-07-02 23:49:38 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签：动画

本文链接：https://blog.youkuaiyun.com/sinat_36146776/article/details/52980828

本文介绍了一个简单的HTML页面，其中包含一个可以改变动画速度的按钮。通过调整按钮，用户可以在200毫秒和400毫秒之间切换动画的执行速度。动画演示了一个粉色方块从左向右移动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画速度由快到慢

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            opacity: 0.3;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box=document.getElementById("box");
    btn200.onclick=function(){
      animate(box,200);
    }
    btn400.onclick=function(){
      animate(box,400);
    }
    var timer=null;
    function animate(obj,target){
      obj.timer=setInterval(function(){
        var speed=(target-obj.offsetLeft)/10;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        console.log(speed);
        obj.style.left=obj.offsetLeft+speed+"px";
        if(obj.offsetLeft==target){
          clearInterval(obj.timer);
        }
      },50);
    }








</script>