Блог

В представлениях Android у нас была анимация с использованием OvershootInterpolator

Мы хотим воспроизвести ту же анимацию в Jetpack Compose. Я вижу, что существует несколько видов анимации, описанных в https://developer.android.com/jetpack/compose/animation но я не вижу, какой из них может повторить OvershootInterpolator

• tween спецификация, похоже, не делает никакого превышения, просто анимация между начальным и конечным значением без превышения
• spring спецификация делает превышение, однако у нее нет такого durationMillis параметра, как tween, поэтому мы не можем контролировать, как быстро она воспроизводится
• keyFrames спецификация кажется возможным решением, сделав что-то вроде этого:

             animationSpec = keyframes {
                durationMillis = 500
                0f at 100 with FastOutSlowInEasing
                // Overshoot value to 50f
                50f * 2 at 300 with LinearOutSlowInEasing
                // Actual final value after overshoot animation
                25f at 500
            }
   

Есть ли лучший / более простой способ, чем использовать keyFrames для репликации OvershootInterpolator ?

Вы можете использовать любой Interpolator из Animator мира с помощью пользовательского Easing :

 animationSpec = tween(easing = Easing {
    OvershootInterpolator().getInterpolation(it) 
})
 

См Easing . Интерфейс: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Easing

Хотя я бы рекомендовал использовать пружины поверх интерполяторов, особенно тех, которые имитируют пружины. Пружины придали бы гораздо более естественный вид. 🙂

Мы можем использовать spring animation compose для достижения OvershootInterpolator . Несмотря на то, что мы не можем предоставить какую-либо пользовательскую продолжительность анимации, мы можем управлять скоростью анимации с помощью stiffness атрибута.

Мы можем добавить float values в stiffness атрибут любой пользовательский параметр. androidx.compose.animation.core в настоящее время предоставляет 4 stiffness постоянные значения по умолчанию, т. е.,

 object Spring {
    /**
     * Stiffness constant for extremely stiff spring
     */
    const val StiffnessHigh = 10_000f

    /**
     * Stiffness constant for medium stiff spring. This is the default stiffness for spring
     * force.
     */
    const val StiffnessMedium = 1500f

    /**
     * Stiffness constant for a spring with low stiffness.
     */
    const val StiffnessLow = 200f

    /**
     * Stiffness constant for a spring with very low stiffness.
     */
    const val StiffnessVeryLow = 50f
    .....
}

 

Мы можем проверить, что stiffness подходит для нашего случая.

Например:- (средняя скорость)

 animationSpec = spring(
    dampingRatio = Spring.DampingRatioHighBouncy,
    stiffness = Spring.StiffnessMedium // with medium speed
)
 

Мы также можем задать пользовательское значение для stiffness , например:-

  animationSpec = spring(
    dampingRatio = Spring.DampingRatioHighBouncy, // this would define how far the overshoot would happen.
    stiffness = 1000f // with custom speed less than medium speed.
)
 

Вы можете поиграть с custom float values жесткостью, чтобы достичь идеальной продолжительности анимации.