想了解更多关于开源的何使簧动画曲内容，请访问：
51CTO 开源基础软件社区
https://ost.51cto.com
在动画开发场景中，用弹经常用到弹性效果，何使簧动画曲尤其在拖拽某个对象时经常伴随弹性动效。用弹OpenHarmony提供了三种弹簧动画曲线用来实现弹性效果，何使簧动画曲本例将为大家介绍这三种曲线的用弹用法。
本例最终效果如下：
本例基于以下环境开发，何使簧动画曲开发者也可以基于其他适配的用弹版本进行开发：
本例主要用到以下三种弹簧动画曲线：
搭建UI框架。
样例中有两个按钮，一个图片。内容整体纵向分布，两个按钮横向分布。纵向布局可以采用Column组件，横向布局可以采用Row组件。代码如下：
@Entry@Componentstruct 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@Componentstruct 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') }}想了解更多关于开源的内容，请访问：
51CTO 开源基础软件社区
https://ost.51cto.com
责任编辑：jianghua 来源： 51CTO 开源基础软件社区 鸿蒙弹簧动画曲线(责任编辑：时尚)
基石科技控股(08391.HK)完成配发6962.5万股 每股0.40港元
基石科技控股(08391.HK)发布公告，认购协议项下的所有条件已经达成，而认购事项已于2021年3月10日完成。根据认购协议的条款及条件，合共6962.5万股认购股份已按每股0.40港元的认购价向认
...[详细]
OPPO与《英雄联盟手游》再次携手，推出了OPPO Reno10 Pro英雄联盟手游定制礼盒。对一款游戏有着深厚感情的资深游戏游戏，对游戏周边或是主题定制产品想必有着浓厚的兴趣。在手游时代，主题定制手
...[详细]5000mAh+67W闪充 OPPO A1千元价位无续航焦虑
OPPO A1配备5000mAh大容量电池，6nm工艺省电处理器，还有67W闪充快速补充电量，解决续航焦虑。提供了12GB+256GB大存储版本，售价1999元，所有消费者在选择手机时肯定都要考虑续航
...[详细]
如果说你在观望高端三色激光投影市场，预算在万元左右又想要大屏、好色彩的话，Vidda C1 Pro绝对要比传统的液晶电视更能满足你的需求。Vidda C1 Pro绝对是目前市面上表现最好的三色激光产品
...[详细]亚太卫星(01045.HK)年度纯利减少36.1% 每股盈利24.88港仙
亚太卫星(01045.HK)发布公告，截至2020年12月31日止年度，公司收入8.89亿港元，同比减少16.3%;公司股东应占溢利2.31亿港元，同比减少36.1%;每股盈利24.88港仙，末期现金
...[详细]
OPPO A1是一款注重实用性的千元级5G手机，该机直接提供了12GB+256GB大存储，能够在千元级中实现存储自由，这款手机售价1999元，目前已经在OPPO官方商城和各大线上平台发售。千元级用户在
...[详细]一文告诉你15英寸MacBook Air上市后 苹果本该怎么选
苹果刚刚在WWDC23大会上正式发布了15英寸的MacBook Air，如果你现在刚好想购买MacBook Air，或者说准备要入手苹果笔记本，该如何选择呢？北京时间今日6月6日）凌晨，苹果在WWDC
...[详细]
端午小长假来临，很多朋友并不想顶着大太阳出门，只想安安静静的躲在家中吹空调、追剧，笔者浏览了电商平台，挑选了非常受欢迎的空调、电视等产品，绝对能让你端午宅家更加舒适。想入手心仪家电，却错过了618？不
...[详细]
在众多小贷平台中，不少借款人都选择了小赢卡贷这款借贷APP。小赢卡贷针对不同需求的人提供的贷款服务有信用卡代还、精英贷、小赢易贷这三类产品。小赢卡贷上征信吗?小赢卡贷迟一天还有事吗?一起来跟希财君了解
...[详细]
iQOO 11S所主打的性能、快充和游戏体验获得了用户的高度认可。总之，想要一款能打游戏的靠谱手机，选iQOO 11S肯定是没错的。iQOO 11S在开售至今，已经有不少的用户实际体验过了。这款手机作
...[详细]
冠豪高新(600433.SH)：重组事项获有条件通过 公司A股股票自3月12日起复牌
小米手环8 Pro评测：质感全方位升级，更专业的大屏运动手环
石头分子筛洗烘一体机H1预定享多重好礼，100天免费试烘等你来
显示界“奥斯卡”大秀肌肉，而立之年的京东方开启“无限战争”
国家统计局：11月PMI为50.1% 制造业重回扩张区间
