微信小程序动画其实很简单

最新推荐文章于 2021-01-27 14:44:23 发布

J1ong

最新推荐文章于 2021-01-27 14:44:23 发布

阅读量485

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_41382187/article/details/92793467

版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用wx.createAnimation接口创建动画效果。首先，通过创建动画实例并设置参数；接着，调用动画实例的方法如旋转，并利用step进行链式调用；最后，通过export方法将动画数据应用到组件的animation属性实现动画展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在小程序中，通常可以使用CSS渐变和CSS动画来创建简易的界面动画。同时，还可以使用 wx.createAnimation 接口来动态创建简易的动画效果。

这里我们主要介绍一下使用微信wx.createAnimation 接口来创建动画效果。

1.创建动画实例

//js文件
this.animation = wx.createAnimation({
      duration:3000,
      timingFunction:'ease',
      delay:1000,
      transformOrigin: '50% 50% 0'
    })

官方参数说明：

timmingFunction取值：

2.调用创建好的动画实例的方法来描述动画

这里以旋转为例，调用动画实例的旋转的方法，step方法表示一组动画的完成。因为动画实例的方法的返回值是当前的动画对象，动画实例方法可以进行链式调用下去。想要了解更多动画实例的方法，点击这里

//js文件
this.animation.rotate(Math.random() * 720 - 360).step();

3.通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性

//js文件
this.setData({animation: this.animation.export()});

//wxml文件
<view class="animation-element" animation="{{animation}}"></view>

这里的实例用的是官方实例，详细代码内容请看这里

效果：