动画

css3 transition

transition-property: 属性
transition-duration: 间隔
transition-timing-function: 曲线
transition-delay: 延迟
常用钩子: transitionend

过渡动画在元素样式有变动的时候生效，配合class添加和删除可以满足基本的动画

<template>
  <div class="box transiton-box"></div>
</template>
<style>
  .transiton-box {
    transition: width 1s ease-in-out 0.5s;
  }
  .transiton-box:hover {
    width: 200px;
  }
</style>

css3 animation / @keyframes

animation-name keyframe 名称
animation-duration 间隔。
animation-timing-function 曲线
animation-delay 延迟。
animation-iteration-count 循环次数。infinite 无数次
animation-direction 方向 normal | reverse | alternate| alternate-reverse
animation-play-state 播放状态 running | paused
animation-fill-mode 结束后的状态 none | forwards | backwords | both
常用钩子: animationstart, animationiteration, animationend

<template>
  <div class="box animation-box"></div>
</template>
<style>
  .animation-box {
    animation: move 1s ease-in-out 0.5s infinite alternate-reverse forwards;
  }
  .animation-box:hover {
    animation-play-state: paused;
  }
  @keyframes move {
    100% {
      width: 50px;
    }
    0% {
      width: 200px;
    }
  }
</style>

Anime.js

优势：

实现了对 CSS3 动画的深度封装；timeline 实现了多个分支动画的管理
动画 callbacks 支持 finished promise
支持 svg
等等
兼容到 IE10

<template>
  <div>
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js" @load="load"></script>
    <div class="box anime-box box2"></div>
    <div class="box anime-box box3"></div>
    <div class="box anime-box box4"></div>
    <div>
      <svg width="100px" height="100px" viewBox="0 0 340 333">
        <path class="path" fill="#FFF" stroke="lightblue" stroke-width="10" :d="path" />
      </svg>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        path:
          'M66.039,133.545c0,0-21-57,18-67s49-4,65,8s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41C46.039,146.545,53.039,128.545,66.039,133.545z'
      }
    },
    methods: {
      load() {
        let anime = window.anime
        var tl = anime.timeline({
          easing: 'easeOutExpo',
          duration: 750,
          loop: true
        })
        // Add children
        tl.add({
          targets: '.anime-box.box2',
          translateX: [
            { value: 250, duration: 1000, delay: 500, elasticity: 0 }, //第一帧
            { value: 0, duration: 1000, delay: 500, elasticity: 0 } //第二帧
          ]
        })
          .add({
            targets: '.anime-box.box3',
            translateX: 250
          })
          .add({
            targets: '.anime-box.box4',
            translateX: 250
          })
        // svg 动画
        anime({
          targets: '.path',
          strokeDashoffset: [anime.setDashoffset, 0],
          easing: 'easeInOutSine',
          duration: 1500,
          delay: function(el, i) {
            return i * 250
          },
          direction: 'alternate',
          loop: true
        })
      }
    }
  }
</script>

GreenSock

强大的平台 GSAP
拥有大量的插件
支持 SVG

<template>
  <div>
    <script src="https://cdn.jsdelivr.net/npm/gsap@2.1.3/umd/TweenMax.min.js" @load="load"></script>
    <div class="box gsap-box box1" ref="box1"></div>
  </div>
</template>
<script>
  export default {
    methods: {
      load() {
        let { TimelineMax, Power2 } = window
        let box1 = this.$refs.box1
        let tl = new TimelineMax({ repeat: -1 })
        tl.to(box1, 3, { x: '250px', ease: Power2.easeInOut })
        tl.to(box1, 3, { x: '0', ease: Power2.easeInOut })
      }
    }
  }
</script>

lottie

配合 AE + bodymovin 把动画交给 UI

PixiJS

交互性强，可以做小游戏的动画库

← WebRTC 正则 →

# 动画

# css3 transition

# css3 animation / @keyframes

# Anime.js

# 优势：

# GreenSock

# lottie

# PixiJS

动画

css3 transition

css3 animation / @keyframes

Anime.js

优势：

GreenSock

lottie

PixiJS