小程序启动页动画实现

微信小程序刚被加载时是有自己默认动画的，但是这个千篇一律。我们其实可以做个性化的加载，带来一点不一样的感觉。比如下面的例子：

这个是怎么做的呢？使用的是wx.createAnimation 这个API，具体如下：

wx.createAnimation

首先有大概是下面的页面结构：

<view class="progress_wrapper"><image src="../../static/home/slider.png" class="slider" animation="{{animationData}}">image><u-line-progress :percentage="percent" inactiveColor="rgba(0,0,0,.6)" activeColor="#fff" class="p_bar">u-line-progress><view class="text-box"><text>加载中...{{tweened.toFixed(0)}}%text>br><text>资源正在疯狂加载中，请耐心等待哦text>view>view>

在小程序首页，onLoad方法中添加代码，页面加载时触发。

Page({  data: {    animationData: {},    percent: 0  },  onLoad: function(options) {  // 隐藏tabBar  wx.hideTabBar()// 获取设备宽度定位sliderconst info = wx.getSystemInfo()// 创建动画的方法const animation = wx.createAnimation({      duration: 1000,        timingFunction: 'ease',    })// 按步骤执行动画 1. 让滑块移动到大约40%的位置animation.translate((info.windowWidth-60)*0.4).step()//this.animationData = animation.export()//this.percent = 44this.setData({animationData: animation.export(),percent: 44})// 延时2秒 执行动画2. 让滑块移动到大约100%的位置setTimeout(function() {  animation.translate(info.windowWidth-80).step()  //this.animationData = animation.export()  //this.percent = 100  this.setData({animationData: animation.export(),percent: 100  })}.bind(this), 2000)  }})

这样就赋予了小程序一些游戏的感觉，你学废了吗😄

当然，你也可以扫码把玩一下

来源地址：https://blog.csdn.net/IICOOM/article/details/129145398