欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js简单动画:匀速动画、缓动动画、多物体动画以及透明度动画

程序员文章站 2023-09-28 21:48:41
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) 动画效果主要是用定时器setInterval()来实现的,每隔几毫秒让物体移动一点距离,通过不断调用 ......

主要实现以下几种简单的动画效果(其实原理基本相同):

1.匀速动画:物体的速度固定

2.缓动动画:物体速度逐渐变慢

3.多物体动画

4.透明度动画

效果实现:

1.匀速动画(以物体左右匀速运动为例)

动画效果主要是用定时器setinterval()来实现的,每隔几毫秒让物体移动一点距离,通过不断调用定时器来达到让物体运动的效果。

将定时器放在一个函数内,定义物体的运动速度speed为10,判断物体的运动方向(向左走或向右走)来规定speed的正负;

然后将 物体的offsetleft加上速度speed 赋值给物体的left样式值(要给物体设置定位);

当物体到达目标位置时清除定时器;

 1   var box = document.queryselector('.box'); // 获取box盒子
 2   box.addeventlistener("mouseover", function() {
 3       animate(400);  // 当鼠标经过盒子时,让盒子运动到400的位置
 4   });
 5   var timer = null;  // 声明一个变量来存储定时器
 6   function animate(target) {  // target 目标位置
 7       clearinterval(timer);  // 开启定时器前要先关闭上一个定时器,不然定时器会累加导致速度越来越快
 8       timer = setinterval(function() {
 9           var speed = 10;  // 速度 固定值10
10           speed = box.offsetleft < target ? speed : - speed;  // 判断是向左走(负)还是向右走(正)
11           if(box.offsetleft == target) {
12               clearinterval(timer);  // 盒子到达目标值时清除定时器
13           } else {
14               box.style.left = box.offsetleft + speed + 'px';
15           }
16       },25)
17   }

 

2.缓动动画(和匀速运动相同原理,只不过速度做些改变)

让速度等于 目标值和当前位置之差/10,二者之差会越来越小,即速度speed也会越来越小;

二者之差除以十并不总是整数,可能会导致物体位置和目标值不能完全相等,所以需要对speed进行取整,大于0向上取整,小于0向下取整;

 1     var box = document.queryselector('.box');
 2     box.addeventlistener("mouseover", function() {
 3         animate(400);
 4     });
 5     var timer = null;
 6     function animate(target) {
 7         clearinterval(timer);
 8         timer = setinterval(function() {
 9             var speed = (target - box.offsetleft) / 10; // 速度为目标值和当前位置之差/10
10             speed = speed > 0 ? math.ceil(speed) : math.floor(speed); // 判断speed的正负,大于0向上取整,小于0向下取整
11             if(box.offsetleft == target) {
12                 clearinterval(timer);
13             } else {
14                 box.style.left = box.offsetleft + speed + 'px';
15             }
16         }, 25)
17     }

 

3.多物体动画(相同原理,不过要多开器几个定时器)

因为有多个物体要做动画,所以要给每个物体都要开启一个定时器,向上边那样只声明一个timer是不行的,

所以要循环遍历每个li(我是用列表写了几个小盒子),给每个li声明一个timer来存储各自的定时器,

并且要给animate函数多添加一个形参obj来区分是哪个盒子的定时器

 1     var lis = document.queryselectorall('li');
 2     for(var i = 0; i < lis.length; i++) {   // 循环遍历li
 3         lis[i].timer = null;   // 给每个li声明一个timer来存储定时器
 4         lis[i].addeventlistener("mouseover", function() {
 5             animate(this, 400);
 6         });
 7     }
 8     function animate(obj, target) {
 9         clearinterval(obj.timer);
10         obj.timer = setinterval(function() {
11             var speed = (target - obj.offsetleft) / 10;
12             speed = speed > 0 ? math.ceil(speed) : math.floor(speed);
13             if(obj.offsetleft == target) {
14                 clearinterval(obj.timer);
15             } else {
16                 obj.style.left = obj.offsetleft + speed + 'px';
17             }
18         }, 25)
19     }

 

4.透明度动画(与匀速运动相似)

声明一个alpha变量来存储当前的透明度,speed为速度,当前透明度加速度 赋值给盒子的透明度样式。

(多个物体透明度也是和上边多物体动画一样的,给每个物体都添加一个定时器,并给animate函数多一个形参obj)

 1 <style>
 2     .box {
 3         width: 200px;
 4         height: 200px;
 5         background-color: #f00;
 6         opacity: 0.3;
 7         filter: alpha(opacity = 30); /* 兼容ie8及以下的ie浏览器 */
 8     }
 9 </style>
10 <script>
11     window.addeventlistener('load', function() {
12         var box = document.queryselector('.box');
13         box.addeventlistener('mouseover', function() {
14             animatealpha(100);  // 鼠标经过盒子 透明度变为1
15         })
16         box.addeventlistener('mouseout', function() {
17             animatealpha(30);  // 鼠标离开透明度变为0.3
18         })
19         var alpha = 30;  // 存储当前透明度 初始值为30
20         var timer = null;
21         function animatealpha(target) {
22             clearinterval(timer);
23             timer = setinterval(function() {
24                 var speed = 10;
25                 speed = alpha < target ? speed : - speed; // 判断速度的正负
26                 if(alpha == target) {
27                     clearinterval(timer);
28                 } else {
29                     alpha += speed;
30                     /* 这里有两个样式都需要改变 */
31                     box.style.filter = 'alpha(opacity = '+ alpha +')';
32                     box.style.opacity = alpha / 100; // opacity别忘了除以100
33                 }
34             }, 25);
35         }
36     })
37 </script>