Interpolator:在Android中方便使用一些常见的CubicBezier贝塞尔曲线动画效果

说明

方便在Android中使用Interpolator一些常见的CubicBezier贝塞尔曲线动画效果。

示意图如下Interpolator:在Android中方便使用一些常见的CubicBezier贝塞尔曲线动画效果_第1张图片


import android.view.animation.Interpolator
import androidx.core.view.animation.PathInterpolatorCompat

/**
 * 参考
 * android https://yisibl.github.io/cubic-bezier
 * 实现常见贝塞尔曲线动画效果
 * 枚举拿来方便直接使用
 *
 * *Reference
 * *Android https://yisibl.github.io/cubic-bezier
 * *Implementing common Bezier curve animation effects
 * *Enumeration for easy and direct use
 *
 */
object CubicBezierInterpolators {

    fun createInterpolator(type: Type): Interpolator {
        return type.create()
    }

    sealed class Type(
        val name: String? = null,
        private val controlX1: Float,
        private val controlY1: Float,
        private val controlX2: Float,
        private val controlY2: Float
    ) {
        object EASE : Type("EASE", 0.25f, 0.1f, 0.25f, 1f)

        object LINEAR : Type("LINEAR", 0f, 0f, 1f, 1f)

        object EASE_IN : Type("EASE_IN", 0.42f, 0f, 1f, 1f)

        object EASE_OUT : Type("EASE_OUT", 0f, 0f, 0.58f, 1f)

        object EASE_IN_OUT : Type("EASE_IN_OUT", 0.42f, 0f, 0.58f, 1f)

        object EASE_IN_SINE : Type("EASE_IN_SINE", 0.47f, 0f, 0.75f, 0.72f)

        object EASE_OUT_SINE : Type("EASE_OUT_SINE", 0.39f, 0.57f, 0.56f, 1f)

        object EASE_IN_OUT_SINE : Type("EASE_IN_OUT_SINE", 0.45f, 0.05f, 0.55f, 0.95f)

        object EASE_IN_QUAD : Type("EASE_IN_QUAD", 0.55f, 0.09f, 0.68f, 0.53f)

        object EASE_OUT_QUAD : Type("EASE_OUT_QUAD", 0.25f, 0.46f, 0.45f, 0.94f)

        object EASE_IN_OUT_QUAD : Type("EASE_IN_OUT_QUAD", 0.46f, 0.03f, 0.52f, 0.96f)

        object EASE_IN_CUBIC : Type("EASE_IN_CUBIC", 0.55f, 0.06f, 0.68f, 0.19f)

        object EASE_OUT_CUBIC : Type("EASE_OUT_CUBIC", 0.22f, 0.61f, 0.36f, 1f)

        object EASE_IN_OUT_CUBIC : Type("EASE_IN_OUT_CUBIC", 0.65f, 0.05f, 0.36f, 1f)

        object EASE_IN_QUART : Type("EASE_IN_QUART", 0.9f, 0.03f, 0.69f, 0.22f)

        object EASE_OUT_QUART : Type("EASE_OUT_QUART", 0.17f, 0.84f, 0.44f, 1f)

        object EASE_IN_OUT_QUART : Type("EASE_IN_OUT_QUART", 0.77f, 0f, 0.18f, 1f)

        object EASE_IN_QUINT : Type("EASE_IN_QUINT", 0.76f, 0.05f, 0.86f, 0.06f)

        object EASE_OUT_QUINT : Type("EASE_OUT_QUINT", 0.23f, 1f, 0.32f, 1f)

        object EASE_IN_OUT_QUINT : Type("EASE_IN_OUT_QUINT", 0.86f, 0f, 0.07f, 1f)

        object EASE_IN_EXPO : Type("EASE_IN_EXPO", 0.95f, 0.05f, 0.8f, 0.04f)

        object EASE_OUT_EXPO : Type("EASE_OUT_EXPO", 0.19f, 1f, 0.22f, 1f)

        object EASE_IN_CIRC : Type("EASE_IN_CIRC", 0.6f, 0.04f, 0.98f, 0.34f)

        object EASE_OUT_CIRC : Type("EASE_OUT_CIRC", 0.08f, 0.82f, 0.17f, 1f)

        object EASE_IN_OUT_CIRC : Type("EASE_IN_OUT_CIRC", 0.79f, 0.14f, 0.15f, 0.86f)

        object EASE_IN_BACK : Type("EASE_IN_BACK", 0.6f, -0.28f, 0.74f, 0.05f)

        object EASE_OUT_BACK : Type("EASE_OUT_BACK", 0.18f, 0.89f, 0.32f, 1.27f)

        object EASE_IN_OUT_BACK : Type("EASE_IN_OUT_BACK", 0.68f, -0.55f, 0.27f, 1.55f)

        fun create(): Interpolator {
            return PathInterpolatorCompat.create(controlX1, controlY1, controlX2, controlY2)
        }
    }
}

使用

  1. 将 CubicBezierInterpolators.kt 类Copy到你项目中。

  2. 使用如下:

val animator: ObjectAnimator = ObjectAnimator.ofFloat(yourView, "translationX", 0, 500)
animator.duration = 1000
animator.interpolator = CubicBezierInterpolators.Type.EASE.create()
animator.start()

DEMO

  1. Demo.apk 点击下载
  2. Demo的Gif效果图

项目和演示效果可以去Github查看

项目地址: https://github.com/notwalnu/CubicBezierAndroidInterpolators 。

感谢

http://yisibl.github.io/cubic-bezier/#.25,.1,.25,1

你可能感兴趣的:(android)