微信小程序动画动画的实现

本文主要详细介绍了利用微信小程序制作动画的方法，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

1.创建动画实例

wx.createAnimation(对象)

创建动画实例动画。调用实例的方法来描述动画。最后，动画数据由动画实例的导出方法导出，并传递给组件的animation属性。注意:export方法会在每次调用后清除之前的动画操作。

动画队列

调用动画操作方法后，要调用step()来表示一组动画的完成。您可以在一组动画中调用任意数量的动画方法。一组动画中的所有动画会同时开始，一组动画完成后才会执行下一组动画。Step可以传入像wx.createAnimation()这样的配置参数来指定当前动画组的配置。事件绑定动画可以调用动画执行。

创建的动画实例可以通过调用animation方法来描述，调用后会返回自身，支持链式调用的编写。在同一个动画实例中，可以定义多个运动形式，并且可以将多个动画绑定到不同的标签。

示例代码:

animation 1:{ } animation 2:{ } touch:function(){ let animation 1 = wx . create animation({ transform origin:& quot；50% 50% & quot；，时长:1000，timing function:& quot；轻松& quot，延迟:0 })；animation 1 . translate x(-app . global data . window width * 0.7)。步({持续时间:1000 })；this . setdata({ animation 1:animation 1 . export()})；let animation 2 = wx . create animation({ transform origin:& quot；50% 50% & quot；，时长:1000，timing function:& quot；轻松& quot，延迟:0 })；动画2 .不透明度(0.7)。步({持续时间:1000 })；this . setdata({ animation 2:animation 2 . export()})；}2.调用动画执行

2.1绑定动画

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

示例代码

& lt查看动画= & quot{ { animation1 } } & quot& gt& lt/view & gt；& lt查看动画= & quot{ { animation2 } } & quot& gt& lt/view & gt；2.2触发动画

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

示例代码:

& lt视图bindtap = & quot触摸& quot& gt& lt/view & gt；相关建议:

css中动画的使用教程

利用CSS3的动画属性实现旋转木马效果的方法详解

巧用css3动画特效插件的方法介绍