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

思路:
  1. 在页面创建的时候,创建一个临时动画对象
  2. 调用 step() 来表示一组动画完成
  3. 通过动画实例的export方法导出动画数据传递给组件的animation属性
  4. 还原动画
  5. 页面卸载的时候,清除动画数据
javascript 复制代码
<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>
相关推荐
Byte_Me9 小时前
IoT 小程序:如何破解设备互联的碎片化困局?
物联网·小程序·iot
2501_915921431 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview
说私域1 天前
基于定制开发开源AI智能名片与S2B2C商城小程序的旅游日志创新应用研究
人工智能·小程序·旅游
脑袋大大的1 天前
钉钉小程序开发环境配置与前端开发指南
小程序·钉钉·企业应用开发
2301_805962931 天前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero1 天前
微信小程序121~130
微信小程序·小程序
難釋懷1 天前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++
清颖~1 天前
原生微信小程序研发,如何对图片进行统一管理?
微信小程序·小程序
默魔2 天前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
阿俊-全栈开发2 天前
crmeb多门店对接拉卡拉支付小程序聚合收银台集成全流程详解
小程序·php·拉卡拉聚合收银台·拉卡拉三方支付