前端学习（八十七） DOM-动画（Dom）

版权声明： https://blog.csdn.net/zy21131437/article/details/82346250

动画

单位时间内产生连续的动作，产生的视觉错觉

setTimeout / setInterval

大致就是

        <div>
                <div class="move-red" id="moveRed"></div>
                <input type="button" value="开始" id="start">
                <input type="button" value="结束" id="end">
        </div>
        <script>
            (function(params) {
                var start = document.getElementById('start'),
                    end = document.getElementById('end'),
                    div = document.getElementById('moveRed'),
                    index = 0;
                var timer;
                start.addEventListener('click',function (params) {
                    timer = setInterval(function() {
                        console.log('start');
                        div.style.left = (++index)*2+'px';
                    },50)
                })
                end.addEventListener('click',function(params) {
                    clearInterval(timer);
                })
            })();

var timer = window.requestAnimationFrame(callback)

callback：触发时当前的那个时间

清除

window.cancelAinmationFrame(timer)

        <div>
                <div class="move-red" id="moveRed"></div>
                <input type="button" value="开始" id="start">
        </div>
        <script>
            (function(params) {
                var start = document.getElementById('start'),
                    end = document.getElementById('end'),
                    div = document.getElementById('moveRed'),
                    index = 0;
                var timer;
                start.addEventListener('click',function (params) {
                    timer=requestAnimationFrame(function fn(params) {
                        console.log('start');
                        
                         div.style.left = (++index)*2+'px';
                         requestAnimationFrame(fn)
                    })
                })
            })();

由于requestAnimationFrame是在主线程上完成，意味着如果主线程繁忙，则效果会大打折扣

动画曲线

具体每条曲线规则查看：https://easings.net/zh-cn#，其实大部分都可以通过css3完成了