18、Anumation动画
（一）运动原理
利用定时器，改变对象的属性，从而改变样式，产生动画效果
（二）动画分类
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
