CSS动画｜JavaScript动画｜小程序动画

资源推荐：CSS动画的12个原则 Animation Principles for the Web

（1）CSS3 animation 动画

<div class="box"></div>

// 定义动画的关键帧
@keyframes xhf {
  from {
    transform:scale(0.5, 0.5);
    opacity:0.5;
  }
  to {
    transform:scale(1, 1);
    opacity:1;
  }
}

.box {
    animation: xhf 2s 1;    // 动画执行2秒、执行1次
}

参考：CSS animation

（2）CSS3 transition 动画

<div class="box"></div>

.box {
    width: 100px;
    height: 100px;
    background: red;
    /* 要执行过渡动画的属性列表 */
    transition-property: width, background;
    /* 过渡持续时间 */
    transition-duration: 2s;
    /* 动画时间函数 */
    transition-timing-function: ease-in;
}
.box:hover {
    width: 500px;
    background: green;
}

参考：CSS transition

（3）JavaScript 动画

<div id='box' class="box"></div>

.box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: red;
}

var oBox = document.getElementById('box');
var start = null;
function step(timestamp) {
    if (!start) start = timestamp;
    var left = timestamp - start;
    oBox.style.left = left + 'px';
    if (left < 1000) {
        window.requestAnimationFrame(step);
    }
}
window.requestAnimationFrame(step);

参考：window​.request​Animation​Frame

（4）小程序 Animation 动画

<template>
  <view class="page">
    <view class="box" animation="{{animationData}}"></view>
    <view class="btns">
      <view @tap="animateExecute(1)">动画一</view>
      <view @tap="animateExecute(2)">动画二</view>
      <view @tap="animateExecute(3)">动画三</view>
    </view>    
  </view>  
</template>

<style lang="less">
.page {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  .box {
    background:red;
    height:100rpx;
    width:100rpx;
  }
  .btns {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    &>view {
      line-height: 100rpx;
      border: 1rpx solid #999999;
      text-align: center;
      margin: 20rpx 0;
    }
  }
}
</style>

<script>
import wepy from 'wepy'

export default class Test extends wepy.page {
  data = {
    animationData: {}   // 动画容器
  }
  onShow() {
    this.animation = wx.createAnimation({
      duration: 2000,
      timingFunction: 'ease'
    })

    this.animation.scale(2, 2).rotate(45).translate(100).step()
    // 配置好动画参数后，用 export() 方法导出动画队列
    this.animationData = this.animation.export()

    // 初始化动画
    setTimeout(() => {
      this.animation.translate(200).step()
      this.animationData = this.animation.export()
    }, 1000)
  }

  methods = {
    animateExecute(type) {
      switch (type) {
        case '1':
          this.rotateAndScale()  // 第一个动画
          break
        case '2':
          this.rotateThenScale()  // 第二个动画
          break
        case '3':
          this.rotateAndScaleThenTranslate()  // 第三个动画
          break
        default:
          break
      }
    }
  }

  rotateAndScale() {
    // 旋转同时放大
    this.animation.translate(80, 80).scale(1, 1).step()
    this.animationData = this.animation.export()
  }

  rotateThenScale() {
    // 先旋转后放大
    this.animation.rotate(20).step()
    this.animation.scale(3, 3).step()
    this.animationData = this.animation.export()
  }

  rotateAndScaleThenTranslate() {
    // 先旋转同时放大，然后平移
    this.animation.rotate(-25).scale(2, 2).step()
    this.animation.translate(50, 50).step({duration: 1000})
    this.animationData = this.animation.export()
  }
}
</script>

参考：小程序 Animation 动画

---

END 2019-05-25