小程序启动页动画实现

2023-02-21 约 472 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=129145398

小程序启动页动画实现

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

小程序加载动画

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

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

<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()
	
	// 获取设备宽度定位slider
	const 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 = 44
	this.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)
  }
})

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

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

目录

小程序启动页动画实现

小程序启动页动画实现