web动画

一动画的分类

  css动画， js动画， canvas动画

二Transition动画

1初识：

transition是一个复合css属性。包括transition-property、transition-duration、transition-timing-function、transition-delay四个子属性

• transition-property: 过渡属性(默认值为all) 
• transition-duration: 过渡持续时间(默认值为0s) 唯一必填
• transiton-timing-function: 过渡函数(默认值为ease函数)
•  transition-delay: 过渡延迟时间(默认值为0s)

2语法：

transition: property  duration function  delay , property  duration function  delay

3使用：

.a {
  width: 100px;
  height: 100px;
  transition: width 2s ease 0s;
}

.b {
  width: 300px;
}

<div class="a" :class="{b:start}"></div> 通过控制start来实现动画

4注意：

• 四个子属性之间不能用逗号隔开，只能用空格隔开。逗号隔开表示多个动画。

• property:不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果

• duration:该属性不能为负值,还必须带上单位 如：1s 1ms

• delay：该属性不能为负值,还必须带上单位 如：1s 1ms

• timing-function：分三类：关键字、steps函数和bezier函数

• 关键字：

  ease: 开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25,1) linear: 匀速。相当于cubic-bezier(0,0,1,1) ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1) ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1) ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1) step-start: 直接位于结束处。相当于steps(1,start) step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)

• steps函数

  steps(参数一,参数二)

参数一：用来指定间隔个数(该值只能是正整数)

参数二：start或者end，包括第一步和不包括第一步

• cubic-bezier(x1,y1,x2,y2)函数

• 若过渡起始值或过渡结束值为auto，则浏览器不会自己计算成具体数字值，而是不发生过渡效果。

API：设置动画结束监听事件

   this.$refs.test.addEventListener("transitionend",my);
    var my = function (e) {
        //当过渡事件执行完后，应及时使用removeEventListener取消绑定，以免对其他效果造成影响
       this.$refs.test.removeEventListener("transitionend", myFunction);
    };

• transitionend事件在前进阶段结束时会触发，在反向阶段结束时也会触发。

5局限性：

transition再过渡动画方面表现很出色，但也有他的局限性：

1. transition需要事件触发，所以没法在网页加载时自动发生。

2. transition是一次性的，不能重复发生，除非一再触发。

3. transition只能定义开始状态和结束状态，不能控制中间状态。

三animation动画

1初识：

为了作出更加细腻，更加复杂，更加可控的动画，官方提供了animation复合css属性来实现动画。他包括8个子属性。

• animation-name: 动画名称(默认值为none)
• animation-duration: 持续时间(默认值为0)   不能为负值,还必须带上单位
•  animation-timing-function: 时间函数(默认值为ease)  同上
•  animation-delay: 延迟时间(默认值为0)  不能为负值,还必须带上单位。开始时进行一次
• animation-iteration-count: 循环次数(默认值为1) 不能是0和负数。infinite无限次动画
• animation-direction: 动画方向(默认值为normal) 属性可选择见下文
• animation-play-state: 播放状态(默认值为running) 属性可选择见下文
• animation-fill-mode: 填充模式(默认值为none) 属性可选择见下文

2语法：

@keyframes animation-name{
    from | 0%{}
    n%{}
    to | 100%{}
}

from等同于0%，to等同于100%。

3使用：

@keyframes test{
    0%{background-color: lightblue;}
    30%{background-color: lightgreen;}
    60%{background-color: lightgray;}
    100%{background-color: black;}
}

.defult {
  width: 300px;
  height: 100px;
  background-color: pink;
  animation-name: test;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-play-state: running;
  animation-fill-mode: none;
}

    <div ref="test" class="defult"></div>

4注意：

• 百分比顺序不一定非要从0%到100%排列，最终浏览器会自动按照0%-100%的顺序进行解析
• 0%不可以省略百分号
• 如果存在负百分数或高于100%的百分数，则该关键帧将被忽略
• 如果0%或100%不指定关键帧，都将使用该元素默认的属性值
• 若存在多个@keyframes，浏览器只识别最后一个@keyframes里面的值 
• 如果动画的其他7个子属性和动画名称的长度不同，动画名称列表的长度决定最终的长度，多余的值无用，缺少的值按照顺序进行重复

animation-direction可选择属性：

• normal: 正向播放
•  reverse: 反向播放 
• alternate: 若动画只播放一次，则和正向播放一样。若播放两次以上，偶数次效果为反向播放 
• alternate-reverse: 若动画只播放一次，则和反向播放一样。若播放两次以上，偶数次效果为正向播放

animation-play-state可选择的属性：

• running表示播放中
• paused表示动画暂停

animation-fill-mode可选择的属性：

• none: 动画结束后，元素移动到初始状态 [注意]初始状态并不是指0%的元素状态，而是元素本身属性值 
• forwards: 元素停在动画结束时的位置 [注意]动画结束时的位置并不一定是100%定义的位置，因为动画有可能反向运动，也有可能动画的次数是小数 
• backwards:在animation-delay的时间内，元素立刻移动到动画开始时的位置。若元素无animation-delay时，与none的效果相同 [注意]动画开始时的位置也不一定是0%定义的位置，因为动画有可能反向运动。
•  both: 同时具有forwards和backwards的效果

API

animation涉及到的事件有animationstart、animationend、animationiteration三个。这三个事件的bubbles都是yes，cancelable都是no

5局限性

animation动画相比Transition动画优化了：

1.可以设置动画次数 2.动画非事件可触发 3.动画可暂停播放 4.动画过程可控制。但是还都是基于style已经定义的属性进行变换。相比较用在canvas中，就显得力不从心。

三transform属性

transform分为transform2D和transform3D两种

2D

1初识：

transform属性提供移动、旋转、缩放和倾斜函数的集合，与之配合的属性有transform-origin变形原点（默认在元素的中心点）。

2语法：

就是一个css属性。可用于transition和animation动画。

3使用：

.defult {
  width: 200px;
  height: 200px;
  background-color: #000000;
  //配置初始值，可选
  transform:rotate(45deg);
  //配置变形原点，可选
  transform-origin: center center;
  //配置变换
  transition: transform  3s;
}

.a {
  //配置变换结束值
 transform:rotate(90deg);
}

<div ref="test" class="defult" :class="{ a: move }"></div>

4注意：

• transform-origin变形原点可取值：关键字，数值px，相对自身的百分比，同时还可以混合使用。

• transform中出现多个变形函数时用空格分隔

  : translate | scale | rotate | skew | matrix

• 实际上，位移、缩放、旋转和倾斜这四个操作都是通过矩阵matrix实现的

2D矩阵:

matrix(a,b,c,d,e,f)

x' = ax + cy + e;
y' = bx + dy + f;

由此可得到默认a、d为1，b、c、e、f为0。a和d控制缩放，且不可为0；c和b控制倾斜；而e和f控制位移。

2D位移（不需要中心点）：

translate（x,y）、translateX(x)<=> translate(x,0)、translateY(y)<=> translate(0,y)

位移函数相当于matrix(1,0,0,1,x,y)

x，y可取值：数字，或者相对自己的百分比。

2D缩放（需要中心点）：

scale(x,y)、scaleX(x) <=> scale(x,1)、scaleY(y) <=> scale(1,y)

缩放函数相当于matrix(x,0,0,y,0,0)

x，y可取值：数字，或者相对自己的百分比。

2D倾斜（需要中心点）：

skew(xdeg,ydeg)、skewX(x) <=>skew(x,0)、skewY(y)  <=>skew(0,y)

倾斜函数相当于matrix(1,tany,tanx,1,0,0)

2D旋转（需要中心点）：

rotate(Ndeg)

当N为正数时，元素进行顺时针旋转；当N为负数时，元素进行逆时针旋转

旋转函数相当于matrix(cosN,sinN,-sinN,cosN,0,0)

3D

透视区域：变形元素的父级或祖先级。可设置perspective和perspective-origin属性，她的大小决定透视点活动区域。

透视点：模拟出来类似人的视线。

变形元素：做transform变换的元素

透视距离perspective：

是指观察者沿着平行于z轴的视线与屏幕之间的距离，简称视距。不可为0和负数，不可取百分比。可取N px。该属性值越大，元素的3d效果越不明显。

　透视原点perspective-origin：

是指观察者的位置，活动区域是透视区域大小。

取值: x轴 y轴。

关键字：

x轴
    left: 0% center: 50% right: 100%
y轴
    top: 0% center: 50% bottom: 100%

数字：

N px 。x轴数值表示在x轴上离0点(元素边框外侧左上角)的偏移量；y轴数值表示在y轴上离0点的偏移量

百分比：

x轴的百分比相对于被透视元素的宽度和(width+横向padding+横向border)，而y轴的百分比相对于被透视元素的高度和(height+纵向padding+纵向border) 。

变换函数：

倾斜：

skew()是二维变形，不能在三维空间变形，元素可能会在x轴和y轴倾斜，但不能在z轴倾斜

3D位移（不需要中心点）：

translate3d(x,y,z)

x和y可以是长度值，也可以是百分比；z只能设置长度值

3D缩放（需要中心点）：

scale3d(x,y,z)

scaleZ()和scale3d()单独使用时没有任何效果

3D旋转：

rotate3d(x,y,z,Ndeg)

中心线是（0，0，0）和（x,y,z）之间的连线。N表示旋转的度数

观察上边要想实现透视效果，必须给父div设置大小，透视点，透视距离。语法给我提供另外一种只在变换元素自身设置属性。

transform: perspective(300px) scale3d(0.5,0.5,0.5);观察点在元素中心点

注意：由于transform属性是从前向后的顺序解析属性值的，所以一定要把perspective()函数写在其他变形函数前面，否则将没有透视效果 

其他属性

元素背面是否可见：

backface-visibility: 设置元素背面是否可见

visible:可见，默认
hidden:不可见

使用变形可能回来副作用