组件动画 1080+

Element.animate()

这是一个创建新 Animation 的便捷方法，将它应用于元素，会返回一个新建的 Animation 对象实例；调用其 play 方法，即可执行动画，表现为一系列简单的变换 （位置、大小、旋转角度、背景颜色和不透明度）。

语法

const element = this.$element('elementIdName')
const animation = element.animate(keyframes, options)
animation.play()

参数

keyframes 关键帧

代表关键帧的一个数组集合。目前支持的属性有：

如上 transform 参数说明如下：

const keyframes = [
  {
    transform: '{scaleX:1, scaleY:1}',
    time: 0
  },
  {
    transform: '{scaleX:2, scaleY:2}',
    time: 100
  }
]

options 可选项

实例属性

如上 playState 具有如下几种状态：

• idle：动画当前的时间是无法解析的，并且队列里没有处于等待执行的任务；
• running：动画处于正在运行状态；
• paused：动画暂停；
• finished：动画已经达到某一临界点。

实例方法

实例事件

示例 Demo

<template>
  <div class="page-wrapper">
    <input type="button" class="button" onclick="onCallAnimationClick" value="Animation 动画" />
    <text id="animation">{{ mTextState }}</text>
  </div>
</template>

<script>
let $animation = null
export default {
  private: {
    mTextState: 'Init'
  },

  onCallAnimationClick() {
    const keyframes = [
      {
        transform: {
          translateX: 0,
          translateY: 0
        },
        time: 0
      },
      {
        transform: {
          translateX: '100px',
          translateY: '100px'
        },
        time: 100
      }
    ]
    const options = {
      duration: 1000,
      easing: 'linear',
      delay: 0,
      fill: 'none',
      iterations: 5
    }
    const cAnimationNode = this.$element('animation')
    $animation = cAnimationNode.animate(keyframes, options)
    // 将会延迟至 (delay + startTime) ms 后执行动画；
    $animation.startTime = 1000

    $animation.play()
    this.mTextState = $animation.playState

    $animation.oncancel = () => {
      this.mTextState = $animation.playState
    }
    $animation.onfinish = () => {
      this.mTextState = $animation.playState
    }
  }
}
</script>

<style>
.page-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.button {
  color: #20a0ff;
  background-color: #ffffff;
  padding: 10px 20px;
  border: 1px solid #20a0ff;
  border-radius: 40px;
}
</style>