动画

    动画过程中,可以使用 bindanimationstart bindanimationend 来监听动画事件。

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

    同时,还可以使用 wx.createAnimation 接口来动态创建简易的动画效果。(新版小程序基础库中推荐使用下述的关键帧动画接口代替。)

    关键帧动画

    从小程序基础库 开始支持一种更友好的动画创建方式,用于代替旧的 wx.createAnimation 。它具有更好的性能和更可控的接口。

    参数说明

    keyframes 中对象的结构

    调用 animate API 后会在节点上新增一些样式属性覆盖掉原有的对应样式。如果需要清除这些样式,可在该节点上的动画全部执行完毕后使用 this.clearAnimation 清除这些属性。

    参数说明

    滚动驱动的动画

    我们发现,根据滚动位置而不断改变动画的进度是一种比较常见的场景,这类动画可以让人感觉到界面交互很连贯自然,体验更好。因此,从小程序基础库 2.9.0 开始支持一种由滚动驱动的动画机制。

    ScrollTimeline 中对象的结构

    高级的动画方式

    在一些复杂场景下,上述的动画方法可能并不适用。

    WXS 响应事件 的方式可以通过使用 WXS 来响应事件的方法来动态调整节点的 style 属性。通过不断改变 style 属性的值可以做到动画效果。同时,这种方式也可以根据用户的触摸事件来动态地生成动画。

    连续使用 setData 来改变界面的方法也可以达到动画的效果。这样可以任意地改变界面,但通常会产生较大的延迟或卡顿,甚至导致小程序僵死。此时可以通过将页面的 setData 改为 中的 setData 来提升性能。下面的例子是使用 setData 来实现秒表动画的示例。

    在开发者工具中预览效果