缓动动画

来源：互联网发布：跨越阶层知乎编辑：程序博客网时间：2024/04/30 11:55

这里讲缓动动画是基于位置距离的。后面会有基于jquery时间。
缓动动画和匀速运动类似，只不过缓动运动不用num++或者num–，而是用两个数据组成的一个公式。设开始位置start,结束位置end。缓动公式为:

start = start+(end-start)/10;

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        #box{            width: 100px;            height: 100px;            background-color: pink;            position: absolute;            top: 100px;            left: 0;        }    </style></head><body>    <button id="btn">开始</button>    <div id="box"></div></body></html><script>    var btn = document.getElementById("btn");    var box = document.getElementById("box");    var start = 0;    var end = 500;    btn.onclick = function () {        setInterval(function () {            start = start + (end-start)/30;            box.style.left = start + "px";        },10);    }</script>

0 0