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

说明

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

示意图如下在这里插入图片描述


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/logan0817/CubicBezierAndroidInterpolators

感谢

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

如果你有任何疑问可以留言。

如果这篇文章对你有帮助,可以赏个赞支持一下作者。

  • 11
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值