如何使用弹簧动画曲线

HarmonyOS

truemichael

2024-06-11 23:00:10

浏览

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

2024-06-12 22:58:04

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

如何使用弹簧动画曲线

订阅鸿蒙技术特刊，精选内容抢先看