文章目录
2.使用springMotion和responsiveSpringMotion
前言
上文细学习了鸿蒙开发UI组件内转场动画，了解转场的概念，学习在if/else，foreach场景下如何结合transition和animateTo实现组件的转场动画效果，本文将学习弹簧曲线动画。
一、基本概念
ArkUI提供预置动画曲线，指定动画属性从起始值到终止值变化规律，如Linear、Ease、EaseIn等。ArkUI也提供了由弹簧振子物理模型产生的弹簧曲线。通过弹簧曲线，开发者可以设置超过设置的终止值，在终止值附近震荡，直至最终停下来的效果。弹簧曲线的动画效果比其他曲线具有更强的互动性、可玩性。
二、弹簧曲线动画实现
1.使用springCurve
接口
//构造参数：构建时，可指定质量为1，根据调节刚度、阻尼两个参数，达到想要的震荡效果。
//velocity: 初速度，
//mass: 弹簧系统的质量
//stiffness: 刚度
//damping: 阻尼
springCurve(velocity: number, mass: number, stiffness: number, damping: number)
代码示例
//step1： 引入curves依赖
import curves from '@ohos.curves';
@Entry
@Component
struct SpringTest {
@State translateX: number = 0;
private jumpWithSpeed(speed: number) {
this.translateX = -1;
//step3：配合translate，闭包中控制button组件位移变化，并指定初速度进行x方向的平移的弹簧动画
animateTo({ duration: 2000, curve: curves.springCurve(speed, 1, 1, 1.2) }, () => {
this.translateX = 0;
})
}
build() {
Column() {
Button("button")
.fontSize(14)
.width(100)
.height(50)
.margin(30)
//step2： 定义button组件的内转动画样式
.translate({ x: this.translateX })
Row({space:50}) {
Button("jump 50").fontSize(14)
.onClick(() => {
//step4： 以初速度50的弹簧曲线进行平移
this.jumpWithSpeed(50);
})
Button("jump 200").fontSize(14)
.onClick(() => {
//step5： 以初速度200的弹簧曲线进行平移
this.jumpWithSpeed(200);
})
}.margin(30)
}.height('100%').width('100%')
}
}
注：
1.速度只是放大了振荡的效果，不决定能否产生震荡
2.刚度越小、阻尼越大，springCurve的"弹性"越弱，振荡效果越弱
3.刚度减小或阻尼变大，达到过阻尼状态后，无论速度为多大，都不会有在终点值附近振荡的效果
2.使用springMotion和responsiveSpringMotion
springMotion接口
//response: 簧自然振动周期
//dampingFraction: 阻尼系数
//overlapDuration: 弹性动画衔接时长
springMotion(response?: number, dampingFraction?: number, overlapDuration?: number)
responsiveSpringMotion接口
//response: 簧自然振动周期
//dampingFraction: 阻尼系数
//overlapDuration: 弹性动画衔接时长
responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number)
代码示例
//step1： 引入curves依赖
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) {
//step2： 跟手过程，使用responsiveSpringMotion曲线，减去小球半径，以使球的中心运动到手指位置
animateTo({ curve: curves.responsiveSpringMotion() }, () => {
this.positionX = event.touches[0].screenX - this.diameter / 2;
this.positionY = event.touches[0].screenY - this.diameter / 2;
console.info(`move, animateTo x:${this.positionX}, y:${this.positionY}`);
})
} else if (event.type === TouchType.Up) {
//step3： 离手时，使用springMotion曲线，当手离开，小球弹回原来的位置
animateTo({ curve: curves.springMotion() }, () => {
this.positionX = 100;
this.positionY = 100;
console.info(`touchUp, animateTo x:100, y:100`);
})
}
})
}
.width("100%").height("80%")
.clip(true) // 如果球超出父组件范围，使球不可见
.backgroundColor(Color.Orange)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Center }) {
Text("拖动小球").fontSize(16)
}
.width("100%")
Row() {
Text('点击位置: [x: ' + Math.round(this.positionX) + ', y:' + Math.round(this.positionY) + ']').fontSize(16)
}
.padding(10)
.width("100%")
}.height('100%').width('100%')
}
}
注：
1.使用springMotion和responsiveSpringMotion曲线时，duration不生效，适合于跟手动画
2.跟手过程推荐使用responsiveSpringMotion曲线，松手过程推荐使用springMotion曲线
3.springCurve可以设置初速度，单一属性存在多个动画时不会互相影响，观察到的是多个动画效果的叠加
4.springMotion内部有速度机制，不可由开发者设置。在单一属性存在多个动画时，后一动画会取代前一动画，并继承前一动画的速度
总结
本文细学习了鸿蒙开发UI弹性曲线动画，了解弹性曲线的概念，学习了弹性曲线两种实现方式以及使用场景，下文将学习页面间动画。