AnimationSpec

  • AnimationSpec 存储动画的规格
  • 包括：
      1. 要动画的数据类型
      1. 比如VectorizedAnimationSpec，在被使用的时候，会转化成AnimationVector

动画的一些默认数据：

  • 默认动画duration： 300ms
object AnimationConstants {
    /**
     * The default duration used in [VectorizedAnimationSpec]s and [AnimationSpec].
     */
    const val DefaultDurationMillis: Int = 300

    /**
     * The value that is used when the animation time is not yet set.
     */
    const val UnspecifiedTime: Long = Long.MIN_VALUE
}

TweenSpec：

  • 这个和早期Android里的View Animation中的Tween Animation不是一个东西。
  • 给出动画时常、动画曲线，TweenSpec就能帮我们计算出动画的每一个时间节点的具体动画。
  • Tween来自于：Inbetween。是动画领域中，绘制出主要的构图关键帧后，再去补充关键帧联动的过渡画面，所以官方翻译为：补间
  • 放到Android里，也就是我们提供一些基础动画数据，Compose帮我们实现剩余的动画过度补充。

TweenSpec使用：

  • 传入三个参数：
    • durationMillis： 时长
    • delay：是否延时执行
    • easying： 缓动效果(动画速度控制器)

Easing:

  • 官方翻译叫：缓动
  • 可以和Android原生Interpolator一同理解。
类型 效果
FastOutSlowInEasing 同： FastOutSlowInInterpolator
LinearOutSlowInEasing 同：LinearOutSlowInInterpolator
FastOutLinearInEasing 同： FastOutLinearInInterpolator
LinearEasing 官方没说，但我觉得同：LinearInterpolator

代码示例：

  • 标准动画曲线
LaunchedEffect(size) {
    anim.animateTo(size, TweenSpec(easing = FastOutSlowInEasing))//动画正式启动播放的时候，传入AnimationSpec。
}
  • 自定义动画曲线和时间：
LaunchedEffect(size) {//自定义时间，以及自定义easing的过程（通常这种方案都是UE提供合适的动画曲线算法）
    anim.animateTo(size, TweenSpec(durationMillis = 5000, easing = {
        val factor = 1.5f
        (2.0.pow(-10.0 * it) * sin((it - factor / 4.0) * (2.0 * Math.PI) / factor) + 1.0).toFloat()
    }))
}

CubicBezier

  • 通常我们使用的表格中的Easing，都是CubicBezierEasing的实现类，这个是Cubic贝塞尔曲线模型的Easing实现。
  • 如果需要自定义，可以参考下面的url：
  • Cubic贝塞尔通常是四个点的横纵坐标，来决定这个曲线的走向。
    • 起点和终点因为是固定的，都是（0,0）（11）
    • 因此只需要定制剩余的两个坐标点的位置，就能得到一个具体的贝塞尔曲线模型。
  • 如，Compose源码中提供的Easying
//只需要提供两个点的横纵坐标，就能够实现 FastOutSlowInEasing 的效果了
val FastOutSlowInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)

SnapSpec：

  • 前面说过snapTo()函数，这个是用来快速达到指定的动画Target位置的API。它和SnapSpec是关联的。
  • 当使用SnapSpec时，区别于snapTo，是可以做一些额外定制：定制延时
class SnapSpec<T>(val delay: Int = 0)

anim.animateTo(size,SnapSpec(5000))//5s后，立即animateTo到指定的size。没有动画过度过程

KeyframesSpec

  • 支持定义关键帧细节的动画选项
anim.animateTo(size,keyframes{ 
    144.dp at 150 with FastOutSlowInEasying //表示在150ms的时候，动画数据跑到144.dp，同时还能指定对应的曲线
    //with FastOutSlowInEasying 不填写，会默认使用LinearEasing
})

  • 上述代码，在运动的过程中，150ms的时候，动画会绘制View的size到144dp。但是如果animat::eTo的最终值size还有变更，那么动画会继续执行，运动到size的最终大小。

  • 缺点：

    • 动画复用性会比TweenSpec相对较低一点

 评论