JS框架设计读书笔记之-动画

基础概念

 

　　CSS样式可分为两种，一种值接近无限的集合(color,width)，一种值只有几种(display)，可以进行计算的样式，产生了动画效果。\

　　1. 动画的第一步是获得元素的精确样式值。

　　2. 若要做平移，传入结束位置、距离、时长、fps。

 

tips：fps设置多少合适？

　　除了人的眼睛，还要考虑到显示器的显示速度与浏览器的渲染速度。据国外统计，根据人所能感知到的变化间隔，25毫秒为最佳数值。

 

缓动公式

　　

　　缓动公式来源于数学上的三角函数、二次项方程、高阶方程式，有了公式就可以控制移动速度。

　　一般情况下，只会用默认的linear或easeIn。现在所有的缓动公式，除了linear外都以ease开头命名，添加三种后缀，In代表加速、Out代表减速、InOut代表先加速后减速，于是有easeIn、easeOut、easeInOut之分。这种命名表示没有介入高阶函数与三角函数，linear表示匀速。

 

 

CSS3 transition

 

 

　　transition是CSS入侵行为层的主要行为。

　　包含4个属性，样式名、持续时间、缓动公式、延迟多久才触发。

 

transition-property

　　指定属性执行transition效果，主要有以下几个值：none（无）、all（所有属性 默认值）、indent（元素属性名）。

　　如果指定属性，可以选择的类型如下：

　　1、与颜色相关的属性，如background-color,border-color,color,outline-color。

　　2、与盒子模型、字体大小、间距、行高有关样式。如width、top、margin、line-height等。

　　3、透明度 opacity。

　　4、变形相关 即transform。

　　5、阴影 text-shadow box-shadow。

　　6、线性渐变与径向渐变。

 

transition-duration

　　动画持续时间，单位可以是s，也可以是ms。

 

transition-timing-function

　　缓动公式。有6个可能的值

　　1、ease：逐渐变慢（默认值）

　　2、linear：匀速

　　3、ease-in：加速

　　4、ease-out：减速

　　5、ease-in-out：先加速后减速

　　6、cubic-bezier：允许自定义一个时间曲线。（x1,y1,x2,y2），四个值对应贝塞尔曲线的4个点，值需定义在[0,1]之间。

 

transition-delay

　　延迟执行时间，可选单位s或ms。

 

　　该属性缺点是不可控，无法暂停，一般框架不会用这个来实现动画引擎。

 

 

CSS3 animation

　　

　　

　　吸收了Flash的关键帧理念，并克服了transition的一些缺陷。

　　animation是一个复合样式，可以细分为8个更细的样式，情况与background-*关系相仿。

　　

1、animation-name

　　制约关键帧样式的名字，可以同时对应多个关键帧样式规则名，以‘，’号分开。

 

2、animation-duraiton

　　动画持续时间，单位为s或ms。

 

3、animation-timing-function

　　缓动公式。

 

4、animation-delay

　　动画延迟多久才开始，不计入duration。

 

5、animation-iteration-count

　　动画播放次数，值可以为正整数或infinite，默认只执行一次。

 

6、animation-direction

　　动画执行的方向，有四个值：normal、alternate、reverse、alternate-reverse。

　　normal：指每次都从第一帧开始。

　　alternate：count大于1有效，动画从0%-100%,100%-0%循环。

　　reverse：有兼容问题，与normal相反，从最后一帧开始。

　　alternate-reverse：有兼容问题，与alternate相反。

 

7、animation-fill-mode

　　指动画跑完一圈，是保持动画前的状态还是此时的状态。

 

8、animation-play-state

　　用于暂停或继续此动画。

 

　　除了最后两个，前六个可以写在一块。