1. 程式人生 > >關於在toolbar 的menu中控制元件或者menu的item做動畫的實現

關於在toolbar 的menu中控制元件或者menu的item做動畫的實現

突發奇想,突然想給toobar上面的那個掃一掃標誌做個動畫,這樣子明顯一些,

但是真的開始做了,才發現原來跟平常的view做動畫 有點不一樣。

首先是我的menu xml檔案

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

    <item
        android:id="@+id/action_capture"
        android:icon="@drawable/ic_action_scan"
        android:orderInCategory="100"
        android:title="@string/menu_capture"
        app:showAsAction="always" />

    <item
        android:id="@+id/action_about_us"
        android:orderInCategory="200"
        android:title="@string/menu_about_us"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_feedback"
        android:orderInCategory="300"
        android:title="@string/menu_feedback"
        app:showAsAction="never" />
</menu>

可以看到 主要就是那
ic_action_scan
這個 做動畫呢。那麼接下來正式開始了

我又重新建立了個layout佈局檔案,裡面就一個imageview。主要就是顯示 掃一掃圖片的

action_view.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    style="@android:style/Widget.ActionButton"
    android:layout_width="wrap_content"
    android:scaleType="centerInside"
    android:layout_height="wrap_content" />

<!-- 掃一掃動畫-->

最後就是在 activity中做動畫了
 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (mActionBarDrawerToggle != null && mActionBarDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        switch (item.getItemId()) {
            case R.id.action_capture:
                showToast("掃一掃");  
                showAnimate(item); //這裡開始動畫
                break;
            case R.id.action_about_us:
                showToast("關於我們");
                break;
            case R.id.action_feedback:
                showToast("反饋");
                break;
        }

        return super.onOptionsItemSelected(item);
    }

 /**
     * item做動畫
     *
     * @param item
     */
    private void showAnimate(MenuItem item) {
        hideAnimate();
        menuItem = item;
        //這裡使用一個ImageView設定成MenuItem的ActionView,這樣我們就可以使用這個ImageView顯示旋轉動畫了
        ImageView qrView = (ImageView) getLayoutInflater().inflate(R.layout.action_view, null);
        qrView.setImageResource(R.drawable.ic_action_scan);
        menuItem.setActionView(qrView);
        //顯示動畫
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.shake);
        animation.setRepeatMode(Animation.RESTART);
        animation.setRepeatCount(Animation.INFINITE);
        qrView.startAnimation(animation);
    }

  /**
     * 關閉動畫
     */
    private void hideAnimate() {
        if(menuItem != null){
            View view = menuItem.getActionView();
            if(view != null){
                view.clearAnimation();
                menuItem.setActionView(null);
            }
        }
    }

上面用到了2個動畫布局檔案

cycle_7.xml

<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:cycles="7" />

shake.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="0"
    android:interpolator="@anim/cycle_7"
    android:toXDelta="10" />