教你前端开发做一个缓动动画

web前端开发 技能
web前端开发必备技能
前端开发技能点

代码:
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>缓动动画</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 0px;
        }
    </style>
</head>
<body>
    <button id=”btn”>点击</button>
    <div id=”box” class=”box”>
    </div>
    <script>
        window.onload = function () {
            var btn = document.getElementById(‘btn’);
            var btn2 = document.getElementById(‘btn2’);
            var box = document.getElementById(‘box’);
            btn.onclick = function () {
                buffer(box, { width: 400, top: 200, left: 200 });
            };
        }
        var speed = 0, target = 0, begin = 0;
        function buffer(obj, json) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var flag = true;
                for (var key in json) {
                    target = json[key];
                    begin = parseInt(getCssAttr(obj, key));
                    speed = (target – begin) / 20;
                    speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);//判断方向
                    box.style[key] = begin + speed + ‘px’;//如果你不需要判断方向,那么就可以合写成公式形式
                    if (target != begin) {
                        flag = false;
                    }
                }
                if (flag) {
                    clearInterval(obj.timer);
                }
            }, 20)
        }
        function getCssAttr(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return window.getComputedStyle(obj, null)[attr];
            }
        }
    </script>
</body>
</html>

缓动动画在应用中还是蛮多的。

缓动动画是一个速度从快到慢的过程,先快后慢的过程。知道这个过程,那就是如同上图所说的一样,每次相同时间内,所移动的距离要比上一次要少。

  y2的距离要比y1的距离小,每次距离终点的距离是越来越小的,以为终点值end是个定值,begin是个逐渐变大值,每次end减去begin就会得到一个越来越小的值,这个值再除以一个0~1之间的系数,也是越来越小,所以速度会越来越慢,这样就促成了缓动动画。

这个是上图的推导过程:

1.第一次走的距离y1=s1K;
2.第二次走的距离y2 =s2k; 推导 => y2=(s1-y1)k
总体蓝块所走的距离
3.第一次:begin1 = 0+(s1-0)k => y1;第一我们起点是:0,所以与y1是相等的;
4.第二次:begin = begin1+(s1-y1)*k,这次走的时候你要加上上次走过的距离;
以此类推,每次走的距离都不一样,每次基本都是要比上次的距离要少一些。
前端开发的专业技能
web前端开发师具备技能
web前端开发技能技巧
» 本文来自:前端开发者 » 《教你前端开发做一个缓动动画》
» 本文链接地址:https://www.rokub.com/6180.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!