android自定义动画-按钮水波纹

最近在做智能泊车的应用，里面大量的自定义控件+动画，今天总结下

1.先放设计给的他们认为的参数

"- 缩放: (45.00, 45.00) → (100.00, 100.00)
  延迟: 0ms
  持续: 300ms
  平滑度: (0.00, 0.00, 0.20, 1.00)

- 透明: 25.00 → 0.00
  延迟: 150ms
  持续: 150ms
  平滑度: (0.00, 0.00, 1.00, 1.00)"

"波纹效果填充色:868686

备注:
左方延迟150ms表示整组动画执行到150ms才开始执行透明值的改变
而且持续150m后结束,刚好对应上方缩放的300ms"

1.先放设计给的动效图

直接上代码：

 init {
        initView()
        initListener()
        initAnimator()
        initRippleAnimator()
    }

    private fun initAnimator() {
        val linear = CubicBezierInterpolator.createInterpolator(CubicBezierInterpolator.Type.LINEAR)
        val avm3d =
            CubicBezierInterpolator.createInterpolator(CubicBezierInterpolator.Type.AVM_3D_1)
        val scaleX1Animator = ObjectAnimator.ofFloat(binding.tvAvm, "scaleX", 1f, 0.9f)
        val scaleY1Animator = ObjectAnimator.ofFloat(binding.tvAvm, "scaleY", 1f, 0.9f)
        val scaleX2Animator = ObjectAnimator.ofFloat(binding.tvAvm, "scaleX", 0.9f, 1f)
        val scaleY2Animator = ObjectAnimator.ofFloat(binding.tvAvm, "scaleY", 0.9f, 1f)
        val alpha1Animator = ObjectAnimator.ofFloat(binding.tvAvm, "alpha", 1f, 0f)
        val alpha2Animator = ObjectAnimator.ofFloat(binding.tvAvm, "alpha", 0f, 1f)

        scaleX1Animator.duration = 100
        scaleX1Animator.interpolator = avm3d
        scaleY1Animator.duration = 100
        scaleY1Animator.interpolator = avm3d
        scaleX2Animator.duration = 100
        scaleX2Animator.interpolator = avm3d
        scaleY2Animator.duration = 100
        scaleY2Animator.interpolator = avm3d
        alpha1Animator.duration = 200
        alpha1Animator.interpolator = linear
        alpha2Animator.duration = 200
        alpha2Animator.interpolator = linear

        animatorSetX.play(scaleX1Animator).after(scaleX2Animator)
        animatorSetY.play(scaleY1Animator).after(scaleY2Animator)
        animatorSetAlpha1.play(alpha1Animator)
        animatorSetAlpha2.play(alpha2Animator)
        animatorSetAlpha1.addListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(p0: Animator) {

            }

            override fun onAnimationEnd(p0: Animator) {
                if ("3D" == binding.tvAvm.text) {
                    binding.tvAvm.text = "2D"
                } else {
                    binding.tvAvm.text = "3D"
                }
                animatorSetX.start()
                animatorSetY.start()
                animatorSetAlpha2.start()
            }

            override fun onAnimationCancel(p0: Animator) {

            }

            override fun onAnimationRepeat(p0: Animator) {

            }

        })
    }

    private fun initRippleAnimator() {
        // 使用新的方法创建插值器
        val scaleInterpolator = CubicBezierInterpolator.createInterpolator(0f, 0f, 0.2f, 1f)
        val alphaInterpolator = CubicBezierInterpolator.createInterpolator(0f, 0f, 1f, 1f)

        val scaleXAnimator = ObjectAnimator.ofFloat(binding.rippleView, "scaleX", 0.45f, 1f)
        val scaleYAnimator = ObjectAnimator.ofFloat(binding.rippleView, "scaleY", 0.45f, 1f)
        val alphaAnimator = ObjectAnimator.ofFloat(binding.rippleView, "alpha", 0.25f, 0f)

        scaleXAnimator.duration = 300
        scaleXAnimator.interpolator = scaleInterpolator
        scaleYAnimator.duration = 300
        scaleYAnimator.interpolator = scaleInterpolator
        alphaAnimator.startDelay = 150
        alphaAnimator.duration = 150
        alphaAnimator.interpolator = alphaInterpolator

        animatorSetRipple.playTogether(scaleXAnimator, scaleYAnimator, alphaAnimator)
    }

    private fun initView() {
        mactivity.window.setBackgroundDrawableResource(android.R.color.transparent)
        val layoutManager = LinearLayoutManager(context, RecyclerView.HORIZONTAL, false)
        binding.rvRadioButtonList.adapter = radioButtonListAdapter
        binding.rvRadioButtonList.layoutManager = layoutManager
    }

    private fun initListener() {
        binding.btnAvm3d.setOnClickListener {
            animatorSetX.start()
            animatorSetY.start()
            animatorSetAlpha1.start()
            animatorSetRipple.start()
        }
    }

    fun show(isShow: Boolean) {
        Log.d(TAG, "show: $isShow")
        if (isShow) {
            functionBinding.showAvm.visibility = View.VISIBLE
        } else {
            functionBinding.showAvm.visibility = View.GONE
        }
    }