Skip to content

Instantly share code, notes, and snippets.

@hyoban
Last active November 21, 2021 13:54
Show Gist options
  • Save hyoban/032d5fb88239e7fe9f91c6cf075bbf3d to your computer and use it in GitHub Desktop.
Save hyoban/032d5fb88239e7fe9f91c6cf075bbf3d to your computer and use it in GitHub Desktop.

Jetpack Compose 动画基础

Transition

动画的过渡效果, 主要有 fade, slide, scale, expand(shrink).

EnterTransition Example

AnimationSpec

大部分动画的 API 都允许我们指定 AnimationSpec 参数来定义动画规范.

spring

类似弹簧的物理特性动画, 可以指定弹簧的弹性 dampingRatio 和向目标值移动的速度 stiffness.

spring 可以更流畅地处理中断,因为它可以在目标值在动画中变化时保证速度的连续性.

tween

tween 在给定两个值形成的范围内以一种 easing 曲线, 经过 durationMillis 的时长来完成动画. 我们可以延迟 delayMillis 的时长再开始动画.

keyframes

以指定关键帧的形式, 确定在指定时间点时的值. 同时指定 easing 曲线, 在两个关键帧之间将以此速度曲线来进行动画.

keyframes {
    durationMillis = 375
    0.0f at 0 with LinearOutSlowInEasing // for 0-15 ms
    0.2f at 15 with FastOutLinearInEasing // for 15-75 ms
    0.4f at 75 // ms
    0.4f at 225 // ms
}

repeatable

重复的运行一个基于一段时间的 AnimationSpec iterations 次. 我们可以设定每次运行结束后的 RepeatMode 为 Restart 还是 Reverse.

infiniteRepeatable

和前一个类似, 只是迭代次数无限.

snap

直接将值切换到目标值, 可以设置 delayMillis 后运行.

Easing

Easing 可以理解为一个函数, 给定 0 到 1 范围内的一个浮点数, 返回当前阶段动画进行的速度. 这样动画可以以非固定的速度来进行.

使用内置的 Easing 函数, 或者自定义一个

val CustomEasing = Easing { fraction -> fraction * fraction }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment