动画监听

监听动画执行状态

第1步：创建动画的时候需要设置是否监听动画状态变化

点击查看源码

this.$refs.animation_view.objectAnimator2(
    "1",//自定义id
    ES_ANIMATION_VALUE_TYPE_FLOAT,
    ES_ANIMATION_PROPERTY_NAME_ALPHA,
    "0",
    "1",
    1000,
    -1,
    0,
    true,//监听动画执行状态
    false,
    null,
);

第2步： <es-animation-view>标签上监听动画执行状态

点击查看源码

<es-animation-view
    ref="animation_view"
    class="animation-view-css"
    @onAnimationCancel="onAnimationCancel"
    @onAnimationEnd="onAnimationEnd"
    @onAnimationStart="onAnimationStart"
    @onAnimationRepeat="onAnimationRepeat"
    @onAnimationPause="onAnimationPause"
    @onAnimationResume="onAnimationResume">
    <div class="animation-inner-view-css"/>
    
export default {
  methods: {
    onAnimationCancel(id) {
    },
    onAnimationEnd(id, isReverse) {
    },
    onAnimationRepeat(id) {
    },
    onAnimationStart(id, isReverse) {
    },
    onAnimationPause(id) {
    },
    onAnimationResume(id) {
    },
  }
};
</es-animation-view>

onAnimationStart：动画开始
onAnimationEnd：动画结束
onAnimationCancel：动画取消
onAnimationRepeat：动画重复执行
onAnimationPause：动画暂停
onAnimationResume：动画恢复

监听动画属性值变化

第1步： 创建动画的时候需要设置是否监听动画属性值变化

点击查看源码

this.$refs.animation_view.objectAnimator2(
    "1",//自定义id
    ES_ANIMATION_VALUE_TYPE_FLOAT,
    ES_ANIMATION_PROPERTY_NAME_ALPHA,
    "0",
    "1",
    1000,
    -1,
    0,
    false,
    true,//监听动画属性值变化
    null,
);

第2步： <es-animation-view>标签上监听动画属性值变化

点击查看源码

<es-animation-view
    ref="animation_view"
    class="animation-view-css"
    @onAnimationUpdate="onAnimationUpdate">
    <div class="animation-inner-view-css"/>
</es-animation-view>

export default {
  methods: {
    onAnimationUpdate(id, value) {
    },
  }
};

onAnimationUpdate(id, value)：id为动画的id，value为动画当前时刻的属性值