往期知识点整理
介绍
在很多应用中,会出现点击按钮出现水波纹的特效。
效果图预览
使用说明
- 进入页面,点击按钮,触发水波纹动画。
- 再次点击按钮,停止水波纹动画。
实现思路
本例涉及的关键特性和实现方案如下:
- 要实现存在两个连续的涟漪,需要两个层叠的Stack分别以一定延迟进行相同的动画。
Stack()
.ripplesStyle()
.opacity(this.immediatelyOpacity)
.scale(this.immediatelyScale)
Stack()
.ripplesStyle()
.opacity(this.delayOpacity)
.scale(this.delayScale)
- 通过点击按钮来判断isListening变量,如果为true则添加动画。涟漪动画实际上的效果为透明度0.8->0,半径扩大到6倍的动画,持续时间无限。
/** TODO: 知识点:新建两个动画,分别修改两个Stack的属性,设置延迟200ms,展示为两个连续的涟漪,iterations设置为-1表示无限重复
* 高性能知识点:建议使用系统提供的动画接口,如果使用自定义动画,在动画曲线计算过程很容易引起UI线程高负载。
* 参考《减少动画丢帧》文章
* https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/performance/reduce-animation-frame-loss.md/
**/
animateTo({ duration: this.ANIMATION_DURATION, iterations: -1, curve: Curve.EaseInOut }, () => {
this.immediatelyOpacity = 0;
this.immediatelyScale = { x: 6, y: 6 };
})
animateTo({ duration: this.ANIMATION_DURATION, iterations: -1, curve: Curve.EaseInOut, delay: 200 }, () => {
this.delayOpacity = 0;
this.delayScale = { x: 6, y: 6 };
})
- 如果isListening为false,则用持续时间为0的动画来打断持续时间无限的动画。源码参考WaterRipples.ets。
// TODO: 知识点:用一个持续时间为0的闭包函数修改所有的变量去打断动画
animateTo({ duration: 0 }, () => {
this.immediatelyOpacity = 0.8;
this.delayOpacity = 0.8;
this.immediatelyScale = { x: 1, y: 1 };
this.delayScale = { x: 1, y: 1 };
})
高性能知识点
本例使用了系统提供的动画接口,降低了系统负载,提升动画帧率。
工程结构&模块类型
waterriples // har包
|---WaterRipples.ets // 水波纹效果实现页面
最后
总是有很多小伙伴反馈说:鸿蒙开发不知道学习哪些技术?不知道需要重点掌握哪些鸿蒙开发知识点? 为了解决大家这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开发学习路线与学习文档给大家用来跟着学习。
针对一些列因素,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线,包含了鸿蒙开发必掌握的核心知识要点,内容有(OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植……等)技术知识点。
《鸿蒙 (Harmony OS)开发学习手册》(共计892页):https://gitcode.com/HarmonyOS_MN/733GH/overview
如何快速入门?
1.基本概念
2.构建第一个ArkTS应用
3.……
鸿蒙开发面试真题(含参考答案):
《OpenHarmony源码解析》:
- 搭建开发环境
- Windows 开发环境的搭建
- Ubuntu 开发环境搭建
- Linux 与 Windows 之间的文件共享
- ……
- 系统架构分析
- 构建子系统
- 启动流程
- 子系统
- 分布式任务调度子系统
- 分布式通信子系统
- 驱动子系统
- ……