小程序使用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>
相关推荐
帅次1 小时前
Flutter setState() 状态管理详细使用指南
android·flutter·ios·小程序·kotlin·android studio·iphone
浩宇软件开发2 小时前
基于微信小程序的天气预报app
微信小程序·小程序·天气app
说私域4 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的项目投资保障研究
人工智能·小程序·开源·零售
程序员小刘4 小时前
基于鸿蒙 HarmonyOS 5 打车小程序案例
华为·小程序·harmonyos
顽强d石头4 小时前
【uniapp】小程序中input输入框的placeholder-class不生效
前端·小程序·uni-app
低代码布道师4 小时前
零基础实战:云开发家政维修小程序搭建指南
低代码·小程序·云开发
fakaifa4 小时前
仓库物资出入库管理系统源码+uniapp小程序
小程序·uni-app·开源·php·源码下载·仓库物资出入库·出入库系统源码
说私域5 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的新零售融合路径研究
人工智能·小程序·开源·零售
ywyy679817 小时前
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
人工智能·小程序·短剧·推客系统·推客小程序·推客系统开发·推客小程序开发
华子w90892585920 小时前
基于“SpringBoot+uniapp的考研书库微信小程序设计与实现7000字论文
微信小程序·小程序·uni-app