当前位置: 首页 > news >正文

【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的开源自然语言处理&#xff08;NLP&#xff09;库&#xff0c;它提供了一系列高效且易用的工具&#xff0c;用于执行各种NLP任务&#xff0c;如文本预处理、文本解析、命名实体识…...

Mysql中的常用函数

1、datediff(date1,date2) date1减去date2&#xff0c;返回两个日期之间的天数。 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. 按权限/所有者搜索** **三、组合条件&#xff08;逻辑运算符&#xff09;****四、执行操作****1. 直接输出&#xff08;默认&#xff09;****2. 删除…...

Day(19)--IO流(三)

文件加密 ps:^异或: 两边相同就是false 两边不同就是true 如果比较的是数字,那就会把它转换成为二进制,从右自左依次比较 总结:如果一个数字被异或两次,结果还是原来的数字 缓冲流 字节缓冲流 BufferedInputStream------字节缓冲输入流 BufferedOutputStream----字节…...

数据类型——long long

在C语言中&#xff0c;long long 类型是一种有符号的64位整数&#xff0c;其取值范围由二进制补码表示法决定。以下是具体数值及解释&#xff1a; 1. long long 的最大值 最大值&#xff08;正数&#xff09;&#xff1a;9223372036854775807 计算方式&#xff1a;2^63 - 1 这是…...

网络安全通信架构图

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

AMD(xilinx) FPGA书籍推荐

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

考前冲刺,消防设施操作员考试最后一击

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

【GoTeams】-3:构建api、重构错误码

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

MuBlE:为机器人操作任务规划提供了逼真的视觉观察和精确的物理建模

2025-03-05&#xff0c;由华为诺亚方舟实验室、捷克技术大学和帝国理工学院联合开发的MuBlE&#xff08;MuJoCo and Blender simulation Environment&#xff09;模拟环境和基准测试。通过结合MuJoCo物理引擎和Blender高质量渲染&#xff0c;为机器人操作任务规划提供了逼真的视…...

基于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开发中&#xff0c;注解&#xff08;Annotation&#xff09;广泛用于简化代码、配置元数据、框架集成等场景。以下是不同场景下常用的注解分类整理&#xff1a; 一、核心Java注解&#xff08;内置&#xff09; Override 表示方法重写父类或接口的方法&#xff0c;编译器会…...

Doris vs ClickHouse 企业级实时分析引擎怎么选?

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

解锁Egg.js:从Node.js小白到Web开发高手的进阶之路

一、Egg.js 是什么 在当今的 Web 开发领域&#xff0c;Node.js 凭借其事件驱动、非阻塞 I/O 的模型&#xff0c;在构建高性能、可扩展的网络应用方面展现出独特的优势 &#xff0c;受到了广大开发者的青睐。它让 JavaScript 不仅局限于前端&#xff0c;还能在服务器端大展身手&…...

学习前端前需要了解的一些概念(详细版)

网站的定义与概述 网站&#xff08;Website&#xff09;是一个由网络服务器托管的、通过网络访问的、由相关网页和资源组成的集合。它为用户提供信息、服务或娱乐平台&#xff0c;是现代互联网的重要组成部分。网站的基本功能是展示信息和提供服务&#xff0c;用户可以通过浏览…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

uni-app学习笔记二十三--交互反馈showToast用法

showToast部分文档位于uniapp官网-->API-->界面&#xff1a;uni.showToast(OBJECT) | uni-app官网 uni.showToast(OBJECT) 用于显示消息提示框 OBJECT参数说明 参数类型必填说明平台差异说明titleString是提示的内容&#xff0c;长度与 icon 取值有关。iconString否图…...

Steam爬取相关游戏评测

## 因为是第一次爬取Steam。所以作为一次记录发出&#xff1b;有所错误欢迎指出。 无时间指定爬取 import requests import time import csv import osappid "553850" # 这里你也可以改成 #appid int(input()) max_reviews 10000 # 想爬多少条 # max_reviews…...