【问题标题】:Button custom animation best practices按钮自定义动画最佳实践
【发布时间】:2020-01-14 15:58:34
【问题描述】:

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

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 的优点或缺点是什么?有没有更好的选择?

【问题讨论】:

    标签: android android-layout animation button


    【解决方案1】:

    如果你使用动画师,你需要一遍又一遍地复制你的代码。虽然有了一个类,你可以在任何你想要的地方调用它。

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

    按钮类

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

    还有你的 xml

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

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

    【讨论】:

    • 好的,但是我应该使用什么?此类扩展 Button 的选项编号 1 或 2?
    • 两者都可以。如果您想要一个用于扩展它的应用程序使用类的多种用途的自定义按钮,请使用动画:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-09-16
    • 2010-10-12
    • 2014-03-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多