前端写动画,无非两种方案,一种是通过css,另一种是js
css的方案:
1.transform的单独使用 (IE9+)
rotate(90deg) 2d旋转,也可以理解为沿着3D的Z轴旋转
rotateX(90deg) 沿着3D的X轴旋转,同理还有rotateY rotateZ
translate(100px, 50px) 沿着X方向 Y方向移动100px, 50px
scale(2) 缩放 定义 2D 缩放转换。
skew 斜切 沿着 X 和 Y 轴的 2D 倾斜转换 (平行四边形、梯形的实现)
更详细的transform属性请点击 http://www.w3school.com.cn/cssref/pr_transform.asp
2.transition的单独使用 (IE10及以上)
元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终需要的值
特点:需要事件(hover,focus,js)触发,不能重复,不能定义中间状态
  • transition-property css属性名称(所有属性 'all')
  • transition-duration 过渡时间
  • transition-timing-function 速度曲线
  • transition-delay 延迟时间
四个属性可以简写,如 transition: width 1s ease 0.2s
 
3.animation单独使用 (IE10及以上)
  • animation-name key-frame名称
  • animation-duration 过渡时间
  • animation-timing-function 速度曲线
  • animation-delay 延迟
  • animation-iteration-count 播放次数 无限'infinite'
  • animation-direction 是否应该轮流反向播放
六个属性可以简写
 
transition和animation的差异:
1.transition动画的执行过程就是声明关键帧的过程,而animation动画的事先声明关键帧(@keyframes),然后再调用关键帧
2.transition动画的执行需要有事件(hover、点击事件)来驱动,而animation动画的执行不一定需要驱动
3.transition 不能无限循环,不能指定播放次数,只能定义头尾帧。
 
animation与transform的混合应用demo:
.App-logo {
position: absolute;
top: 10px;
left: 10px;
animation: App-logo-spin infinite 2s linear;
height: 80px;
}
 
@keyframes App-logo-spin {
50% {
transform: translate(100px, 100px) // 使用translate代替absolute
// top: 100px;
// left: 100px;
}
}
 
js的方案
1.setTimeOut/setInterval (不推荐)
2.requestAnimationFrame(兼容性ie10以上)
 
关于requestAnimationFrame
window.requestAnimationFrame()接收一个函数作为回调,返回一个id
window.cancelAnimationFrame()传入id取消动画
为什么推荐使用requestAnimationFrame而不是setTimeOut/setInterval?
1.requestAnimationFrame 会把每一帧的所有DOM操作集中起来,在一次重绘或回流中完成。且重绘或回流的时间间隔紧跟随浏览器的刷新频率
3.在隐藏或不可见的元素中,requestAnimationFrame将不会重绘和回流,节省的CPU、GPU、内存使用
4.requestAnimationFrame是浏览器专为动画提供的API,浏览器会自动优化方法的调用,若页面不是激活状态,动画自动暂停,节省CPU
 
最后的总结
1. 尽可能的使用CSS 关键帧动画或者CSS transition。浏览器可以优化大量绘制和组合的时间。
 
2. 如果一定使用基于JS的动画,尽量使用requestAnimationFrame。尽量不要使用setTimeout, setInterval。
 
3. 尽量不要在每一帧上改变inline元素,浏览器可以在多方面优化css中声明式动画。
 
4. 使用2D transforms来代替position:absolution将会显著的提高FPS(每秒传输帧数),因为2D transform有更少的绘制时间和更流畅的动画。 通过改变元素top/left进行动画,在每一帧内,cpu都需要计算该元素的其他样式,特别是相对需要复杂计算的盒阴影,渐变,圆角等样式,最后都需要将这些样式应用到该元素内。从这个角度看,如果对于较为老旧的移动设备进行相对复杂的动画,那么效果肯定不理想。
而通过调用translate,会启动硬件加速,即在GPU层对该元素进行渲染。这样,CPU就会相对解放出来进行其他的计算,GPU对样式的计算相对较快,且保证较大的帧率。我们可以通过2d和3d的transform来启用GPU计算。
 
5. chrome(版本69.0)可以通过Timeline Frams模式来观测什么让你变慢
6.chrome(版本69.0)可以通过animations来对动画进行微调
6.文章排版还有待加强

web动画小结的更多相关文章

  1. 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  2. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  3. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  4. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  5. HTML5探秘:用requestAnimationFrame优化Web动画

    本文转载自: HTML5探秘:用requestAnimationFrame优化Web动画

  6. 流畅web动画的十个法则

    from me: web动画能够带来一个非常酷炫的效果,能够让页面有一个更好的用户体验.对于良好的动画性能没有高招,除了将大量的时间放在测试和优化,当然最重要的还是要易于维护. 流畅web动画的十大法 ...

  7. Web动画API教程2:AnimationPlayer和Timeline

    本文转载: Web动画API教程2:AnimationPlayer和Timeline

  8. Web动画API教程1:创建基本动画

    本人转载自: Web动画API教程1:创建基本动画

  9. Web 动画帧率(FPS)计算

    我们知道,动画其实是由一帧一帧的图像构成的.有 Web 动画那么就会存在该动画在播放运行时的帧率.而帧率在不同设备不同情况下又是不一样的. 有的时候,一些复杂或者重要动画,我们需要实时监控它们的帧率, ...

随机推荐

  1. ECharts实例开发学习笔记二——时间轴

    记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数 ...

  2. Discuz 首页图文列表实现

    <div id="shoucang"> <!--{eval $list_count=0;}--> <!--{loop $threadlist $thr ...

  3. 扩增子图表解读3热图:差异菌、OTU及功能

    热图是使用颜色来展示数值矩阵的图形.通常还会结合行.列的聚类分析,以表达实验数据多方面的结果.  热图在生物学领域应用广泛,尤其在高通量测序的结果展示中很流行,如样品-基因表达,样品-OTU相对丰度矩 ...

  4. Python 之pygame飞机游戏

    import pygame from pygame.locals import * import time import random # 我机 class HeroPlane(object): de ...

  5. 解决fixed在苹果手机抖动问题/头部底部固定布局

    1.头部和底部固定,中间内容滚动,不涉及fixed 1)absolute与height:100% <!DOCTYPE html><html><head> <m ...

  6. 内核调试-ftrace introduction

    ftrace https://www.ibm.com/developerworks/cn/linux/l-cn-ftrace1/ https://www.ibm.com/developerworks/ ...

  7. 洛谷——P2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm

    P2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm 题意翻译 题目描述 每年,在威斯康星州,奶牛们都会穿上衣服,收集农夫约翰在N(1<=N< ...

  8. Jupyter Notebook 下安装 PHP 内核

    我最近被强烈安利了 Jupyter Notebook 这个交互式笔记本.然后试用了它自带的 Python 内核后,这个应用整体给我的感觉很不错,就去搜索了下它所支持的其它内核 Jupyter Kern ...

  9. Silverlight之我见——DataGrid数据验证

    <UserControl x:Class="DataValidationSample.MainPage" xmlns="http://schemas.microso ...

  10. 基本数据类型:字符串(str)

    一.字符串的定义和创建 字符串是一个有序的字符的集合,用于存储和表示基本的文本信息,' '或'' ''或''' '''中间包含的内容称之为字符串,总之加了引号的字符都被认为是字符串! 创建: > ...