18、Anumation动画

一、Animation

（一）运动原理

利用定时器，改变对象的属性，从而改变样式，产生动画效果

（二）动画分类

1、匀速运动 ==> 速度保持不变的运动

案例：飞翔的小鸟
//(二) 匀速动画
            //1.初始化速度变量
            //2.开启定时器
            //(1)获取当前值
            //(2)改变当前值：当前值+速度
            //(3)将改变后的值赋值给元素作为样式
            //(4)当改变后的值大于等于目标值，清除定时器，同时将改变后的值改成目标值。（这一步应该在赋值给样式之前）
//1.获取元素及初始化速度变量
let bird = document.querySelector('img');
let speed = 7;
//2.设置定时器
let timer = setInterval(()=>{
    //2.1 获取元素当前位置
    let left = bird.offsetLeft;
    //2.3 边界处理
    if(left >= window.innerWidth - bird.offsetWidth){
        left = window.innerWidth - bird.offsetWidth -speed;
        clearInterval(timer);
    }
    //2.2 将当前位置+速度变量值，更新赋值给当前元素的位置样式
    bird.style.left = left + speed + 'px';
},20);

2、加速运动 ==> 速度不断增加的运动

ocument.addEventListener("DOMContentLoaded", function(){
            var bird = document.querySelector("#bird");
            //一.动画
            //利用定时器，改变对象的属性，从而改变样式，产生动画的效果
            //(二) 加速动画
            //1.初始化速度变量
            //2.开启定时器
            //(1)获取当前值
            //(2)改变当前值：当前值+速度
            //(3)速度不断增加
            //(3)将改变后的值赋值给元素作为样式
            //(4)当改变后的值大于等于目标值，清除定时器，同时将改变后的值改成目标值。（这一步应该在赋值给样式之前）
            var speed = 5;
            var timer = setInterval(function(){
                var x = bird.offsetLeft;
                x +=  speed;
                speed += 0.5;
                if(x > window.innerWidth - bird.offsetWidth){
                    clearInterval(timer);
                    x = window.innerWidth - bird.offsetWidth;
                }
                bird.style.left = x + 'px';
            }, 30)
​
        })

3、减速运动 ==> 速度不断减小的运动

<script>
        // (三) 减速动画
        //1.初始化速度变量
        //2.开启定时器
        //(1)获取当前值
        //(2)改变当前值：当前值+速度
        //(3)速度不断减小
        //(3)将改变后的值赋值给元素的样式
        //(4)当改变后的值大于等于目标值，清除定时器，同时将改变后的值改成目标值。这一步应该在赋值给样式之前
        //(5)当速度小于0时，清除定时器。写在速度自减下面
        document.addEventListener("DOMContentLoaded", function(){
            var car = document.querySelector("#car");
            var speed = 50;
            var timer = setInterval(function(){
                var x = car.offsetLeft;
                x += speed;
                speed -= 1;
                if(speed < 0){
                    clearInterval(timer);
                }
                car.style.left = x + 'px';
            }, 30)
        })
    </script>

4、抛物线运动 ==> 水平方向速度不断减小，垂直方向速度不断增加

 <script type="text/javascript">           document.addEventListener("DOMContentLoaded",function(){
                // (四)抛物线运动
                //1.初始化速度变量（水平、垂直）
                //2.开启定时器
                //(1)获取当前值(水平、垂直)
                //(2)改变当前值：当前值+速度
                //(3)速度不断减小（垂直方向的速度）
                //(3)将改变后的值赋值给元素的样式
                //(4)当改变后的值大于等于目标值，清除定时器，同时将改变后的值改成目标值。这一步应该在赋值给样式之前
                var rg = document.querySelector(".rg");
                var xspeed1 = 7;
                var yspeed1 = 13;
                var timer = setInterval(function(){
                    var x = rg.offsetLeft;
                    var y = rg.offsetTop;
                    x += xspeed1;
                    y -= yspeed1;
                    yspeed1 -= 0.2;
                    if(y > window.innerHeight - rg.offsetHeight){
                        // y = window.innerHeight - rg.offsetHeight;
                        xspeed1 *= -1;
                        yspeed1 = 13;
                        // clearInterval(timer);
                    }
                    rg.style.left = x + "px";
                    rg.style.top = y + "px";
                    
                },30)
            })
        </script>
 

5、缓冲运动 ==> 一开始速度很快，然后慢下来，直到停止

/

/关键：动态计算速度（目标值-当前值有关）
        //1.开启定时器
        //(1)获取当前值
        //(2)获取当前速度(目标值-当前值).
        //     * 当速度大于0时，Math.ceil()
        //     * 当速度小于0时，Math.floor()
        //(3)改变当前值：当前值+速度
        //(3)将改变后的值赋值给元素的样式
        //(4)当改变后的值等于目标值，清除定时器
        // * 若事件里面开启定时器，记得开启定时器先清除定时器
        document.addEventListener("DOMContentLoaded", function(){
            var totop = document.querySelector("#totop");
            totop.onclick = function(){
                clearInterval(totop.timer);
                totop.timer = setInterval(function(){
                    var y = window.scrollY;
                    var speed = Math.floor((0-y)/10);
                    y += speed;
                    window.scrollTo(0,y);
                    if(y == 0){
                        clearInterval(totop.timer);
                    }
                }, 50)
            }
            
        })

（三）动画的封装

// 缓冲动画
//1.开启定时器
//(1)获取当前值
//(2)获取当前速度(目标值-当前值).
//     * 当速度大于0时，Math.ceil()
//     * 当速度小于0时，Math.floor()
//(3)改变当前值：当前值+速度
//(3)将改变后的值赋值给元素的样式
//(4)当改变后的值等于目标值，清除定时器
//备注: 事件开启定时器之前，一定要记得先清除已存在的定时器。
function animation(ele,attr,target,time){
    clearInterval(ele.timer);
    ele.timer = setInterval(function(){
        var current = window.getComputedStyle(ele)[attr];//200px   /[a-z]+/
        var unit = current.match(/[a-z]+$/);//提取单位
        unit = unit? unit[0] : "";
        current = parseInt(current);//只获取数值
        var speed = (target-current)/10;
        if(speed > 0){
            speed = Math.ceil(speed);
        }else if(speed < 0){
            speed = Math.floor(speed);
        }
        current += speed;
        ele.style[attr] = current + unit;
        if(current == target){
            clearInterval(ele.timer);
        }
    }, time)
}
​