微信小程序动画解析以及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");}}

小程序动画案例

使用小程序提供的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>

.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，并逐渐变淡

使用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>

.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;}
}

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

效果

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

工具效果展示

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

微信小程序动画渐入以及动态存值setdata问题
微信小程序动画渐入以及动态存值setdata问题想要在微信小程序中制作多个元素逐一渐入的效果,效果类似下图: 首先参考微信开发文档API动画部分的内容开发文档API–动画Animation 创建动 ...
微信小程序--动画animation
微信小程序--动画animation 一. 获取需要实现动画效果的元素 1. 微信小程序获取元素节点: 2. 合适的生命周期调用二.动画 1. 创建动画 2. 监听动画 3. 动画循环播放一. 获 ...
微信小程序动画之圆形进度条
微信小程序动画之圆形进度条上图: 代码: js: //获取应用实例 var app = getApp()var interval; var varName; var ctx = wx.createC ...
微信小程序：王者荣耀改重复名,空白名最低战力查询助手
这是一款由重复名,空白名.和各区战力查询组合的一款微信小程序源码! 重复名支持一键生成几十个,就再也不怕都被别人用过了! 空白名支持多种空白名,王者荣耀空白名,贵族居中空白名,QQ微信专属空白名战力 ...
微信小程序动画(七)：让页面动起来
本文默认读者已具备小程序基本动画api,如不了解可先阅读相关的详细介绍文章: 微信小程序动画(一):样式微信小程序动画(二):旋转微信小程序动画(三):缩放微信小程序动画(四):平移微信小程序 ...
微信小程序动画执行一次问题
微信小程序动画执行一次解决方法简单总结一下微信动画的实现及执行步骤(更新data使用的方式和vue一样直接this.data=""). const anim = wx.creat ...
微信小程序动画效果,小程序animation动画
微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo <!--wxml代码-- ...
长期稳定短视频去水印微信小程序源码下载自带稳定接口支持图集解析去水印
大家好这一款小程序源码是一款去水印小程序源码该源码里面自带了稳定接口(目前该接口已稳定运行三个月) 支持多种短视频平台去水印,另外也支持图集去水印保存已经去好水印的作品的时候可以根据是短视频还是图 ...
mpvue微信小程序动画_mpvue 与微信小程序的火花
介绍项目介绍 WeScale 定位为音乐训练小程序,初期规划了基础音阶的三个训练,以及他们的镜像模式. 数字简谱字母简谱数字简谱对字母简谱后期看情况更新追加其他训练. 产品展示扫描下方小程序 ...

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

github项目代码

transitionend重复问题

animationiteration animationend失效问题解析

小程序动画案例

工具效果展示

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

最新文章

热门文章