小程序无限循环动画(Animation、缩放)

我主要是实现了一个放大再缩小的无限循环的动画效果,大家有别的要求可以自己添加。
一、HXML

<view class="anima" animation="{{animationData}}"></view>

二、JS

/**
 * 页面的初始数据
 */
data: {
	animationData: {},
},
/**
 * 生命周期函数--监听页面显示
 */
onShow: function () {
	this.animateFn()
},
animateFn(){
	var animation = wx.createAnimation({
		duration: 500,
		timingFunction: 'ease',
	})
	// 建立标识(用于循环)
	this.animation = animation
	var next = true;
	// 无限循环动画
	this.data.timer = setInterval(() => {
		if(next){
			// 要执行的动画
			this.animation.scale(0.9).step()
			// 开关取反 
			next = !next;
		}else{
			// 要执行的动画
			this.animation.scale(1).step()
			// 开关取反
			next = !next;
		}
		// 导出动画
		this.setData({
			animationData: animation.export()
		})
	},500)
},

注:这种实现方法在开发者工具是没有问题的,但是有时候在真机上会出现卡顿的情况。
CSS动画效果:https://blog.csdn.net/Kino_Hs/article/details/112909647

你可能感兴趣的:(微信小程序,animation,前端,小程序)