当前位置：网站首页>JS—动画

JS—动画

2022-08-05 13:24:00 【๑Aurora.】

动画实现原理

简单动画函数封装

一共两个参数，目标对象和目标位置，封装好函数后，只需要修改函数参数，对不同对象添加该动画

建议使用对象的属性来声明定时器，这样不会额外开辟多余内存空间

注：当用按钮来控制动画的开始时，不断点击按钮，元素速度会越来越快，因为每点击一次，会开启一个定时器，定时器堆积到一起，速度就会加快
解决方法：每一次点击按钮后，都先清除之前的定时器，再开启新的定时器，保证一个元素只有一个定时器在执行

缓动动画

当元素在多个目标值之间变化时，要考虑步长值的正负性，正数向上取整，负数向下取整

遇到回调函数时，要将回调函数写在定时器判断结束的位置上，当动画动作完成后，才会执行回调函数

轮播图

轮播图也称为焦点图，网页中常见的网页特效，一般是让ul移动，而不是li进行移动

轮播图案例

功能需求

生成下方圆圈

小圆圈在通过点击，切换颜色时，要用到排他思想

ul移动距离 = -（圆圈索引号 * 图片宽度）

右侧按钮无缝滚动

首先克隆第一张图片

接下来实现点击按钮无缝滚动

小圆圈变化

当点击小圆圈时，要将控制按钮的num与此时点击的小圆圈索引号相同，才不会出现

左侧按钮控制

与右侧按钮思路相同，但是在判断条件处要注意边界

自动播放功能

自动播放就像我们在点击右侧按钮一样，设置定时器，使用手动调用点击事件

节流阀

版权声明
本文为[๑Aurora.]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_62755767/article/details/126105304

边栏推荐

猜你喜欢

随机推荐