Animations

Animations

1. Bezier curve 贝塞尔曲线

1. 什么是贝塞尔曲线？

贝塞尔曲线被用于在计算机图形学中绘制图形，或者用在CSS动画中, 或者不少其余地方。
贝塞尔曲线由控制点构成, 有如下几个特色:

• 控制点并不都在曲线上。
• 曲线的阶等于点的数目减去一个。
  【对于两点，则是一个线性曲线（一条直线），三点-二次曲线（抛物线），四点-三次曲线。】
• 曲线老是在控制点的凸包内。

2. 如何计算贝塞尔曲线？

假设有控制点：P1 = (x1, y1) P2 = (x2, y2) P3 = (x3, y3) P4 = (x4, y4)
曲线的坐标取决于最后的方程式， 参数t在[0, 1]之间。

• 假若有两个点，则公式是:
  
• 假若有三个点，则公式是:
  
• 假若有四个点，则公式是：
  

根据这个公式，咱们就能够计算x和y的坐标值了，以三个点为例:

假设这三个点的坐标是：(0,0), (0.5, 1) (1, 0)

因此这时当t的值，从0到1变化时，咱们就能够根据上面的方程式算是对应的(x, y)坐标，再将这些坐标连成线，就画成了贝塞尔曲线。
t = 0, (0, 0)
t = 0.2, (0.2, 0.36)
t = 0.4, (0.4, 0.64)
t = 0.6, (0.6, 0.84)
t = 0.8, (0.8, 0.96)
t = 1, (1, 1)

2. CSS Animations

咱们能够使用CSS3提供的transition来实现动画，而不借助Javascript的帮助.
CSS transition的想法很是简单，就是咱们来描述一个属性以及这个属性将如何变化，当属性改变时，浏览器绘制动画过程。
CSS transition有四个属性：
transition-property 定义属性名称
transition-duration 定义动画持续时间
transition-timing-function 经过函数的方式来描述动画的执行过程
transition-delay 定义动画的延迟时间
固然transition的属性也能够简写成：transition:property duration timing-function delay

transition-property 不是全部的属性能够作成动画，能够的属性见这里https://www.w3.org/TR/css-tra...
若是这样定义:transition-property: all意味着要把全部属性作成动画.

transition-duration 持续时间须要使用ms或者s为单位。
transition-delay 定义延迟的时间
若是这样定义: transition-delay: 1s 动画在1s后开始进行
若是这样定义: transition-delay: -1s, 当delay是负值时, 则会减小相应的动画持续时间. 由于这时延迟执行就变成了超前执行。
transition-timing-function 描述动画的执行过程

1. 贝塞尔曲线

最经常使用的就是贝塞尔曲线了cubic-bezier(x1, y1, x2, y2)
执行CSS动画的贝塞尔曲线是三阶贝塞尔, 有四个控制点:
第一个点是: P1(0, 0)
最后第一个点是: P4(1, 1)
因此咱们只须要定义中间的两个点: P2(x1, y1) P3(x2, y2)
因此计算曲面上点坐标的公式就是:

因为x1 = 0, x4 = 1, 因此简化一下就是:

因为y1 = 0, x4 = 1, 因此简化一下就是:

假定中间两个点的左边是: (0, 0.5) (0.5 ,1.0)
那么对应的公式就变为:

而t的范围又是[0, 1], 因此咱们就能够给定t不一样的值，而后画出对应的曲线。

其中已经有几个内置的贝塞尔曲线能够用了,
linear cubic-bezier(0, 0, 1, 1)
ease cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out` cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out cubic-bezier(0.42, 0, 0.58, 1.0)

贝塞尔曲线不只能够实现平滑的曲线，还能够实现跳跃的曲线.
若是某个点的y坐标出现了负值或者很大值时，贝塞尔曲线就能够跳的很是低或者很是高。
好比: transition: left 5s cubic-bezier(.5, -1, .5, 2);

2. Steps函数

steps(number, start/end)定时函数可让动画一步一步的执行.
第一个参数定义步数
第二个参数若是为start, 意味着在动画开始的时候, 就要当即执行第一步.
若是为end, 意味着不在开始的时候执行，并且每一秒结束的时候执行.
step-start效果等用于steps(1, start).
step-end效果等用于steps(1, end).

3. transitionend事件

当CSS的动画结束时，会触发transitionend事件.
一般用来在动画完成后作些操做，或者合并动画效果.

boat.onclick = function() {
      let times = 1;

      function go() {
        if (times % 2) {
          // swim to the right
          boat.classList.remove('back');
          boat.style.marginLeft = 100 * times + 200 + 'px';
        } else {
          // swim to the left
          boat.classList.add('back');
          boat.style.marginLeft = 100 * times - 200 + 'px';
        }
      }
      go();
      boat.addEventListener('transitionend', function() {
        times++;
        go();
      });
    };

4. Keyframes

语法: @keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需, 定义动画的名称
keyframes-selector 必需, 定义动画时长的百分比.
合法值: 0~100%, from{ } 等价于0%, to{ }等价于100%
0%是动画开始的时间, 100%是动画结束的时间.
css-styles必需, 定义一个或多个CSS样式属性.

定义好@keyframes规则后，就能够配合animation属性来一块儿建立动画了.
举个栗子:

.zorro {
      width: 50px;
      padding: 20px;
      text-align: center;
      background: gold;
      position: relative;
      animation: zorro 1s ease-in 0s 6 alternate;
    }
    @keyframes zorro {
        from {
          top: 0px;
          left: 0px;
        }
        33% {
          top: 0px;
          left: 150px;
        }      
        66% {
          top: 120px;
          left:0px;
        }            
        to {
          top: 120px;
          left: 150px;
        }
    }

from等价于0%, to等价于100%,中间能够定义其余百分比的动画时长.

3. Javascript Animations

JS能够处理一些CSS不能处理的动画.

1. setInterval

最简单的一个方式就是使用setInterval, 经过设定必定的间隔，而后在相应间隔作元素属性的变化, 在一段时间后, clearInterval, 这样就能够作成一个动画了.

train.onclick = function() {
      let start = Date.now();
      let timer = setInterval(function() {
          let timePassed = Date.now() - start;
          train.style.left = timePassed / 5 + 'px';
          if (timePassed > 2000) clearInterval(timer);
      }, 20);
    }

咱们定义一辆火车, 而后每隔20ms, 让火车动一下, 运动了2s后, 中止火车, 这样就造成了一个匀称运动的动画.