如何使用弹簧动画曲线

如何使用弹簧动画曲线

HarmonyOS
2024-06-11 23:00:10
1779浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
day_night

实现背景

应用开发者在实际开发过程中,发现动画曲线文档中,有三种弹簧动画曲线:Curves.springCurve,Curves.springMotion,Curves.responsiveSpringMotion,那么如何根据当前自身业务需求来选择曲线呢?以下我们将分别来阐述这三种曲线的用法。

示意图

弹簧曲线的示意图如下:

Curves.springCurve

构造弹簧曲线对象,需要给曲线指定一个初速度,物体根据物体的质量、刚度、阻尼进行弹性形变

参数:



参数名




类型




必填




说明


velocity

number

初始速度。是由外部因素对弹性动效产生的影响参数,其目的是保证对象从之前的运动状态平滑的过渡到弹性动效。

mass

number

质量。弹性系统的受力对象,会对弹性系统产生惯性影响。质量越大,震荡的幅度越大,恢复到平衡位置的速度越慢。

stiffness

number

刚度。是物体抵抗施加的力而形变的程度。在弹性系统中,刚度越大,抵抗变形的能力越强,恢复到平衡位置的速度就越快。

damping

number

阻尼。是一个纯数,无真实的物理意义,用于描述系统在受到扰动后震荡及衰减的情形。阻尼越大,弹性运动的震荡次数越少、震荡幅度越小。


返回值:



类型




说明


ICurve

曲线的插值对象。


示例:

Button('springCurv').onClick(() => { 
  animateTo({ duration: 1000, 
    //弹簧曲线 
    curve: curves.springCurve(100, 1, 80, 10) 
  }, 
    () => { 
      this.translateY = -20 
    }) 
  this.translateY = 0 
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

Curves.springMotion

构造弹性动画曲线对象。如果对同一对象的同一属性进行多个弹性动画,每个动画会替换掉前一个动画,并继承之前的速度,无需指定初速度。参数:

参数名

类型

必填

说明

response

number

弹簧自然振动周期,决定弹簧复位的速度。单位:秒,默认值:0.55。

dampingFraction

number

阻尼系数。0表示无阻尼,一直处于震荡状态;大于0小于1的值为欠阻尼,运动过程中会超出目标值;等于1为临界阻尼;大于1为过阻尼,运动过程中逐渐趋于目标值。默认值:0.825。

overlapDuration

number

弹性动画衔接时长。发生动画继承时,如果前后两个弹性动画response不一致,response参数会在overlapDuration时间内平滑过渡。单位:秒,默认值:0。


返回值:

类型

说明

ICurve

曲线对象。说明: 弹性动画曲线为物理曲线,animation、animateTo中的duration参数不生效,动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一,故不能通过该曲线的interpolate函数获得插值。


示例:

Button('springMotion').onClick(() => { 
  animateTo({ 
    duration: 15000, 
    //弹性曲线 
    curve: curves.springMotion(0.5, 0.5), 
    onFinish: () => { 
      animateTo({ duration: 500, 
        curve: curves.springMotion(0.5, 0.5), }, () => { 
        this.myPos = { x: 150, y: 400 } 
      }) 
    } 
  }, () => { 
    this.myPos = { x: 150, y: 150 } 
  }) 
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

Curves.responsiveSpringMotion

构造弹性跟手动画曲线对象,是springMotion的一种特例,仅默认参数不同,可与springMotion混合使用参数:

参数名

类型

必填

说明

response

number

解释同springMotion中的response。单位:秒,默认值:0.15。

dampingFraction

number

解释同springMotion中的dampingFraction。默认值:0.86。

overlapDuration

number

解释同springMotion中的overlapDuration。单位:秒,默认值:0.25。


返回值:

类型

说明

ICurve

曲线对象。

说明:

1.弹性跟手动画曲线为springMotion的一种特例,仅默认值不同。如果使用自定义参数的弹性曲线,推荐使用springMotion构造曲线;如果使用跟手动画,推荐使用默认参数的弹性跟手动画曲线。

2.animation、animateTo中的duration参数不生效,动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度,也不能通过该曲线的interpolate函数获得插值。


示例:

Image($r("app.media.icon")) 
  .width(100) 
  .height(100) 
  .translate({ y: this.translateY }) 
  .position(this.myPos) 
  .onTouch((event: TouchEvent) => { 
    if (event.type == TouchType.Up) { 
      animateTo({ 
        duration: 50, 
        delay: 0, 
        //弹性曲线 
        curve: curves.springMotion(), 
        onFinish: () => { 
        } 
      }, () => { 
        this.myPos = { x: 150, y: 400 } 
      }) 
    } else { 
      animateTo({ 
        duration: 50, 
        delay: 0, 
        //跟手动画曲线 
        curve: curves.responsiveSpringMotion(), 
        onFinish: () => { 
        } 
      }, () => { 
        this.myPos = { 
          x: event.touches[0].screenX - 100 / 2, 
          y: event.touches[0].screenY - 100 / 2 
        } 
      }) 
    } 
  })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.

完整代码

import curves from '@ohos.curves'; 
 
@Entry 
@Component 
struct ImageComponent { 
  @State translateY: number = 0 
  @State myPos: { 
    x: number, 
    y: number 
  } = { x: 150, y: 400 } 
 
  build() { 
    Column() { 
      Row() { 
        Button('springCurv').onClick(() => { 
          animateTo({ duration: 1000, 
            //弹簧曲线 
            curve: curves.springCurve(100, 1, 80, 10) 
          }, 
            () => { 
              this.translateY = -20 
            }) 
          this.translateY = 0 
        }) 
        Button('springMotion').onClick(() => { 
          animateTo({ 
            duration: 15000, 
            //弹性曲线 
            curve: curves.springMotion(0.5, 0.5), 
            onFinish: () => { 
              animateTo({ duration: 500, 
                curve: curves.springMotion(0.5, 0.5), }, () => { 
                this.myPos = { x: 150, y: 400 } 
              }) 
            } 
          }, () => { 
            this.myPos = { x: 150, y: 150 } 
          }) 
        }) 
      } 
 
      Image($r("app.media.icon")) 
        .width(100) 
        .height(100) 
        .translate({ y: this.translateY }) 
        .position(this.myPos) 
        .onTouch((event: TouchEvent) => { 
          if (event.type == TouchType.Up) { 
            animateTo({ 
              duration: 50, 
              delay: 0, 
              //弹性曲线 
              curve: curves.springMotion(), 
              onFinish: () => { 
              } 
            }, () => { 
              this.myPos = { x: 150, y: 400 } 
            }) 
          } else { 
            animateTo({ 
              duration: 50, 
              delay: 0, 
              //跟手动画曲线 
              curve: curves.responsiveSpringMotion(), 
              onFinish: () => { 
              } 
            }, () => { 
              this.myPos = { 
                x: event.touches[0].screenX - 100 / 2, 
                y: event.touches[0].screenY - 100 / 2 
              } 
            }) 
          } 
        }) 
    }.width("100%").height("100%").backgroundImage($r("app.media.chicken")).backgroundImageSize(ImageSize.Cover) 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
分享
微博
QQ
微信
回复
2024-06-12 22:58:04


相关问题
HarmonyOS Tabs如何取消弹簧效果
769浏览 • 1回复 待解决
HarmonyOS 如何根据圆心坐标连接曲线
507浏览 • 1回复 待解决
HarmonyOS 曲线demo
699浏览 • 1回复 待解决
HarmonyOS 地图绘制曲线的点击
559浏览 • 1回复 待解决
HarmonyOS Canvas绘制曲线相关
754浏览 • 1回复 待解决
HarmonyOS 使用动画崩溃,请问如何调整
1137浏览 • 1回复 待解决
HarmonyOS 绘制圆滑折线或绘制曲线
786浏览 • 1回复 待解决
HarmonyOS 贝塞尔曲线绘制
942浏览 • 1回复 待解决
HarmonyOS 动画使用问题
551浏览 • 1回复 待解决
HarmonyOS CAPI动画怎么使用
984浏览 • 1回复 待解决
HarmonyOS PAG动画使用问题
510浏览 • 1回复 待解决