如何使用弹簧动画曲线

如何使用弹簧动画曲线

HarmonyOS
2024-06-11 23:00:10
浏览
收藏 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 
})

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 } 
  }) 
})

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 
        } 
      }) 
    } 
  })

完整代码

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) 
  } 
}
分享
微博
QQ
微信
回复
2024-06-12 22:58:04
相关问题
属性动画如何实现宽高动画效果
711浏览 • 1回复 待解决
animateTo动画如何暂停
389浏览 • 1回复 待解决
如何实现动画转场效果
397浏览 • 1回复 待解决
lottile动画如何切圆角
490浏览 • 0回复 待解决
animateTo动画如何直接停止
972浏览 • 1回复 待解决
TransitionEffect动画循环播放如何关闭
666浏览 • 1回复 待解决
文字动画效果如何实现
813浏览 • 0回复 待解决
鸿蒙如何实现动画值变化
8188浏览 • 1回复 待解决
如何全局设置页面转场动画
342浏览 • 1回复 待解决
求教ArkUI如何实现组合动画
4252浏览 • 1回复 待解决
LoadingProgress如何修改加载动画样式
571浏览 • 1回复 待解决
请问如何去掉ability的转场动画
9836浏览 • 2回复 待解决
如何实现自定义应用入场动画
405浏览 • 1回复 待解决
如何定义dialog动画,有人知道吗?
838浏览 • 1回复 待解决
如何实现组件水波纹动画案例
469浏览 • 1回复 待解决
自定义组件之绘制折线图和曲线
425浏览 • 1回复 待解决
如何实现从底部缓慢上升的弹窗动画
718浏览 • 1回复 待解决
服务卡片的进度条如何停止动画
7505浏览 • 1回复 待解决
动画如何做渲染一次不消失
6365浏览 • 1回复 待解决