小程序动画创建及动画结束的监听事件

小程序动画创建

绑定动画数据

<view class="img-box" animation='{{animationData}}' bindtransitionend='animationend' bindtap='move'><image src="{{AppImg.total_bg}}"></image></view>

设置动画

data(){animationData: ''
}move(){//创建动画var animation = wx.createAnimation({duration: 400,})//描述动画步骤animation.top(-500).scale(0.8).step()//导出动画数据传递给组件的animation属性,否则动画不会执行this.setData({animationData:animation.export()})}

监听动画事件（开始，结束）

动画执行过程中使用 bindtransitionend bindanimationstart bindanimationiteration bindanimationend 来监听动画事件

bindtransitionend：监听CSS 渐变结束或 wx.createAnimation 结束一个阶段

注意：bindtransitionend监听的是wx.createAnimation 结束一个阶段而不是整个动画的结束（也就是一个step()结束）

bindanimationstart：监听CSS 动画开始

bindanimationiteration：CSS 动画结束一个阶段

bindanimationend：CSS 动画结束

注意：bindanimationstart bindanimationiteration bindanimationend无法监听到wx.createAnimation创建的动画

注：这几个事件都不是冒泡事件，需要绑定在真正发生了动画的节点上才会生效。

例：

//监听动画的事件需要和绑定动画的节点在一起
<view class="img-box" animation='{{animationData}}' bindtransitionend='animationend' ><image src="{{AppImg.total_bg}}"></image></view>

js部分

animationend(){console.log('动画结束了')}

小程序动画创建及动画结束的监听事件相关推荐

微信小程序批量获取input的输入值，监听输入框，数据同步
微信小程序批量获取input的输入值,监听输入框,数据同步在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事 ...
百度地图创建多个marker和监听事件
先说说我的问题吧.我的需求是,在地图上自动创建n个标记,每个点有对应的ID,Lon,Lat,当点击指定标记弹出对应标记的信息,监听事件是一样的,但弹出来的信息要根据对应的标记来显示. 一开始我是这样写 ...
钱币掉落动画android,mpvue实现小程序签到金币掉落动画(api实现)
这里使用小程序自带的api来实现,用小程序来写动画的恶心点在于,没有帧,只能用setimeout 来作为帧来使用, 下面是实现代码, 下面是简单用div代替了图片,需要什么图片,可以自行替换相应的di ...
微信小程序滑动屏幕控制动画隐藏和显示
思路一,使用scroll-view组件的事件,缺点:动画不够流畅思路二,微信小程序自带的pagescroll事件,缺点:监听不方便,层级较高思路三,给页面最外层添加触摸事件思路四,小程序自带的触 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
java小程序：控制台字符动画
java小程序:控制台字符动画说在前面程序效果代码呈现说在前面大一软件工程在读,java萌新一只,第一次写博客,技术很菜勿喷.如有错误欢迎指出! 这个小程序是给朋友的生日礼物,耗时半天,实际 ...
微信门店小程序怎样创建门店小程序创建方法简介
微信门店小程序怎样创建门店小程序创建方法简介微信门店小程序是什么东西?门店小程序要怎样创建?还不清楚微信门店小程序详情的小伙伴们抓紧时间跟上小编一起来看一下吧! 门店小程序是什么? 微信发 ...
微信小程序怎么新建php文件,微信小程序中创建小程序页面的步骤介绍（图文）...
本篇文章给大家带来的内容是关于微信小程序之创建小程序页面的步骤介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 创建一个简单的页面,创建小程序页面的具体几个步骤: 1. 在page ...
html5监听动画结束,css3动画是否结束监听事件
css3动画是否结束监听事件: var domObj = $("#id"); domObj [0].addEventListener("webkitAnimationEn ...

小程序动画创建及动画结束的监听事件

小程序动画创建

监听动画事件（开始，结束）

注：这几个事件都不是冒泡事件，需要绑定在真正发生了动画的节点上才会生效。

小程序动画创建及动画结束的监听事件相关推荐

最新文章

热门文章