textview - 翻轉動畫

一直以來我都想好把 textview 好好整整，這不現在得著機會了，還不走起，等著幹啥......

先看效果：

ezgif.com-video-to-gif.gif

專案地址：BW_Libs

實現思路

所謂翻轉，就是 A 面 B 面的切換，和磁帶正反面很像的。看圖很容易就讓我們想起用 rotationY 這個屬性來做動畫，在動畫執行一半之後，切換 view 的顯示。 所以我試了試，我用屬性動畫做的：

1. 先用的 0-180 的動畫，發現有些問題。在翻轉 90 之後，view 的內容也跟著翻轉了，文字都是反的著明顯不行

2. 然後我拆成 2個動畫，0-90，90-180，都不行，view 內容還是反著的，我想想，屬性都改了，顯示肯定也跟著走啊，只要過 90度 都行不啊

然後我看到著篇文章：Android自定義控制元件之翻轉按鈕，發現原來是從 0-90，-90-0。我 CAO 了，原來是負數的啊，思維定勢害死人啊，百思不得其姐的事原來這麼簡單，看來從小學的政治最常說的：解放思想，真是至理名言啊，主席誠不欺我也~

動畫程式碼

我把動畫部分抽象了一下，做成了一個輔助工具類，因為不光 textview 可以用，只要是 view 都可以用，著應該屬於 layout 動畫的範疇了吧

ps：我用 button 試了下，發現有蛋疼的陰影擴散問題，可難看了，所以這裡用 textview 代替 button

動畫輔助類：

class LayoutRotationAnimator(view: View, time: Long = 300) {

    /**
     * 畫面切換時顯示監聽器
     */
    interface IStateChangeListener {

        fun showA()

        fun showB()
    }

    // A面 = 正面
    var STATE_A: Int = 1
    // B面 = 反面
    var STATE_B: Int = -1
    // 當前在哪面
    var currentState: Int = STATE_A

    // A 面動畫
    var animatorA: ObjectAnimator
    // B 面動畫
    var animatorB: ObjectAnimator

    // 面切換時顯示變化
    lateinit var stateChangeListener: IStateChangeListener

    init {

        animatorA = ObjectAnimator.ofFloat(view, "rotationY", 0f, 90f).setDuration(time)
        animatorB = ObjectAnimator.ofFloat(view, "rotationY", -90f, 0f).setDuration(time)

        animatorA.addListener(object : Animator.AnimatorListener {

            override fun onAnimationRepeat(animation: Animator?) {
            }

            override fun onAnimationEnd(animation: Animator?) {
                view.rotationY = 0f
                changeState()
                animatorB.start()
            }

            override fun onAnimationCancel(animation: Animator?) {
            }

            override fun onAnimationStart(animation: Animator?) {
            }
        })
    }

    fun start() {
        animatorA.start()
    }

    /**
     * 畫面更新時切換顯示
     */
    private fun changeState() {
        if (currentState == STATE_A) {
            currentState = STATE_B
            stateChangeListener?.showB()
        } else {
            currentState = STATE_A
            stateChangeListener?.showA()
        }
    }

}

佈局使用：

class TextViewActivity : AppCompatActivity() {

    lateinit var layoutAnimator: LayoutRotationAnimator

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_text_view)

        layoutAnimator = LayoutRotationAnimator(btn01)
        layoutAnimator.stateChangeListener = object : LayoutRotationAnimator.IStateChangeListener {
            override fun showA() {
                btn01.setText("正面")
                btn01.setBackgroundColor(Color.BLUE)
            }

            override fun showB() {
                btn01.setText("反面")
                btn01.setBackgroundColor(Color.RED)
            }
        }

        btn01.setOnClickListener({
            layoutAnimator.start()
        })
    }

}

參考資料：

• Android自定義控制元件之翻轉按鈕