小程序启动页动画实现

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

小程序加载动画

这个是怎么做的呢?使用的是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()
	
	// 获取设备宽度定位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)
  }
})

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

当然,你也可以扫码把玩一下
在这里插入图片描述

  • 3
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值