18、Anumation动画

一、Animation

（一）运动原理

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

（二）动画分类

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

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

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

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

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

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

 

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

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

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

/

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

（三）动画的封装

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

 

转载于:https://www.cnblogs.com/wulongke/p/10493356.html