小程序里实现动画动画的方法

　　介绍

这篇文章给大家分享的是有关小程序里实现动画动画的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

微信小程序实现动画动画,具体内容如下

<强> 1。创建动画实例

wx.createAnimation(对象)

创建一个动画实例动画。调用实例的方法来描述动画。最后通过动画实例的出口方法导出动画数据传递给组件的动画属性。
<强>注意:强劲出口方法每次调用后会清掉之前的动画操作

<强>动画队列

调用动画操作方法后要调用一步()来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画.step可以传入一个跟wx.createAnimation()一样的配置参数用于指定当前组动画的配置。通过事件绑定动画即可调用动画执行。

创建的动画实例可以通过调用动画方法进行描述,调用结束后会返回自身,支持链式调用的写法。
在同一个动画实例内部,可以定义多种运动形式,并定义多个动画绑定到不同标签

<强>示例代码:

animation1:, {} 　　animation2: {} 　　联系:function  (), { 　　,let  animation1 =, wx.createAnimation ({ 　　transformOrigin才能:“50%,50%“, 　　,,时间:1000年 　　timingFunction才能:“ease", 　　延迟才能:0 　　,}); 　　,animation1.translateX (-app.globalData.windowWidth  *, 0.7) .step({,时间:1000年,}); 　　,this.setData ({ 　　,,animation1: animation1.export () 　　,}); 　　,let  animation2 =, wx.createAnimation ({ 　　transformOrigin才能:“50%,50%“, 　　,,时间:1000年 　　timingFunction才能:“ease", 　　延迟才能:0 　　,}); 　　,animation2.opacity (0.7) .step({,时间:1000年,}); 　　,this.setData ({ 　　,,animation2: animation2.export () 　　,}); 　　}

<强> 2。调用动画执行

<强> 2.1绑定动画

将所创建的动画实例绑定到相应标签

示例代码

& lt; view 动画=皗{animation1}}“祝辞& lt;/view> 　　& lt; view 动画=皗{animation2}}“祝辞& lt;/view>

<强> 2.2触发动画

通过页面事件调用动画执行

示例代码:

& lt; view  bindtap=皌ouch"祝辞& lt;/view>

感谢各位的阅读!关于“小程序里实现动画动画的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

小程序里实现动画动画的方法