使用初探

动画和动画合集通过自定义的动画id执行所有的操作。
动画的操作包括：

• 创建动画
• 开始动画
• 暂停动画
• 恢复动画
• 取消动画
• 翻转动画

注册动画组件

点击查看源码

<es-animation-view
  ref="animation_view"
  class="animation-view-css">
  <!-- 包裹需要执行动画的vue组件-->
  <div class="animation-inner-view-class"/>
</es-animation-view>

创建动画

创建单个动画和动画合集都需要自定义不重复的id，用来后续执行动画的各种操作。

创建动画参数：

点击查看源码

this.$refs.animation_view.objectAnimator2(//创建2个属性值的动画
    "1",                                  //自定义id
    ES_ANIMATION_VALUE_TYPE_FLOAT,        //动画属性值类型
    ES_ANIMATION_PROPERTY_NAME_ALPHA,     //动画属性类型
    "0",                                  //属性值
    "1",                                  //属性值
    1000,                                 //动画执行时间
    -1,                                   //动画重复执行模式
    0,                                    //动画重复执行次数
    false,                                //是否监听动画执行状态变化
    false,                                //是否监听动画执行属性值变化
    {                                     //插值器参数对象
      type: ES_ACCELERATE_INTERPOLATOR,
    }
);

• 创建单个动画

  创建2个参数的动画
  this.$refs.animation_view.objectAnimator2(参数)

  创建3个参数的动画
  this.$refs.animation_view.objectAnimator3(参数)

  创建4个参数的动画
  this.$refs.animation_view.objectAnimator4(参数)

  创建5个参数的动画
  this.$refs.animation_view.objectAnimator5(参数)

以此类推，最多可以创建10个参数的动画。

示例代码

创建id为1的2个参数动画

点击查看源码

this.$refs.animation_view.objectAnimator2(
    "1",//自定义id
    ES_ANIMATION_VALUE_TYPE_FLOAT,
    ES_ANIMATION_PROPERTY_NAME_ALPHA,
    "0",
    "1",
    1000,
    -1,
    0,
    false,
    false,
    null,
);

• 创建动画合集

this.$refs.animation_view.animatorSet(参数)

示例代码

创建id为SequentiallyAnimatorsId的动画合集

点击查看源码

this.$refs.animation_view.animatorSet('SequentiallyAnimatorsId', -1, false);

开始动画

参数为创建的动画的id

点击查看源码

this.$refs.animation_view.startAnimator("1");

延迟开始动画

参数为创建的动画的id

点击查看源码

this.$refs.animation_view.startAnimatorDelay("1", 2000);

暂停动画

参数为创建的动画的id

点击查看源码

this.$refs.animation_view.pauseAnimator("1");

恢复动画

参数为创建的动画的id

点击查看源码

this.$refs.animation_view.resumeAnimator("1");

取消动画

参数为创建的动画的id

点击查看源码

this.$refs.animation_view.cancelAnimator("1");

翻转动画

参数为创建的动画的id

点击查看源码

this.$refs.animation_view.reverseAnimator("1");

重置所有动画

点击查看源码

this.$refs.animation_view.resetAnimators();