
基础|GIF 案例,从 .animation() 到 Curves.springMotion|鸿蒙动效笔记 01 原创
在《鸿蒙动效基础课》这个系列企划中,Liny 将会大致介绍关于原生鸿蒙动效(以及用户体验)的诸多开发要点、思路与细节。
作为第一节课,Liny 希望率先介绍 ArkUI 的 .animation() 属性和来自 @ohos.curves 的 Curves.springMotion() 方法,用于构造简单的弹簧动画(真的很 Q 弹)。
参考代码:index.ets
从 .animation() 开始
这个神秘的属性可以为几乎所有组件的属性变化创造连贯的动画。
在这个例子中,我们设置了一个 Text((๑´ﻌ`๑))和一个按钮(ε=( o`ω′)ノ)。在点击按钮之后会来回切换(Toggle)Text 组件的对齐方式(左对齐 ←→ 右对齐)。
没有 .animation() 的时候是这样的:
添加 .animation() :
关键参数说明:
{duration: 动画的持续时间,单位毫秒, delay: 动画开始的延迟,单位毫秒, curve: 动画曲线,决定了动画的表现效果(渐慢、先快后慢、几乎匀速、……)}
值得一提的是,在 curve: 这一栏中,除了输入 Curve 预置的几个
(比较古板)的曲线以外,还可以通过 Curves 库构造其他自定义的曲线。这篇文章即将介绍的便是 Curves.curveMotion() 函数,可以用来创造一个具有弹性的动画。
正片:Curves.springMotion
使用前需要先导入:
关键参数说明
在本例中写出来长这样:
response
表示“弹簧自然振动周期,决定弹簧复位的速度”。
默认值:0.55
单位:秒
取值范围:(0, +∞)
说明:
设置小于等于0的值时,按默认值0.55处理。
等于当 dampingFraction = 1 的时候弹性动画的时长,也等于 dampingFraction = 0 时弹性动画弹一个来回的时长。
dampingFraction
是阻尼系数。
阻尼系数。
0 表示无阻尼,一直处于震荡状态;
大于 0 小于 1 的值为欠阻尼,运动过程中会超出目标值;
等于 1 为临界阻尼;
大于 1 为过阻尼,运动过程中逐渐趋于目标值。
默认值:0.825
单位:秒
取值范围:[0, +∞)
说明:
设置小于0的值时,按默认值0.825处理。
阻尼越大,到位的速度越快,即弹的过程越短;阻尼越小,动画就会更弹。
这段话的意思就是:
取值 [0,1) 时,值越小越弹,取 0 时动画会一直弹;
1 是临界,让动画变成普通(标准)的渐缓动画;
(1, +∞) 值越大,渐缓越明显,就像逆着风前进一样,不过最终都会抵达终点。
示例
默认参数(0.55,0.825)
2 秒时长,无弹性
0.55 秒周期,一直弹
后话
感谢你读到这里!这是 Liny 正式撰写的第一篇 HarmonyOS NEXT 开发笔记,可能存在诸多不足,也可能掠过诸多内容。还望诸位开发者同学/同志海涵!如有疏漏,也请业内前辈大佬斧正。
鸿蒙生态的建设任重道远,(~o ̄3 ̄)~ 在一起,就可以!
