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

news2024/11/19 8:38:21

思路:
  1. 在页面创建的时候,创建一个临时动画对象
  2. 调用 step() 来表示一组动画完成
  3. 通过动画实例的export方法导出动画数据传递给组件的animation属性
  4. 还原动画
  5. 页面卸载的时候,清除动画数据
<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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1088972.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JavaScript-前端环境搭建-nodejs-打包分发-Webstorm-vue安装创建

文章目录 1.Node环境安装2.Node环境配置3.新建项目4.安装常用包4.1.vue安装4.2.安装webpack 5.总结 Web大前端技术&#xff0c;是一项使用范围非常广泛的技术&#xff0c;以JavaScript脚本语言为主使用&#xff0c;由于其本身开源的特点&#xff0c;可以使用的轮子非常的多&…

“数字支付龙头”汇付天下:以CRM为起点建设业务全流程数字化

数字化时代商业瞬息万变&#xff0c;技术日新月异&#xff0c;如何能快速打通场景支付和数据&#xff0c;构筑私域流量&#xff0c;强化营销能力&#xff0c;降低运营成本&#xff0c;实现全链路数字化增长&#xff0c;CRM系统的应用是不可或缺的关键环节。 成立于2006年6月&a…

proteus仿真大赛-----pyqt5制作上位机安防页面

本项目是基于pyqt5进行上位机的开发&#xff0c;主要是向下位机发送控制指令以及向服务器发送信息 主页面如图所示&#xff1a; 1.主页面是继承QMainWindow&#xff0c;使用QPushButton设置四个按钮&#xff0c;分别使用信号与槽机制连接不同的方法&#xff0c;然后使用setStyl…

安装Mycat-web

Mycat-web是一个用于管理Mycat数据库中间件的Web控制台。Mycat是一个开源的、高性能的分布式数据库中间件&#xff0c;可用于将多个MySQL数据库组织成一个逻辑上的集群&#xff0c;并提供负载均衡、故障切换、分片等功能。 下载 wget http://dl.mycat.org.cn/mycat-web-1.0/M…

西门子精智触摸屏下载程序后与PLC通信失败,提示输入传输密码的解决方法

西门子精智触摸屏下载程序后与PLC通信失败,提示输入传输密码的解决方法 如下图所示,这里使用的是TP900 Comfort精智系列触摸屏,下载程序之后,弹出窗口要求输入传输密码,但是我却不知道这里的传输密码指的是什么????怎么输都不对!! 浪费了大半天的时间,终于查出了原…

联合火力分配方案数学建模

2023年数学建模竞赛 联合火力分配方案数学建模 不仅在人们的生产实践中&#xff0c;在多目标规划中经常会遇到如何利用现有资源来安排&#xff0c;以取得最大经济效益的问题。此类问题构成了运筹学的一个重要分支—数学规划&#xff0c;而线性规划则是数学规划的一个重要分支。…

浅析森林烟火AI检测算法的应用及场景使用说明

一、方案背景 现有的森林防火监测系统落后&#xff0c;以人工地面巡护、瞭望塔高点巡查为主&#xff0c;存在巡护范围有限、巡护效率低等问题&#xff0c;建立健全的森林防火风险预警体系&#xff0c;实现对森林、林场等场景的全天候智能自动监测、火情预警&#xff0c;及时发…

【算法|双指针系列No.7】leetcodeLCR 007. 三数之和

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

轻松掌握Python正则表达式:高效处理文本数据的秘诀!

更多资料获取 &#x1f4da; 个人网站&#xff1a;涛哥聊Python 当谈到文本处理和搜索时&#xff0c;正则表达式是Python中一个强大且不可或缺的工具。 正则表达式是一种用于搜索、匹配和处理文本的模式描述语言&#xff0c;可以在大量文本数据中快速而灵活地查找、识别和提取…

【ROS】ros-noetic和anaconda联合使用【实操】

【ROS】ros-noetic和anaconda联合使用【实操】 文章目录 【ROS】ros-noetic和anaconda联合使用【实操】1. requirement2. 新建ros包中的python脚本3. SAC算法Reference 在介绍完基本的联合使用方式后&#xff08;参考 这篇博客&#xff09;&#xff0c;笔者希望使用ros能完成 …

【spring data jpa】ID生成策略(GeneratedValue)

一、添加依赖 在pom文件中添加spring data jpa依赖 <dependency><groupId>org.springframework.data</groupId><artifactId>spring-data-jpa</artifactId><version>3.1.4</version> </dependency> <dependency><gr…

技术学习群-第四期内容共享

本期是技术群聊的第四期。还是那句话&#xff0c;《群聊免费进入》。一起来看看本期分享内容。 uiautomator-Error问题 在使用u2的过程中&#xff0c;有时候需要使用到uiautomator这个工具来进行查阅层级。但是博主遇到了这么个问题。 《问题分析》&#xff1a;发生此问题的原因…

【QT】Ubuntu 搭建 QT 环境(图形化界面安装)

介于直接使用源码编译安装 QT 耗时较长&#xff0c;而且需要手动编写脚本进行编译&#xff0c;难度较大&#xff0c;这里选择直接以图形化界面的方式安装 QT 。 目录 1、下载 QT 安装包 2、安装 QT 3、添加环境变量 4、cmake 引入 QT 库 5、Failed to find “GL/gl.h“ in…

企业AI大模型服务——轻量化部署

据中国证券报记者不完全统计&#xff0c;当前全国生成式AI产品数量已超300个。随着大模型产品日益增加&#xff0c;当前大模型行业竞争从比拼参数阶段过渡到比拼落地应用阶段。业内人士表示&#xff0c;随着未来不断有新的企业通过备案&#xff0c;大模型应用拐点将加速到来&am…

Elasticsearch集群管理原理

Elasticsearch 是一个开源的、基于 Lucene 的分布式搜索和分析引擎&#xff0c;设计用于云计算环境中&#xff0c;能够实现实时的、可扩展的搜索、分析和探索全文和结构化数据。它具有高度的可扩展性&#xff0c;可以在短时间内搜索和分析大量数据。 Elasticsearch 不仅仅是一个…

【Element-plus】如何让滚动条永远在最底部(支持在线演示)

如何让滚动条永远在最底部 一、适用场景二、实现思路三、效果图四、在线演示五、完整代码 一、适用场景 在某些场景下&#xff0c;你可能希望滚动条保持在最底部&#xff0c;以确保用户始终看到最新的内容或信息。如&#xff1a;在实时聊天应用程序中&#xff0c;当新消息到达…

跳动的爱心源码

话不多说直接上源码 关闭程序请按 AIt + F4 import random from math import sin, cos, pi, log from tkinter import * import ctypesuser32 = ctypes.windll.user32 CANVAS_WIDTH = user32.GetSystemMetrics(0

【java学习—七】面向对象特征之二:继承的基础知识(29)

文章目录 1. 为什么要有继承&#xff1f;2. 案例理解3. 继承的作用4. 总结 1. 为什么要有继承&#xff1f; 问题&#xff1a;为什么要有继承&#xff1f; 答&#xff1a;多个类中存在相同属性和行为时&#xff0c;将这些内容抽取到单独一个类中&#xff0c;那么多个类无需再定…

鹅厂练习 13 年 Coding 后,我悟了

点击链接了解详情 导读 本文主要受《程序员修炼之道: 通向务实的最高境界》、《架构整洁之道》、《Unix 编程艺术》启发。我不是第一个发明这些原则的人&#xff0c;甚至不是第一个总结出来的人&#xff0c;别人都已经写成书了&#xff01;务实的程序员对于方法的总结&#xf…

动态盘转换为基本盘

问题描述 不小心将磁盘0&#xff08;C和D是基本盘&#xff0c;蓝颜色&#xff09;改成了动态盘&#xff08;C和D是动态盘&#xff0c;橘黄色&#xff09;&#xff1f;如何修改回来呢&#xff1f; 解决方案&#xff1a; 使用DiskGenius将动态磁盘转换为基本磁盘 操作之前一定…