在OpenHarmony上实现弹性动效的方法
描述
在动画开发场景中，经常用到弹性效果，尤其在拖拽某个对象时经常伴随弹性动效。
OpenHarmony 提供了三种弹簧动画曲线用来实现弹性效果，本例将为大家介绍这三种曲线的用法。
最终效果如下：
运行环境
本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：
IDE：DevEco Studio 3.1 Beta2
SDK：Ohos_sdk_public 3.2.11.9(API Version 9 Release)
实现思路
本例主要用到以下三种弹簧动画曲线：
curves.springCurve：通过设置弹簧的初始速度、质量、刚度和阻尼来控制弹簧动画的效果。对应本例中 springCurve 按钮触发的动画。
curves.springMotion：通过设置弹簧震动时间和阻尼来控制弹簧动画的效果。对应本例中 springMotion 按钮触发的动画。
curves.responsiveSpringMotion：构造弹性跟手动画曲线对象，是springMotion的一种特例，仅默认参数不同，可与 springMotion 混合使用。用来实现拖拽动画。
开发步骤
①搭建 UI 框架
样例中有两个按钮，一个图片。内容整体纵向分布，两个按钮横向分布。纵向布局可以采用 Column 组件，横向布局可以采用 Row 组件。
代码如下：
@Entry
@Component
struct ImageComponent {
build() {
Column() {
Row() {
Button('springCurve')
.margin({right:10})
.fontSize(20)
.backgroundColor('#18183C')
Button('springMotion')
.fontSize(20)
.backgroundColor('#18183C')
}
.margin({top:30})
Image($r("app.media.contact2"))
.width(100)
.height(100)
}.width("100%").height("100%").backgroundColor('#A4AE77')
}
}
②为 springCurve 按钮添加 curves.springCurve 的曲线动画。
...
// 定义状态变量translateY，用来控制笑脸图像的位移
@State translateY: number = 0
...
Button('springCurve')
.margin({right:10})
.fontSize(20)
.backgroundColor('#18183C')
// 绑定点击事件
.onClick(() => {
// 在点击事件中添加显示动画
animateTo({
duration: 2000,
// 设定curves.springCurve为动画曲线
curve: curves.springCurve(100, 10, 80, 10)
},
() => {
// 改变translateY的值，使笑脸图像发生位移
this.translateY = -20
})
this.translateY = 0
})
...
Image($r("app.media.contact2"))
.width(100)
.height(100)
// 为笑脸图像添加位移属性，以translateY为参数
.translate({ y: this.translateY })
...
效果如下：
③为 springMotion 按钮添加 curves.springMotion 曲线动画。
这里通过 position 属性控制 springMotion 按钮的移动，当然开发者也可以继续选择使用 translate 属性。
...
// 定义状态变量translateY，用来控制笑脸图像的位置变化
@State imgPos: {
x: number,
y: number
} = { x: 125, y: 400 }
...
Button('springMotion')
.fontSize(20)
.backgroundColor('#18183C')
// 绑定点击事件
.onClick(() => {
// 在点击事件中添加显示动画
animateTo({
duration: 15,
//设定curves.springMotion为动画曲线
curve: curves.springMotion(0.5, 0.5),
onFinish: () => {
animateTo({ duration: 500,
curve: curves.springMotion(0.5, 0.5), }, () => {
// 动画结束时笑脸图像位置还原
this.imgPos = { x: 125, y: 400 }
})
}
}, () => {
// 改变笑脸图像位置，y轴位置由400，变为150
this.imgPos = { x: 125, y: 150 }
})
})
...
Image($r("app.media.contact2"))
.width(100)
.height(100)
.translate({ y: this.translateY })
// 为笑脸图像添加位置属性，以imgPos为参数
.position(this.imgPos)
...
效果如下：
④使用 curves.responsiveSpringMotion 为笑脸图像添加拖拽动画。
...
Image($r("app.media.contact2"))
.width(100)
.height(100)
.translate({ y: this.translateY })
.position(this.imgPos)
// 绑定触摸事件
.onTouch((event: TouchEvent) => {
// 当触摸放开时，笑脸图像位置还原
if (event.type == TouchType.Up) {
animateTo({
duration: 50,
delay: 0,
curve: curves.springMotion(),
onFinish: () => {
}
}, () => {
this.imgPos = { x: 125, y: 400 }
})
} else {
// 触摸过程中触发跟手动画
animateTo({
duration: 50,
delay: 0,
//设定跟手动画曲线
curve: curves.responsiveSpringMotion(),
onFinish: () => {
}
}, () => {
// 根据触点位置改变笑脸图像位置，从而实现跟手动画
this.imgPos = {
x: event.touches[0].screenX - 100 / 2,
y: event.touches[0].screenY - 100 / 2
}
})
}
})
...
效果如下：
完整代码
本例完整代码如下：
import curves from '@ohos.curves';
@Entry
@Component
struct ImageComponent {
// 定义状态变量translateY，用来控制笑脸图像的位移
@State translateY: number = 0
// 定义状态变量translateY，用来控制笑脸图像的位置变化
@State imgPos: {
x: number,
y: number
} = { x: 125, y: 400 }
build() {
Column() {
Row() {
Button('springCurve')
.margin({right:10})
.fontSize(20)
.backgroundColor('#18183C')
// 绑定点击事件
.onClick(() => {
// 在点击事件中添加显示动画
animateTo({
duration: 2000,
// 设定curves.springCurve为动画曲线
curve: curves.springCurve(100, 10, 80, 10)
},
() => {
// 改变translateY的值，使笑脸图像发生位移
this.translateY = -20
})
this.translateY = 0
})
Button('springMotion')
.fontSize(20)
.backgroundColor('#18183C')
// 绑定点击事件
.onClick(() => {
// 在点击事件中添加显示动画
animateTo({
duration: 15,
//设定curves.springMotion为动画曲线
curve: curves.springMotion(0.5, 0.5),
onFinish: () => {
animateTo({ duration: 500,
curve: curves.springMotion(0.5, 0.5), }, () => {
// 动画结束时笑脸图像位置还原
this.imgPos = { x: 125, y: 400 }
})
}
}, () => {
// 改变笑脸图像位置，y轴位置由400，变为150
this.imgPos = { x: 125, y: 150 }
})
})
}
.margin({top:30})
Image($r("app.media.contact2"))
.width(100)
.height(100)
// 为笑脸图像添加位移属性，以translateY为参数
.translate({ y: this.translateY })
// 为笑脸图像添加位置属性，以imgPos为参数
.position(this.imgPos)
// 绑定触摸事件
.onTouch((event: TouchEvent) => {
// 当触摸放开时，笑脸图像位置还原
if (event.type == TouchType.Up) {
animateTo({
duration: 50,
delay: 0,
curve: curves.springMotion(),
onFinish: () => {
}
}, () => {
this.imgPos = { x: 125, y: 400 }
})
} else {
// 触摸过程中触发跟手动画，同样通过animateTo实现动画效果
animateTo({
duration: 50,
delay: 0,
//设定跟手动画曲线
curve: curves.responsiveSpringMotion(),
onFinish: () => {
}
}, () => {
// 根据触点位置改变笑脸图像位置，从而实现跟手动画
this.imgPos = {
x: event.touches[0].screenX - 100 / 2,
y: event.touches[0].screenY - 100 / 2
}
})
}
})
}.width("100%").height("100%").backgroundColor('#A4AE77')
}
}
审核编辑：刘清
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。
举报投诉
- 相关推荐
- 触摸屏
- OpenHarmony
-
家庭、单位用电安全，需要“在弹性范围内、弹性连接”的接线端子2018-03-19 0
-
OpenHarmony 3.1 Beta版本关键特性解析——OpenHarmony图形框架2022-04-13 0
-
为什么要在OpenHarmony设备上安装Dropbear呢2022-05-23 0
-
app图标动效在openharmony的源码上哪里实现的？2022-06-10 0
-
OpenHarmony 官网文档有哪些上新？上篇：应用开发文档上新2022-06-14 0
-
网络组件axios可以在OpenHarmony上使用了2022-08-29 0
-
开源图形驱动在OpenHarmony上的使用和落地2023-08-31 0
-
云计算弹性评测模型的研究与实现2017-11-27 541
-
基于距离徙动校正的弹速补偿FPGA实现方法2019-03-30 2652
-
OpenHarmony生态论坛：支付终端在OpenHarmony上的安全框架2022-04-25 1457
-
OpenHarmony生态论坛：UROVO在OpenHarmony上的规划和实践2022-04-25 1332
-
如何在OpenHarmony上实现翻页动效呢？2023-06-11 661
-
OpenHarmony实战开发-如何实现组件动画。2024-04-28 554
全部0条评论
快来发表一下你的评论吧 !
