前端实现动画的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 解析渲染。
相关推荐
卸任11 小时前
Vibe coding工具使用心得
前端·ai编程
brien912 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance12 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M12 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写12 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李12 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易13 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马13 小时前
前沿视界
前端
kyriewen13 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易13 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员