微信小程序动画解析以及transitionend重复 animationiteration animationend失效问题解析

github项目代码

github项目代码
https://github.com/MrITzhongzi/small_routine_components/tree/master/5.danmu_component

transitionend重复问题

首先你要知道，bindtransitionend监听的是小程序的过渡属性，就是正在变化的属性，每有一个属性过渡完成，就会触发一次。

• 例如： 一下这个会触发两次， 因为有 translateY和opacity两个属性在渐渐变化。

var animation = wx.createAnimation({
        delay: 0,
        duration: 600,
        timingFunction: "ease"
      });
      animation.translateY(-90).opacity(0.4).step();
      this.setData({
        animationData: animation.export()
      });

• 再比如 一下这个会触发一次，因为只有一个属性translateY在渐渐变化。

var animation = wx.createAnimation({
        delay: 0,
        duration: 600,
        timingFunction: "ease"
      });
      animation.translateY(-90).step();
      this.setData({
        animationData: animation.export()
      });

animationiteration animationend失效问题解析

大家都觉得这是微信的一个bug，其实不是， 他们监听的是 css3 使用@keyframes定义的动画的执行结束事件和动画循环事件
所以，当用 animationiteration animationend去监听小程序代码众定义的过渡效果时不会生效。

• 例如： 一下是有效的 会不断的触发 animationiteration animationend

<view class="danmu-box">

  <view class="danmu-item"
       
        bindanimationiteration="animationiteration"
        bindanimationend="animationend">
    <view class="danmu-image">
      <image src="http://img.hapem.cn/test_product.png" mode="widthFix"></image>
    </view>
    <view class="danmu-name">李*刚刚下单了，</view>
    <view class="danmu-time">10分钟前</view>
  </view>

</view>

核心css代码

.danmu-item {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  height: 30px;
  border-radius: 15px;
  
  animation: myanimation 1s 1s infinite forwards;
}

@keyframes myanimation{
  from {
    transform: translateY(0px);
    opacity: 1;
  }

  to {
    transform: translateY(-90px);
    opacity: 0.4;
  }
}

• 再比如以下是无效的,只会触发transitionend, 而animationiteration animationend不能触发。

<view class="danmu-box">

  <view class="danmu-item"
        animation="{{animationData}}"
        bindtransitionend='transitionend'
        bindanimationiteration="animationiteration"
        bindanimationend="animationend">
    <view class="danmu-image">
      <image src="http://img.hapem.cn/test_product.png" mode="widthFix"></image>
    </view>
    <view class="danmu-name">李*刚刚下单了，</view>
    <view class="danmu-time">10分钟前</view>
  </view>

</view>

.danmu-item {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  height: 30px;
  border-radius: 15px;
  /* animation: myanimation 1s 1s infinite forwards; */
}

 animationController() {
      console.log("start animation")
      var animation = wx.createAnimation({
        delay: 0,
        duration: 600,
        timingFunction: "ease"
      });
      animation.translateY(-90).step();
      this.setData({
        animationData: animation.export()
      });
    },
    transitionend() {
      console.log("transitionend");
    },

    animationiteration() {
      console.log("animationiteration");
    },

    animationend() {
      console.log("animationend");
    }
  }

小程序动画案例

1. 使用小程序提供的api做过渡动画

• html

<view class="danmu-box">

  <view class="danmu-item"
        animation="{{animationData}}"
        bindtransitionend='transitionend'
        bindanimationiteration="animationiteration"
        bindanimationend="animationend">
    <view class="danmu-image">
      <image src="http://img.hapem.cn/test_product.png" mode="widthFix"></image>
    </view>
    <view class="danmu-name">李*刚刚下单了，</view>
    <view class="danmu-time">10分钟前</view>
  </view>

</view>

• css

.danmu-box {
  width: 180px;
  height: 120px;
  border: 1px solid red;
  display: flex;
  flex-direction: column-reverse;
}

.danmu-item {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  height: 30px;
  border-radius: 15px;
  /* animation: myanimation 1s 1s infinite forwards; */
}

.danmu-image {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
}

.danmu-image image {
  width: 100%;
}

.danmu-name {
  /* flex-grow: 1; */
  font-size: 12px;
  margin-left: 6px;
  color: white;
}

.danmu-time {
  font-size: 12px;
  color: white;
}

@keyframes myanimation{
  from {
    transform: translateY(0px);
    opacity: 1;
  }

  to {
    transform: translateY(-90px);
    opacity: 0.4;
  }
}

• javascript

	animationController() {
      console.log("start animation")
      var animation = wx.createAnimation({
        delay: 0,
        duration: 600,
        timingFunction: "ease"
      });
      animation.translateY(-90).step();
      this.setData({
        animationData: animation.export()
      });
    },
    transitionend() {
      console.log("transitionend");
    },

    animationiteration() {
      console.log("animationiteration");
    },

    animationend() {
      console.log("animationend");
    }

• 效果
  向上平移90px，并逐渐变淡
  

2. 使用css3动画做

• html

<view class="danmu-box">

  <view class="danmu-item"
        
        bindtransitionend='transitionend'
        bindanimationiteration="animationiteration"
        bindanimationend="animationend">
    <view class="danmu-image">
      <image src="http://img.hapem.cn/test_product.png" mode="widthFix"></image>
    </view>
    <view class="danmu-name">李*刚刚下单了，</view>
    <view class="danmu-time">10分钟前</view>
  </view>

</view>

• css

.danmu-box {
  width: 180px;
  height: 120px;
  border: 1px solid red;
  display: flex;
  flex-direction: column-reverse;
}

.danmu-item {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  height: 30px;
  border-radius: 15px;
  animation: myanimation 1s 1s infinite forwards;
}

.danmu-image {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
}

.danmu-image image {
  width: 100%;
}

.danmu-name {
  /* flex-grow: 1; */
  font-size: 12px;
  margin-left: 6px;
  color: white;
}

.danmu-time {
  font-size: 12px;
  color: white;
}

@keyframes myanimation{
  from {
    transform: translateY(0px);
    opacity: 1;
  }

  to {
    transform: translateY(-90px);
    opacity: 0.4;
  }
}

• js

  animationiteration() {
      console.log("animationiteration");
    },

    animationend() {
      console.log("animationend");
    }

• 效果

向上平移90px，并逐渐变淡 循环往复执行无数次

工具效果展示