DMOZ中文网站分类目录-免费收录各类优秀网站的中文网站目录.
  • DmozDir.org
DMOZ目录快速登录入口-免费收录各类优秀网站的中文网站目录.由人工编辑,并提供网站分类目录检索及地区分类目录检索,是站长免费推广网站的有力平台!

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

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

  • 已被浏览: 30 次2020年09月17日    来源:  https://www.dmozdir.org/
  • github项目代码 github项目代码 https://github.com/MrITzhongzi/small_routine_components/tree/master/5.danmu_component transition
    github项目代码

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

    transitionend重复问题

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

    • 例如: 一下这个会触发两次, 因为有 translateYopacity两个属性在渐渐变化。
    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,并逐渐变淡
    1. 使用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,并逐渐变淡 循环往复执行无数次

    工具效果展示


    以上信息来源于网络,如有侵权,请联系站长删除。

    TAG:程序 动画 微信小

  • 上一篇:新功能又来啦!这次是「代码搜索」和视频直播!
  • 与“微信小程序动画解析以及transitionend重复 animationiteration animationend失效问题解析”相关的资讯
  • C#/WPF 使用的Task线程程序缺依旧响应缓慢问题
  • 程序异常处理,模块封装和程序集
  • Python实现爬虫程序,付费歌曲一样可以免费下载~
  • STM32简单程序编译及Proteus程序设计与仿真
  • 从零开始,开发一个电商微信小程序[前端+后端(c#)]