小程序使用uni.createAnimation只执行一次的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序使用uni.createAnimation只执行一次的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

思路：

在页面创建的时候，创建一个临时动画对象
调用 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>

文章来源地址https://www.toymoban.com/news/detail-725420.html

到了这里，关于小程序使用uni.createAnimation只执行一次的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！