鸿蒙HarmonyOS实战-ArkUI动画（弹簧曲线动画）_arkui-x 弹簧动画

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新HarmonyOS鸿蒙全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注鸿蒙）

正文

一、弹簧曲线动画

ArkUI提供了预置动画曲线，用于指定动画属性从起始值到终止值的变化规律，例如Linear、Ease、EaseIn等。此外，ArkUI还提供了由弹簧振子物理模型产生的弹簧曲线。通过使用弹簧曲线，开发者可以实现超过设定终止值的震荡效果，直至最终停止。弹簧曲线具有更强的互动性和可玩性，与其他曲线相比具有更强的动画效果。

弹簧曲线的接口包括两类，即springCurve和springMotion以及responsiveSpringMotion。这两种方式都可以生成弹簧曲线。

1.使用springCurve

springCurve的接口为：

springCurve(velocity: number, mass: number, stiffness: number, damping: number)

• velocity：初速度是指物体在某一瞬间的速度，通常使用符号v0表示。
• mass：弹簧系统的质量（m）是指整个弹簧系统的质量，包括弹簧本身的质量以及弹簧上的附加物体的质量。
• stiffness：弹簧系统的刚度（k）是指弹簧的弹性系数，表示弹簧单位伸长或压缩时所产生的力的大小。刚度越大，弹簧的伸长或压缩程度对应的力就越大。
• damping：阻尼（d）是指弹簧系统中存在的阻碍物体振动的阻力。阻尼可以分为无阻尼、欠阻尼和过阻尼三种情况。无阻尼情况下，弹簧系统会进行自由振动；欠阻尼情况下，弹簧系统会有振幅逐渐减小的振动；过阻尼情况下，弹簧系统会有更加缓慢的振动。

案例：

import curves from ‘@ohos.curves’;
@Entry
@Component
struct SpringTest {
@State translateX: number = 0;

private jumpWithSpeed(speed: number) {
this.translateX = -1;
animateTo({ duration: 2000, curve: curves.springCurve(speed, 1, 1, 1.2) }, () => {
// 以指定初速度进行x方向的平移的弹簧动画
this.translateX = 0;
})
}

build() {
Column() {
Button(“button”)
.fontSize(14)
.width(100)
.height(50)
.margin(30)
.translate({ x: this.translateX })
Row({space:50}) {
Button(“jump 50”).fontSize(14)
.onClick(() => {
// 以初速度50的弹簧曲线进行平移
this.jumpWithSpeed(50);
})
Button(“jump 200”).fontSize(14)
.onClick(() => {
// 以初速度200的弹簧曲线进行平移
this.jumpWithSpeed(200);
})
}.margin(30)
}.height(‘100%’).width(‘100%’)
}
}

2.使用springMotion和responsiveSpringMotion

springMotion和responsiveSpringMotion的接口为：

springMotion(response?: number, dampingFraction?: number, overlapDuration?: number)

responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number)

• response：弹簧自然振动周期是指在没有外力作用下，弹簧系统从一个极限位置到达另一个极限位置所需要的时间。它可以用公式T =
  2π√(m/k)来计算，其中T表示自然振动周期，m表示弹簧系统的质量，k表示弹簧的刚度。
• dampingFraction：阻尼系数是指弹簧系统中阻尼的大小，用符号β表示。它可以分为三种情况：无阻尼（β = 0），欠阻尼（β < 2√(mk)），过阻尼（β > 2√(mk)）。阻尼系数越大，弹簧系统的振动越快地衰减。
• overlapDuration：弹性动画衔接时长是指在动画制作中，两个物体之间由于弹性作用而发生的变形或运动的过程中所需要的时间。这个时长可以通过调整动画的帧率和物体的弹性特性来控制，使得动画看起来更加流畅和自然。

import curves from ‘@ohos.curves’;

@Entry
@Component
struct SpringMotionTest {
@State positionX: number = 100;
@State positionY: number = 100;
diameter: number = 50;

build() {
Column() {
Row() {
Circle({ width: this.diameter, height: this.diameter })
.fill(Color.Blue)
.position({ x: this.positionX, y: this.positionY })
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Move) {
// 跟手过程，使用responsiveSpringMotion曲线

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

图片转存中…(img-INDpPmK5-1713214014629)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！