animation

动画实例

animation.export()

导出动画队列

animation.step(object Object)

表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画

animation.rotate(number | number angle)

从原点顺时针旋转一个角度

animation.rotateX(number | number angle)

从 X 轴顺时针旋转一个角度

animation.rotateY(number | number angle)

从 Y 轴顺时针旋转一个角度

animation.rotateZ(number | number angle)

从 Z 轴顺时针旋转一个角度

animation.scale(number sx, number sy)

缩放

animation.scaleX(number scale)

缩放 X 轴

animation.scaleY(number scale)

缩放 Y 轴

animation.translate(number, number)

平移变换

animation.translateX(number)

对 X 轴平移

animation.translateY(number)

对 Y 轴平移

animation.opacity(number)

设置透明度

animation.backgroundColor(string value)

设置背景色 （目前只支持16进制）

animation.width(number)

设置宽度

animation.height(number)

设置高度

示例

<template>
  <view>
    <view class="block" c-animation="{{animationData}}" c-bind:click="handleClick">
      <text>请点击我</text>
    </view>
  </view>
</template>
<script>
  import { createAnimation } from "chameleon-api";
  const animation = createAnimation();
  class Index {
    data = {
      animationData: null,
    }
    methods = {
      handleClick() {
        this.animationData = animation
          .translateX(200).step({duration: 1000})
          .translateY(200).step({duration: 1000})
          .width(100).step({duration: 1000})
          .height(100).step({duration: 1000})
          .backgroundColor('#000000').step({duration: 1000})
          .opacity(0.1).step({duration: 1000})
          .export();
      }
    }
  }
  export default new Index();
</script>
<style scoped>
.block {
  position: absolute;
  width: 200cpx;
  height: 200cpx;
  background-color: #E3EDCD;
}
</style>
<script cml-type="json">
{
    "base": {
        "usingComponents": {}
    }    
}
</script>

wx

web

native

查看完整示例