这两天开始看《javascript网页动画设计》，这里总结一下。这个库我之前用过，很方便也很流畅。但是里面除了第四章介绍了动画工作流和第七章介绍了动画性能外，都是介绍 velocity 这个库的，或许叫『velocity动画设计』更为妥当。
这里姑且记录一下，过一阵开始总结『web动画』这个主题。
第一章 javascript动画与css动画 js动画性能不是问题 css 适合悬停状态的动画 js动画和css动画一样快 不要将js与jquery混为一谈 velocity.js js动画独有的功能 页面滚动：页面滚动到某个元素上 动画反转：元素以动画形式变动回上一个动画开始之前的值 物理动效：摩擦力 第二章 使用velocity.js实现动画 动画的种类：
css动画： transition / animation js动画：gsap、velocity.js canvas动画：fabric.js svg动画：snap.js 、svg.js webgl动画：three.js 详情可以看 这里
缓动方程
第三章 动效设计理论 这一章全是在讲理论的东西，难道买错书了？
第四章 动画工作流 css动画工作流
为了更好地管理ui动画工作流，开发人员有时会放弃js而使用css。但是，一旦动画的复杂度达到了中等或更高水平，那么使用css动画通常会使工作流变得明显比用js更加糟糕。
css的问题 css利用关键帧来实现复杂动画序列：
@keyframes myanimation{ 0%{opacity:0;transform:scale(0,0)} 25%{opacity:1;transform:scale(1,1)} 50%{transform:translate(100px,0)} 100%{transform:translate(100px,100px)}}#box{animation:myanimation 2.75s}
如果要把 opacity 动画时长增加1秒，其他属性动画时长不变，就必须要重新计算，才能使百分比各处的属性值与增加1秒后的时长匹配起来。
什么时候用css 当用户鼠标悬停在元素上时触发的简单样式变化，使用 transition
代码技巧：将样式与逻辑分离 一般做法 在jquery中，主要由两种动画方式：
利用 addclass() 和 removeclass() 切换样式 使用 animate() ： $ele.animate({opacity:1,top:50},1000) 第一种方法更值得推荐，因为它的代码组织得清楚，改样式就改css，改逻辑就改js。
优化做法 定义一个js对象，该对象的内容是要设置的css属性。然后将其传入velocity或jquery中。
//style.jsvar fadein = { p: { opacity: 1, top: 50px }, o: { duration: 1000, easing: linear }}//main.js$element.velocity(fadein.p,fadein.o);
这样使用 style.js 有一个独有的能力——定义动画选项。
代码技巧：组织排序动画 velocity 有一个名为 ui pack 的插件，能够优化ui动画工作流。
$element .velocity({translatex:100}) .velocity({translatey;100})
代码技巧：打包效果 $.velocity.registereffect(growin,{ defaultduration: duration, calls: [ [ {opacity:1,scale:1},0.4 ], [ {boxshadowblur:50},0.6 ] ]})$element.velocity(growin)
第五章 文本动画 网页上很少使用文本动画，这里介绍几种工具帮你免于文本动画枯燥乏味的一面，提供高效的工作流。
blast.js
blast能够将页面上的文本进行拆分
结合 velocity.js 和 velocity-ui
第六章 svg入门 snap.svg
svg 动画，在原本应该使用图片的位置使用它：
具有复杂动画序列的按钮，用户悬停鼠标或点击鼠标时会触发这些动画序列 独特的加载状态图形，可以用来替代老掉牙的gif图 公司logo，页面加载时，logo的各个部分可以一起以动画形式呈现 第七章 动画性能 布局颠簸 设置(set)、查询(get)一个元素的css属性是引发性能开销的两个核心浏览器进程(另外还有图形渲染)。
在为元素设置新属性后，浏览器必须计算你这次更改所产生的后续影响。例如，改变一个元素的宽度会导致一系列连锁反应；它的父级元素、兄弟元素和子元素的宽度根据自己的css属性也要调整。
由设置和获取样式的交替而导致的ui性能降低称为 布局颠簸 。
浏览器已经为页面布局的重新计算进行了高度优化，但由于布局颠簸，优化效果大打折扣。
例如，浏览器已经可以将同一时间的获取操作优化成一个单一、流畅的操作，因为浏览器在第一次获取之后可以缓存页面的状态，然后在后续每次获取操作时，参考那个状态。但是，如果反复执行获取后又设置，就让浏览器去做了很多繁重的工作，因为设置所做的更改会不断地使其缓存失效。
布局颠簸在动画循环中出现的话，对性能更是雪上加霜，最后就是让动画变得卡顿。
解决办法 把dom的设置和获取的操作分别集合在一起批量操作
//糟糕的做法var currenttop = $('element').css('top'); //get$('element').style.top = currenttop + 1; //setvar currentleft = $('element').css('left'); //get$('element').style.left = currentleft + 1; //set
如果把查询放在一起，把设置放在一起，那么浏览器就可以打包相应操作，减少代码造成的布局颠簸的影响：
var currenttop = $('element').css('top'); //getvar currentleft = $('element').css('left'); //get$('element').style.top = currenttop + 1; //set$('element').style.left = currentleft + 1; //set
比如，点击按钮切换 none 和 block ，可能会先要检查侧边菜单的 display 属性是设置成 none 还是 block ，然后再相应地进行值得替换。检查是一次『获取』，之后无论设置成什么是一次『设置』。
想要优化的话，可以在设置一个变量，每当按钮点击的时候，这个变量跟着更新，然后在切换可见性之前，查询这个变量就可以得知菜单的当前状态了。『获取』的过程就可以省掉了。
避免影响临近的元素 有很多css属性，一经改变，就会造成临近元素尺寸或位置的调整，其中包括 top、right、bottom、left，margin、padding，border，以及width、height
解决办法 尽可能设置css的transform属性（translate、scale、rotate）的动画。transform属性的特殊之处在于它们将目标元素提升至一个单独的层，这个层可以独立于页面其他内容单独渲染（通过gpu加速提升性能），因此相邻的元素不会受到影响。
优先考虑 opacity胜于 color opacity是另一个可以让gpu渲染加速的css属性，因为它不影响元素的位置。
比如，当用户鼠标悬停在元素上时color属性会改变，那么请考虑使用opacity动画来替代。如果最终效果和设置颜色的动画效果差不多，那么留用设置opacity动画吧。
请查看 csstrigger.com 上的内容，了解每个css属性如何影响浏览器性能。
不用持续响应scroll和resize事件 浏览器的scroll和resize是两个触发频率非常频繁的事件类型：每当用户调整或滚动浏览器窗口时，浏览器都会在每秒内触发多次与这些事件相关的回调函数。窗口scroll或resize的时候会多次触发事件，如果其中有布局颠簸，那么会给浏览器带来巨大负担。
解决办法 定义一个时间间隔，在此事件间隔期间，事件回调仅会被调用一次。这就是所谓的『反跳』。
例如定义了一个250毫秒的反跳间隔，而用户滚动页面时间为1000毫秒，这时候，事件回调仅仅会触发四次。
undersocre的 debounce 函数就是这个作用 flexible中是用的定时器：
win.addeventlistener('resize', function() { cleartimeout(tid); tid = settimeout(refreshrem, 300);}, false);
减少图片渲染 图片的形式：
gradient box-shadow / text-shadow 视频、图片是多媒体元素类型，浏览器必须要加倍渲染才行。多媒体元素中包含上千万的像素数据，要改变它们的大小、尺寸或重新合成对浏览器计算开销很大。
另外，滚动页面几乎可以视为设置整个页面的动画（可以把滚动页面视为设置页面的top属性的动画），在移动设备中，多媒体元素会造成滚动性能的巨幅下降。
解决办法 尽可能少地加载图片