时间戳

首页 > 解决方案 > 按钮自定义动画最佳实践

android - 按钮自定义动画最佳实践

问题描述

我有一个问题：什么是最佳实践？我希望为按钮设置动画并在应用程序的所有按钮中使用动画。最佳做法是什么？

1) 在布局 xml 添加行 stateListAnimator:@animator/button_state_list_anim

  <Button
                android:id="@+id/register_btn_ar"
                style="@style/ButtonOrange"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginBottom="20dp"
                android:layout_marginLeft="48dp"
                android:layout_marginRight="48dp"
                android:stateListAnimator="@animator/button_state_list_anim"
                android:text="@string/button_sign_up" />

和动画文件：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- pressed state -->
    <item
        android:state_pressed="true">
        <set>
            <objectAnimator
                android:duration="100"
                android:propertyName="scaleX"
                android:valueTo="0.85"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="100"
                android:propertyName="scaleY"
                android:valueTo="0.85"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="100"
                android:propertyName="alpha"
                android:valueTo="0.8"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="100"
                android:propertyName="translationZ"
                android:valueTo="2dp"
                android:valueType="floatType" />
        </set>
    </item>

    <!-- base state -->
    <item android:state_pressed="false">
        <set>
            <objectAnimator
                android:duration="100"
                android:propertyName="scaleX"
                android:valueTo="1"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="100"
                android:propertyName="scaleY"
                android:valueTo="1"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="100"
                android:propertyName="alpha"
                android:valueTo="1"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="100"
                android:propertyName="translationZ"
                android:valueTo="6dp"
                android:valueType="floatType" />
        </set>
    </item>


</selector>

和点击监听器：

viewID.setOnClickListener {
            // click operation here
        }

2) 用动画创建类和函数

class MyAnim{

companion object{

        @SuppressLint("ClickableViewAccessibility")
        fun buttonClickListenerWithScale(view: Button, listener: Animator.AnimatorListener){
            view.setOnTouchListener { v, event ->
                when(event.action){
                    MotionEvent.ACTION_DOWN -> {
                        scaleDown(view)
                                .start()
                        false
                    }
                    MotionEvent.ACTION_CANCEL -> {
                        scaleUp(view)
                                .start()
                        false
                    }
                    MotionEvent.ACTION_UP ->{
                        val anim = scaleUp(view)
                        anim.addListener(listener)
                        anim.start()
                        view.apply {
                            isEnabled = false
                            postDelayed({ isEnabled = true}, 500)
                        }
                        false
                    }
                    else -> {
                        false
                    }
                }
            }
        }

        private fun scaleDown(view: View): Animator {
            val scaleY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 1f, 0.85f)
            val scaleX = PropertyValuesHolder.ofFloat(View.SCALE_X,  1f, 0.85f)
            val alpha = PropertyValuesHolder.ofFloat(View.ALPHA,  1f, 0.8f)
            var animator = ObjectAnimator.ofPropertyValuesHolder(view, alpha, scaleX, scaleY)
            animator.apply {
                duration = 200
                interpolator = OvershootInterpolator()
            }
            return animator
        }

        private fun scaleUp(view: View): Animator {
            val scaleY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 0.85f, 1f)
            val scaleX = PropertyValuesHolder.ofFloat(View.SCALE_X, 0.85f, 1f)
            val alpha = PropertyValuesHolder.ofFloat(View.ALPHA,  0.8f, 1f)
            var animator = ObjectAnimator.ofPropertyValuesHolder(view, alpha, scaleX, scaleY)
            animator.apply {
                duration = 200
                interpolator = OvershootInterpolator()
            }
            return animator
        }

    }
    }

并在活动或片段中像这样使用它：

MyAnim.buttonClickListenerWithScale( viewId , object : Animator.AnimatorListener {
            override fun onAnimationRepeat(animation: Animator?) {}
            override fun onAnimationCancel(animation: Animator?) {}
            override fun onAnimationEnd(animation: Animator?) {
               // click operation here
            }
            override fun onAnimationStart(animation: Animator?) {  }
        }
)

使用选项 1 或 2 的优点或缺点是什么？有没有更好的选择？

标签： androidandroid-layoutanimationbutton

解决方案

如果你和动画师一起去，你需要一遍又一遍地复制你的代码。在上课时，您可以在任何您想要的地方调用它。

可能只有我，但我会创建一个类。

按钮类

class myButtonAnim extends Button{
    public myButtonAnim(Context context) {
    super(context);
}

还有你的xml

<com.util.myButtonAnim
               <!--Additional attributes here-->
/>

您可以在任何需要的 XML 中使用附加命令调用它。

推荐阅读