JavaScript动画

最新推荐文章于 2024-08-31 23:42:40 发布

暮白寒窗雪

最新推荐文章于 2024-08-31 23:42:40 发布

阅读量7.3k

点赞数 3

文章标签： javascript 动画 jquery

本文链接：https://blog.csdn.net/tiben/article/details/119900113

版权

本文介绍了JavaScript动画的基本原理，包括视觉残留和帧的概念。接着讲解了JavaScript中通过setTimeout和setInterval实现动画的方式，并列举了常用的动画库，如jQuery、Velocity.js和Snap.svg等。同时，探讨了动画卡顿的原因，包括JavaScript执行、样式计算、布局和绘制，并提出了相应的优化策略，如使用requestAnimationFrame和GPU加速。

摘要由CSDN通过智能技术生成

JacaScript动画

引言——在设计前端页面时，会用到很多效果，我们可以采用CSS样式或JavaScript来实现，在这里给大家介绍JS动画

一、JacaScript动画的基本原理

1、动画的原理：动画是利用人眼的视觉残留特性而达成的一种视觉效果，即人眼看到的影像会有短暂时间的残留，这个时间约为1/24秒，当一段连续变化的影像
在较短时间内变化时就会给人以流畅的感觉。根据1/24秒这个数据我们可以推断出，当连续变化的影像为每秒24次的速度就能给人流畅的感觉。
所以电影的帧频为24帧，而电视一般采用的是25帧和30帧两种制式
2、帧：动画中最小单位的单幅影像画面,在讲多少帧的时候指的就是每秒钟画面切换的次数

二、JavaScript中的动画简介

在JavaScript中没有帧的概念.但是我们可以通过setTimeout()和setInterval()这两个方法来实现类似的效果
1、setTimeout(callback, time)
延迟一段时间(time/ms)后执行对应的方法callback, 只执行一次
2、setInterval(callback, time)
延迟一段时间(time/ms)后执行对应的方法callback, 循环执行,直到取消