小程序使用uni.createAnimation只执行一次的问题

最新推荐文章于 2025-06-11 14:30:19 发布

原创最新推荐文章于 2025-06-11 14:30:19 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

文章介绍了如何在Vue页面中创建一个动态点赞动画，通过临时动画对象的step()方法表示动画完成，并使用export方法导出动画数据，页面卸载时清除数据。

思路：

在页面创建的时候，创建一个临时动画对象
调用 step() 来表示一组动画完成
通过动画实例的export方法导出动画数据传递给组件的animation属性
还原动画
页面卸载的时候，清除动画数据

<template>
	<view class="content">
    <view class="item" v-for="(item,index) in list" :key="item.id">
      <view class="left"> {{item.memo}} </view>
      <view class="right" @click="praiseMe(index)">
        <image src="../../static/praise.png"></image>
        <view class="font11">点赞</view>
        <view :animation="animationDataArr[index]" class="praise-me animation-opacity"> +1 </view>
      </view>
    </view>
	</view>
</template>
 
<script>
export default {
	data() {
		return {
      list:[
        {id:"001",memo:"苹果"},
        {id:"002",memo:"橘子"},
        {id:"003",memo:"草莓"},
        {id:"004",memo:"香蕉"}
      ],
      animationData: {},
      animationDataArr: []
		};
	},
  onLoad() {
    // 1 在页面创建的时候，创建一个临时动画对象
    this.animation = uni.createAnimation();
    this.animationDataArr=Array(this.list.length).fill({});
  },
	onUnload() {
		// 5 页面卸载的时候，清除动画数据
		this.animationData = {};
		this.animationDataArr=Array(this.list.length).fill({});
	},
	methods: {
    // 实现点赞动画效果
   	praiseMe(index) {
   		// 2 调用 step() 来表示一组动画完成
   		this.animation.translateY(-90).opacity(1).step({
   			duration: 400
   		});
   		
   		// 3 通过动画实例的export方法导出动画数据传递给组件的animation属性
   		this.animationData = this.animation;
   		this.animationDataArr[index] = this.animationData.export();
   
   		// 4 还原动画
   		setTimeout(()=> {
   			this.animation.translateY(0).opacity(0).step({
   				duration: 0
   			});
   			this.animationData = this.animation;
   			this.animationDataArr[index] =  this.animationData.export();
   		}, 600)
   	},
  }
};
</script>
 
<style scoped>
.item{
  display: flex;
  align-items: center;
  text-align: center;
  border: 1px pink solid;
  margin-top:20rpx ;
  padding: 20rpx 0;
}
.item image{
  width: 80rpx;
  height: 80rpx;
  z-index: 10;
}
.item .left{
  flex: 1;
}
.item .right{
  width: 300rpx;
  border-left: 1px pink dashed;
  padding-top: 50rpx;
}
 
.praise-me {
	font-size: 14px;
	color: #feab2a;
}
 
.animation-opacity {
	font-weight: bold;
	opacity: 0;
}
</style>