前端动画效果实现的简单比较
来源:互联网 发布:杭州网络推广红四 编辑:程序博客网 时间:2024/05/17 22:07
前端动画效果实现的简单比较
合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥。本文旨在探讨各种前端动画效果实现方式的异同,具体应用中如何实现,以及实现的效果还得根据自身的情况进行考量。
Javscript 动画
因为没有其它可用的实现方式,最初的前端动画都是JS来实现,实现上就是通过一个定时器setInterval 每隔一定时间来改变元素的样式,动画结束时clearInterval即可。早期的类库包括 jquery、prototype、mootools 等等都是这种方式。
尽管这种方式动画的可控性很强,但是问题也很明显:
- 性能不佳,因为需要不断获取和修改Dom的布局,所以导致了大量页面重排(repaint)
- 缺乏标准,不同的库使用了不同的API,导致即使是简单的动画也有各不相同的实现方式,调整起来比较耗时
- 带宽消耗,相对丰富的动画库代码量都很大,结果就是增加了http请求的大小,降低了页面的载入时间
CSS3动画
css3 加了两种动画的实现方式,一种是 transition
, 一种是 animation
。
transition 包含4种属性:transition-delay
transition-duration
transition-property
transition-timing-function
,对应动画的4种属性: 延迟、持续时间、对应css属性和缓动函数。
transform 包含7种属性:animation-name
animation-duration
animation-timing-function
animation-delay
animation-direction
animation-iteration-count
animation-fill-mode
animation-play-state
,它们可以定义动画名称,持续时间,缓动函数,动画延迟,动画方向,重复次数,填充模式。
总的来说,css 动画相比与JS更轻量,性能更好,更易于实现,同时也不必担心缺乏标准和增加带宽消耗的问题。animation 相比 transtion 使用起来更为复杂,但也提供了更多的控制,其中最重要的就是 frame 的支持,不过通过一些简单的JS库,例如 TJ 的 move.js, 我们也能在JS中通过 transition 来实现更复杂的控制。
HTML5 动画
html5 定义了三种绘图的方式,canvas
svg
webgl
,其中svg
做为一种可缩放矢量图形的实现是基于xml标签定义的,它有专门的 animate
标签来定义动画。而为 canvas
或者 webgl
实现动画则需要通过 requestAnimationFrame
(简称 raf) 来定期刷新画布。 尽管说 raf 的方式会让代码变得复杂,但是因为不需要那么多的文档对象(通常浏览器只需要管理一个画布),它的性能也好很多,尤其是在内存吃紧的移动端上面。
通过新的 raf 接口以及一些改进手段我们也可以用JS来实现高性能的动画。主要手段如下:
1. 减少 Dom 样式属性查询,Dom 样式属性的查询会导致页面重排,从而消耗性能,通过将属性保存在JS变量中就可以避免在动画时去查询,从而减少卡顿。
2. 使用性能更好的 css transform
替代改变绝对定位元素的定位属性
3. 在移动设备上使用 3d 硬件加速,最简单办法就是添加 -webkit-transform: translateZ(0)
,原因是移动端的显卡有很强的图形渲染能力,而每个应用的 webview 内存却是极其有限的。
使用JS的动画可控性更好,比如说通过事件捕捉可以很容易的设定不同参数。这方面做的最全面的有 Velocity.js,它可做为jquery 插件使用,对于初学者很友好,我个人会倾向于使用 tween.js,因为它只专注与动画的数值计算,不仅仅只适用与 Dom 操作。
转载自:前端动画效果实现的简单比较
- 前端动画效果实现的简单比较
- [前端] requestAnimationFrame 实现动画效果
- 简单的动画效果的实现
- 简单的方式实现动画效果
- iOS-实现简单的动画效果
- 用CABasicAnimation实现简单的动画效果
- ios气泡动画效果的简单实现
- iOS简单的动画效果实现
- Masonry简单动画效果的实现
- 简单彩虹动画的效果实现
- 欢迎界面动画效果的简单实现
- 通过js实现简单的动画效果
- css3实现简单的文字动画效果
- 动画效果的实现
- 简单的animation动画效果的实现过程
- Html5的CSS3的transition实现简单动画效果
- 实现一个菜单的简单的动画效果
- C#实现的一些音频,视频,简单动画效果
- concurrent.locks包中的几种锁的区别
- Java可变长度的参数——...
- ubuntu 16.04 配置NAT失败 无法转发
- caffe之epoch和iteration
- react-native-navigation-drawer的使用
- 前端动画效果实现的简单比较
- eclipse的maven文件有红色感叹号
- SpringMVC中前后台Date与String相互转换
- mongodb3.4的安装和部署
- LSTM算法原理简介及Tutorial
- BZOJ P1072[SCOI2007]排列perm
- 面试没回音不是你的错!这些原因让你明白!
- linux下查看文件编码及修改编码
- 把“你的书,我的书”换一换