【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(七) -> JS动画(二)
目录
1 -> 动画动效
1.1 -> 创建动画对象
1.2 -> 添加动画事件和调用接口
2 -> 动画帧
2.1 -> 请求动画帧
2.2 -> 取消动画帧
1 -> 动画动效
通过设置插值器来实现动画效果。
说明
从API Version 6 开始支持。
1.1 -> 创建动画对象
通过createAnimator创建一个动画对象,通过设置参数options来设置动画的属性。
<!-- test.hml -->
<div class="container"><div style="width: 300px;height: 300px;margin-top: 100px;background: linear-gradient(pink, purple);transform: translate({{translateVal}});"></div><div class="row"><button type="capsule" value="play" onclick="playAnimation"></button></div>
</div>
/* test.css */
.container {width:100%;height:100%;flex-direction: column;align-items: center;justify-content: center;
}
button{width: 200px;
}
.row{width: 65%;height: 100px;align-items: center;justify-content: space-between;margin-top: 50px;margin-left: 260px;
}
/* test.js */
import animator from '@ohos.animator';
export default {data: {translateVal: 0,animation: null},onInit() {},onShow(){var options = {duration: 3000,easing:"friction",delay:"1000",fill: 'forwards',direction:'alternate',iterations: 2,begin: 0,end: 180};//设置参数this.animation = animator.createAnimator(options)//创建动画},playAnimation() {var _this = this;this.animation.onframe = function(value) {_this.translateVal= value};this.animation.play();}
}
说明
-
使用createAnimator创建动画对象时必须传入options参数。
-
begin插值起点,不设置时默认为0。
-
end插值终点,不设置时默认为1。
1.2 -> 添加动画事件和调用接口
animator支持事件和接口,可以通过添加frame、cancel、repeat、finish事件和调用update、play、pause、cancel、reverse、finish接口自定义动画效果。animator支持的事件和接口具体见动画中的createAnimator。
<!-- test.hml -->
<div style="flex-direction: column;align-items: center;width: 100%;height: 100%;"><div style="width:200px;height: 200px;margin-top: 100px;background: linear-gradient(#b30d29, #dcac1b);transform: scale({{scaleVal}});"></div><div style="width: {{DivWidth}};height: {{DivHeight}};margin-top: 200px;background: linear-gradient(pink, purple);margin-top: 200px;transform:translateY({{translateVal}});"></div><div class="row"><button type="capsule" value="play" onclick="playAnimation"></button><button type="capsule" value="update" onclick="updateAnimation"></button></div><div class="row1"><button type="capsule" value="pause" onclick="pauseAnimation"></button><button type="capsule" value="finish" onclick="finishAnimation"></button></div><div class="row2"><button type="capsule" value="cancel" onclick="cancelAnimation"></button><button type="capsule" value="reverse" onclick="reverseAnimation"></button></div>
</div>
/* test.css */
button{width: 200px;
}
.row{width: 65%;height: 100px;align-items: center;justify-content: space-between;margin-top: 150px;position: fixed;top: 52%;left: 120px;
}
.row1{width: 65%;height: 100px;align-items: center;justify-content: space-between;margin-top: 120px;position: fixed;top: 65%;left: 120px;
}
.row2{width: 65%;height: 100px;align-items: center;justify-content: space-between;margin-top: 100px;position: fixed;top: 75%;left: 120px;
}
/* test.js */
import animator from '@ohos.animator';
import prompt from '@system.prompt';
export default {data: {scaleVal:1,DivWidth:200,DivHeight:200,translateVal:0,animation: null},onInit() {var options = {duration: 3000,fill: 'forwards',begin: 200,end: 270};this.animation = animator.createAnimator(options);},onShow() {var _this= this;//添加动画重放事件this.animation.onrepeat = function() {prompt.showToast({message: 'repeat'});var repeatoptions = {duration: 2000,iterations: 1,direction: 'alternate',begin: 180,end: 240};_this.animation.update(repeatoptions);_this.animation.play();};},playAnimation() {var _this= this;//添加动画逐帧插值回调事件this.animation.onframe = function(value) {_this. scaleVal= value/150,_this.DivWidth = value,_this.DivHeight = value,_this.translateVal = value-180};this.animation.play();},updateAnimation() {var newoptions = {duration: 5000,iterations: 2,begin: 120,end: 180};this.animation.update(newoptions);this.animation.play();//调用动画播放接口},pauseAnimation() {this.animation.pause();//调用动画暂停接口},finishAnimation() {var _this= this;//添加动画完成事件this.animation.onfinish = function() {prompt.showToast({message: 'finish'})};this.animation.finish(); //调用动画完成接口},cancelAnimation() {this.animation.cancel(); //调用动画取消接口},reverseAnimation() {this.animation.reverse(); //调用动画倒放接口}
}
说明
在调用update接口的过程中可以使用这个接口更新动画参数,入参与createAnimator一致。
2 -> 动画帧
2.1 -> 请求动画帧
请求动画帧时通过requestAnimationFrame函数逐帧回调,在调用该函数时传入一个回调函数。
runframe在调用requestAnimationFrame时传入带有timestamp参数的回调函数step,将step中的timestamp赋予起始的startTime。当timestamp与startTime的差值小于规定的时间时将再次调用requestAnimationFrame,最终动画将会停止。
<!-- test.hml -->
<div class="container"><tabs onchange="changecontent"><tab-content><div class="container"><stack style="width: 300px;height: 300px;margin-top: 100px;margin-bottom: 100px;"><canvas id="mycanvas" style="width: 100%;height: 100%;background-color: coral;"></canvas><div style="width: 50px;height: 50px;border-radius: 25px;background-color: indigo;position: absolute;left: {{left}};top: {{top}};"></div></stack><button type="capsule" value="play" onclick="runframe"></button></div></tab-content></tabs>
</div>
/* test.css */
.container {flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 100%;
}
button{width: 300px;
}
/* test.js */
export default {data: {timer: null,left: 0,top: 0,flag: true,animation: null,startTime: 0,},onShow() {var test = this.$element("mycanvas");var ctx = test.getContext("2d");ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(300, 300);ctx.lineWidth = 5;ctx.strokeStyle = "red";ctx.stroke();},runframe() {this.left = 0;this.top = 0;this.flag = true;this.animation = requestAnimationFrame(this.step);},step(timestamp) {if (this.flag) {this.left += 5;this.top += 5;if (this.startTime == 0) {this.startTime = timestamp;}var elapsed = timestamp - this.startTime;if (elapsed < 500) {console.log('callback step timestamp: ' + timestamp);this.animation = requestAnimationFrame(this.step);}} else {this.left -= 5;this.top -= 5;this.animation = requestAnimationFrame(this.step);}if (this.left == 250 || this.left == 0) {this.flag = !this.flag}},onDestroy() {cancelAnimationFrame(this.animation);}
}
说明
requestAnimationFrame函数在调用回调函数时在第一个参数位置传入timestamp时间戳,表示requestAnimationFrame开始去执行回调函数的时刻。
2.2 -> 取消动画帧
通过cancelAnimationFrame函数取消逐帧回调,在调用cancelAnimationFrame函数时取消requestAnimationFrame函数的请求。
<!-- test.hml -->
<div class="container"><tabs onchange="changecontent"><tab-content><div class="container"><stack style="width: 300px;height: 300px;margin-top: 100px;margin-bottom: 100px;"><canvas id="mycanvas" style="width: 100%;height: 100%;background-color: coral;"></canvas><div style="width: 50px;height: 50px;border-radius: 25px;background-color: indigo;position: absolute;left: {{left}};top: {{top}};"></div></stack><button type="capsule" value="play" onclick="runframe"></button></div></tab-content></tabs>
</div>
/* test.css */
.container {flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 100%;
}
button{width: 300px;
}
/* test.js */
export default {data: {timer: null,left: 0,top: 0,flag: true,animation: null},onShow() {var test = this.$element("mycanvas");var ctx = test.getContext("2d");ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(300, 300);ctx.lineWidth = 5;ctx.strokeStyle = "red";ctx.stroke();},runframe() {this.left = 0;this.top = 0;this.flag = true;this.animation = requestAnimationFrame(this.step);},step(timestamp) {if (this.flag) {this.left += 5;this.top += 5;this.animation = requestAnimationFrame(this.step);} else {this.left -= 5;this.top -= 5;this.animation = requestAnimationFrame(this.step);}if (this.left == 250 || this.left == 0) {this.flag = !this.flag}},onDestroy() {cancelAnimationFrame(this.animation);}
}
说明
在调用该函数时需传入一个具有标识id的参数。
感谢各位大佬支持!!!
互三啦!!!
相关文章:

【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(七) -> JS动画(二)
目录 1 -> 动画动效 1.1 -> 创建动画对象 1.2 -> 添加动画事件和调用接口 2 -> 动画帧 2.1 -> 请求动画帧 2.2 -> 取消动画帧 1 -> 动画动效 通过设置插值器来实现动画效果。 说明 从API Version 6 开始支持。 1.1 -> 创建动画对象 通过cre…...
SpaCy处理NLP的详细工作原理及工作原理框图
spaCy处理NLP的详细工作原理及工作原理框图 spaCy处理NLP的详细工作原理 spaCy是一个基于Python的开源自然语言处理(NLP)库,它提供了一系列高效且易用的工具,用于执行各种NLP任务,如文本预处理、文本解析、命名实体识…...

Mysql中的常用函数
1、datediff(date1,date2) date1减去date2,返回两个日期之间的天数。 SELECT DATEDIFF(2008-11-30,2008-11-29) AS DiffDate -- 返回1 SELECT DATEDIFF(2008-11-29,2008-11-30) AS DiffDate -- 返回-1 2、char_length(s) 返回字符串 s 的字符数 3、round(x,d)…...
Linux下find命令的使用方法详解
文章目录 **一、基本语法****二、常用搜索条件****1. 按名称搜索****2. 按类型搜索****3. 按时间搜索****4. 按大小搜索****5. 按权限/所有者搜索** **三、组合条件(逻辑运算符)****四、执行操作****1. 直接输出(默认)****2. 删除…...
Day(19)--IO流(三)
文件加密 ps:^异或: 两边相同就是false 两边不同就是true 如果比较的是数字,那就会把它转换成为二进制,从右自左依次比较 总结:如果一个数字被异或两次,结果还是原来的数字 缓冲流 字节缓冲流 BufferedInputStream------字节缓冲输入流 BufferedOutputStream----字节…...
数据类型——long long
在C语言中,long long 类型是一种有符号的64位整数,其取值范围由二进制补码表示法决定。以下是具体数值及解释: 1. long long 的最大值 最大值(正数):9223372036854775807 计算方式:2^63 - 1 这是…...

网络安全通信架构图
🍅 点击文末小卡片 ,免费获取网络安全全套资料,资料在手,涨薪更快 在安全通信里面我经常听到的2个东西就是SSL和TLS,这2个有什么区别呢?以及HTTPS是怎么通信的?包括对称加密、非对称加密、摘要、…...

AMD(xilinx) FPGA书籍推荐
理论到实践,五年磨一剑 以应用为主,书中全部例程均来自工程实践;目的在于培养FPGA工程师良好的代码编写习惯,掌握vivado常用高级技巧。本书详细讲解了: (0)vivado操作基础从工程建立到bit/mcs文…...

考前冲刺,消防设施操作员考试最后一击
考前冲刺,消防设施操作员考试最后一击 考前冲刺阶段至关重要。首先要回归教材,快速浏览重点知识点,强化记忆。同时,对之前做过的错题进行集中复习,分析错误原因,避免在考试中再次犯错。进行全真模拟考试&a…...

【GoTeams】-3:构建api、重构错误码
本文目录 1. 构建api梳理调用关系api包的作用路由梳理注册Register代码语法 2. 重构错误码 1. 构建api 首先复制project-user,改名为project-api,放在总的路径下,然后在工作区中进行导入。 运行命令go work use .\project-api\新建工作区之…...

MuBlE:为机器人操作任务规划提供了逼真的视觉观察和精确的物理建模
2025-03-05,由华为诺亚方舟实验室、捷克技术大学和帝国理工学院联合开发的MuBlE(MuJoCo and Blender simulation Environment)模拟环境和基准测试。通过结合MuJoCo物理引擎和Blender高质量渲染,为机器人操作任务规划提供了逼真的视…...
基于STC89C52的4x4矩阵键盘对应键值显示测试
引言 在众多单片机应用系统中,用户输入功能至关重要。4x4 矩阵键盘因其布局紧凑、按键数量适中,能有效节省 I/O 口资源,成为常用的输入设备。STC89C52 作为一款经典的 8 位单片机,以其丰富的外设资源和简易的开发流程,为矩阵键盘的应用提供了良好平台。同时,LCD1602 作为…...
android13打基础: timepicker控件
public class Ch4_TimePickerActivity extends AppCompatActivity implements TimePickerDialog.OnTimeSetListener {private TextView tv_time; // 声明一个文本视图对象private TimePicker tp_time; // 声明一个时间选择器对象Overrideprotected void onCreate(Nullable Bund…...
【虚拟仿真】Unity3D中实现激光/射线的发射/折射/反射的效果(3D版)
推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群:398291828小红书小破站大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。...
【预测】-双注意LSTM自动编码器记录
预测-双注意LSTM自动编码器 1 预测-双注意LSTM自动编码器1.1 复现环境配置1.2 数据流记录1.2.1 **构建Dataset**(1) **X 的取数**(2) **y 的取数**(3) **target 的取数** 1.2.2 **举例说明**(1)**X 的取数**(2)**y 的取数**(3)**target 的取数** 1.2.3 **y 取数的问题****修正后…...
S32K3 MCU时钟部分
S32K3 MCU时钟部分 1.系统时钟发生器SCG 系统时钟发生器SCG模块提供MCU的系统时钟,SCG包含一个系统锁相环SPLL,一个慢速的内部参考时钟SIRC,一个快速内部参考时钟FIRC和系统振荡时钟SOSC. 时钟生成的电路提供了多个时钟分频器和选择器允许为不同的模块提供以特定于该模块的频率…...
java开发常用注解
在Java开发中,注解(Annotation)广泛用于简化代码、配置元数据、框架集成等场景。以下是不同场景下常用的注解分类整理: 一、核心Java注解(内置) Override 表示方法重写父类或接口的方法,编译器会…...

Doris vs ClickHouse 企业级实时分析引擎怎么选?
Apache Doris 与 ClickHouse 同作为OLAP领域的佼佼者,在企业级实时分析引擎该如何选择呢。本文将详细介绍 Doris 的优势,并通过直观对比展示两者的关键差异,同时分享一个企业成功用 Doris 替换 ClickHouse 的实践案例,帮助您做出明…...

解锁Egg.js:从Node.js小白到Web开发高手的进阶之路
一、Egg.js 是什么 在当今的 Web 开发领域,Node.js 凭借其事件驱动、非阻塞 I/O 的模型,在构建高性能、可扩展的网络应用方面展现出独特的优势 ,受到了广大开发者的青睐。它让 JavaScript 不仅局限于前端,还能在服务器端大展身手&…...
学习前端前需要了解的一些概念(详细版)
网站的定义与概述 网站(Website)是一个由网络服务器托管的、通过网络访问的、由相关网页和资源组成的集合。它为用户提供信息、服务或娱乐平台,是现代互联网的重要组成部分。网站的基本功能是展示信息和提供服务,用户可以通过浏览…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)
考察一般的三次多项式,以r为参数: p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]; 此多项式的根为: 尽管看起来这个多项式是特殊的,其实一般的三次多项式都是可以通过线性变换化为这个形式…...
Redis:现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发,其初衷是为了满足他自己的一个项目需求,即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源,Redis凭借其简单易用、…...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...