web动画效果1. wow.js 2. vegas.js 背景插件，带有幻灯片功能。幻灯片的切换有多种风格，如旋转、渐隐

1. wow.js

当页面滚动到某个元素对应的位置时，触发该元素的动画

1.1 在vue中使用wow.js

安装

npm install wowjs --save-dev

在main.js中引入 animate.css

import '@/js/animate/animate.min.css'

在要用到的组件里面进行初始化

mounted () {
    new WOW().init()
  },

如果在vue里面使用，要修改一下wow.js里面的内容

window.WOW = this.WOW = ...

2. vegas.js

背景插件，带有幻灯片功能。幻灯片的切换有多种风格，如旋转、渐隐、左右等方式，切换的时候还有进度条显示

依赖于jquery.js，在使用jquery.js的时候需要进行修改

// 在jquery.js的最后加上
if (window) {
    window.jQuery = window.$ = jQuery;
}

3. greensock

制作动画的利器，可以完成dom、svg、canvas、3d等各种动画

gsap与tween的关系：3.0 之后，TweenMax.js 业已改名为 GSAP，并统一了 API

gsap.to(dom, options)
gsap.from
gsap.fromTo
gsap.set

3.1 options

{
  repeat: -1, 
  ease: "power1.inOut", // 动画曲线
  delay:1,
  stagger: {
    amount: 1.5, 
    grid: "auto",
    from: "center"
  }
}

3.2 Staggers

两个元素执行动画的时间间隔

stagger: {
  grid: ,
  from: ,
  ease: ,
  amount: ,
  each: ,
  axis: ,
}

3.3 tween

gsap.to(dom, options)、gsap.from() 返回的实例，可以更进一步对动画进行控制

var tween = gsap.to(".green", {
  duration: 4, 
  x: 750, 
  rotation: 360, 
  ease: "none", 
  paused: true
});

3.4 timeline

控制一组动画时使用

var tl = gsap.timeline({repeat: 3, repeatDelay: 1});

tl.to(".green", {duration: 1, x: 200});
tl.to(".orange", {duration: 1, x: 200, scale: 0.2});
tl.to(".grey", {duration: 1, x: 200, scale: 2, y: 20});

3.4.1 options

yoyo

{
  yoyo: true // 当为true是，重复的时候将是反着执行 123 -> 321；为false的时候是123 -> 123
}

3.4.2 methods

addLabel 添加标记，可以让该标记的动画同时执行，并且可以通过该标记重复执行动画

tl.to(".green", {duration: 1, x: 200})
  //start 1 second after previous tween ends (gap)
  .to(".orange", {duration: 1, x: 200, scale: 0.2}, "+=1")
  //add a label at the end
  .addLabel("greyAndPink")
  //start both of these animations at the same time, at the "greyAndPink" label.
  // 有相同标记，同时执行
  .to(".grey", {duration: 1, x: 200, scale: 2, y: 20}, "greyAndPink") 
  .to(".pink", {duration: 1, x: 200, rotation: 360}, "greyAndPink"); 

  playBtn.onclick = function () {
    // 再次执行该标记的动画
    tl.play("greyAndPink");
  }

3.4.3 Getter / Setter Methods

既可以设置，又可以用来获取值的方法

time()
progress()
duration() // 即使设置新值后，动画的生效值是新值，但是duration()获取的值还是老值
delay()

3.5 this.targets()

在回调函数里面获取当前dom的值，不能使用箭头函数

gsap.to(".green", {x: 100, onUpdate: function() {
  console.log('this.targets()', this.targets())
  let elem = this.targets()[0];
  
  console.log(gsap.getProperty(elem, "x")); // logs all values used for the first element tweened to the console
} });

3.6 MorphSVG

<script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js">script>

将一个svg非常顺滑的转换为另外一个svg，需要单独下载，如果版本对不上，就需要到 https://codepen.io/collection/naMaNQ/ 的例子里面查找对应的引用地址地址

var tl = gsap.timeline({onUpdate:updateSlider, defaults: {duration: 1}}),
    circle = document.getElementById("circle");

tl.to(circle, {morphSVG:"#hippo"}, "+=1")
  .to(circle, {morphSVG:"#star"}, "+=1")
  .to(circle, {morphSVG:"#elephant"}, "+=1")
  .to(circle, {morphSVG:circle}, "+=1");

4. pixi.js

一个canvas动画框架，PixiJS的强项是速度。在2D渲染方面，PixiJS是最快的。

5. Rough.js

Rough.js是一个手绘风格的图形库，提供了一些基本图形的绘制能力