前端实现动画的7种方式

1.css3的transition属性

transition只需指定动画的开始和结束状态,整个动画的过程是由特定的函数控制,你不用管它

2.css3的animation属性

animation可以对动画过程中的各个关键帧进行设置

3.原生JS动画

通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果

4.使用canvas绘制动画

Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况,完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。

5.SVG动画

SVG是一种基于XML的图像格式,非常类似于HTML的工作方式。它为许多熟悉的几何形状定义了不同的元素,这些元素可以在标记中组合以产生二维图形; 同样高清的质地,矢量图不畏惧放大,体积小。

6.Jquery的animate函数

animate() 方法执行 CSS 属性集的自定义动画;该方法通过 CSS 样式将元素从一个状态改变为另一个状态。

7.使用gif图片

图形交换格式

总结:

  • 代码复杂度方面简单动画:css代码实现会简单一些,js复杂一些。 复杂动画的话:css代码就会变得冗长,js实现起来更优。
  • 动画运行时,对动画的控制程度上 js 比较灵活,能控制动画暂停,取消,终止等css动画不能添加事件,只能设置固定节点进行什么样的过渡动画。
  • 兼容方面 css 有浏览器兼容问题js大多情况下是没有的。
  • 性能方面 css动画相对于优一些,css 动画通过GUI解析js动画需要经过js引擎代码解析,然后再进行 GUI 解析渲染。
相关推荐
贩卖纯净水.4 分钟前
Webpack常见的插件和模式
前端·webpack·node.js
brzhang12 分钟前
Flutter 调用原生代码,看这篇就够了:从零教你搭起通信的桥
前端·后端·架构
袁煦丞13 分钟前
知识管理的六边形战士Trilium Notes:cpolar内网穿透实验室第520个成功挑战
前端·程序员·远程工作
失败又激情的man22 分钟前
python爬虫之数据存储
前端·数据库·python
互联网搬砖老肖23 分钟前
Web 架构之 API 安全防护:防刷、防爬、防泄漏
前端·安全·架构
小声读源码1 小时前
【技巧】dify前端源代码修改第一弹-增加tab页
前端·pnpm·next.js·dify
假客套1 小时前
2025 后端自学UNIAPP【项目实战:旅游项目】7、景点详情页面【完结】
前端·uni-app·旅游
Captaincc1 小时前
Ilya 现身多大毕业演讲:AI 会完成我们能做的一切
前端·ai编程
teeeeeeemo2 小时前
Vue数据响应式原理解析
前端·javascript·vue.js·笔记·前端框架·vue
Sahas10192 小时前
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.
前端·javascript·vue.js