组件方法

• this.$element('id').animate(Object, Object)

当组件通过id属性标识后，可以使用该id获取组件对象并调用相关组件方法。

this.$element('id').animate(Object, Object)

通过animate(keyframes, options)方法获得animation对象。该对象支持动画属性，动画方法和动画事件。重复多次调用animate方法时，采用replace策略，最后一次调用时传入的参数生效。

• keyframes

  参数	类型	说明
  frames	Array<Style>	用于设置动画样式属性的对象列表。Style类型说明请见表1 Style类型说明。

  表 1 Style类型说明

  参数	类型	默认值	说明
  width	number	-	动画执行过程中设置到组件上的宽度值。
  height	number	-	动画执行过程中设置到组件上的高度值。
  backgroundColor	<color>	none	动画执行过程中设置到组件上的背景颜色。
  opacity	number	1	设置到组件上的透明度（介于0到1之间）。
  backgroundPosition	string	-	格式为"x y"，单位为百分号或者px。 第一个值是水平位置，第二个值是垂直位置。 如果仅规定了一个值，另一个值为 50%。
  transformOrigin	string	'center center'	变换对象的中心点。 第一个参数表示x轴的值，可以设置为left、center、right、长度值或百分比值。 第二个参数表示y轴的值，可以设置为top、center、bottom、长度值或百分比值。
  transform	Transform	-	设置到变换对象上的类型。
  offset	number	-	offset值（如果提供）必须在0.0到1.0（含）之间，并以升序排列。 若只有两帧，可以不填offset。 若超过两帧，offset必填。

• options

  参数	类型	默认值	说明
  duration	number	0	指定当前动画的运行时长（单位毫秒）。
  easing	string	linear	描述动画的时间曲线，支持类型见表3 easing有效值说明。
  delay	number	0	设置动画执行的延迟时间（默认值表示无延迟）。
  iterations	number | string	1	设置动画执行的次数。number表示固定次数，Infinity枚举表示无限次数播放。
  fill	string	none	指定动画开始和结束的状态： none：在动画执行之前和之后都不会应用任何样式到目标上。 forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。

  表 2 easing有效值说明

  值	描述
  linear	动画线性变化。
  ease-in	动画速度先慢后快，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
  ease-out	动画速度先快后慢，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
  ease-in-out	动画先加速后减速，cubic-bezier(0.42, 0.0, 0.58, 1.0)。
  friction	阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。
  extreme-deceleration	急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
  sharp	锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
  rhythm	节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
  smooth	平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
  cubic-bezier(x1, y1, x2, y2)	在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。
  steps(number, step-position)	Step曲线。 number必须设置，支持的类型为int。 step-position参数可选，支持设置start或end，默认值为end。

• 返回值

  animation对象支持的属性：

  属性	类型	说明
  finished	boolean	只读，用于表示当前动画是否已播放完成。
  pending	boolean	只读，用于表示当前动画是否处于等待其他异步操作完成的等待状态（例如启动一个延时播放的动画）。
  playState	string	可读可写，动画的执行状态： idle：未执行状态，包括已结束或未开始。 running：动画正在运行。 paused：动画暂停。 finished：动画播放完成。
  startTime	number	可读可写，动画播放开始的预定时间，用途类似于options参数中的delay。

  animation对象支持的方法：

  方法	参数	说明
  play	-	组件播放动画。
  finish	-	组件完成动画。
  pause	-	组件暂停动画。
  cancel	-	组件取消动画。
  reverse	-	组件倒播动画。

  animation对象支持的事件：

  事件	说明
  cancel	动画被强制取消。
  finish	动画播放完成。
  repeat	动画重播事件。

• 示例代码：

  // xxx.js
  import prompt from '@system.prompt';
  export default {
    data : {
      animation:'',
    },
    onInit() {
    },
    onShow() {
      var options = {
        duration: 1500,
        easing: 'friction',
        delay: 500,
        fill: 'forwards',
        iterations: 2,
      };
      var frames = [
        {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0},
        {transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0}
      ];
      this.animation = this.$element('idName').animate(frames, options);
      // handle finish event
      this.animation.onfinish = function() {
        prompt.showToast({
          message: "The animation is finished."
        });
      };
      // handle cancel event
      this.animation.oncancel = function() {
        prompt.showToast({
          message: "The animation is canceled."
        });
      };
      // handle repeat event
      this.animation.onrepeat = function() {
        prompt.showToast({
          message: "The animation is repeated."
        });
      };
    },
    start() {
      this.animation.play();
    },
    cancel() {
      this.animation.cancel();
    }
  }