1. 程式人生 > >Android中使用抖動動畫吸引來使用者注意

Android中使用抖動動畫吸引來使用者注意

在應用中,有時候我們要吸引使用者去點選某些按鈕,比如應用市場的推薦按鈕,為了能夠吸引使用者主動點選而且不過分的打擾使用者,最好的方法就是給我們想吸引使用者注意的view新增一些抖動動畫,比如這張圖

這裡我主要實現了兩種抖動動畫,左右抖動和上下抖動。左右抖動通常用於表單驗證失敗的時候,上下抖動通常用於吸引用於使用者去點選。動畫主要使用了Keyframe和PropertyValuesHolder。
Keyframe是一個時間/值對,用於定義在某個時刻動畫的狀態。比如Keyframe.ofInt(.5f, Color.RED)定義了當動畫進行了50%的時候,顏色的值應該是Color.RED。
PropertyValuesHolder儲存了view的屬性的資訊以及在動畫進行過程中該屬性的值。通過PropertyValuesHolder.ofKeyframe方法來構建PropertyValuesHolder的例項,改方法接收一個屬性名以及多個Keyframe物件作為引數。當你想通過動畫改變多個屬性的時候PropertyValuesHolder就非常有用。
直接上程式碼:
tada方法實現了上下抖動。抖動的原理很簡單,就是對view的x軸和y軸進行0.9倍到1.1倍的縮放,同時對view進行一定角度的上下旋轉。

public static ObjectAnimator tada(View view) {
    return tada(view, 1f);
}

public static ObjectAnimator tada(View view, float shakeFactor) {

    PropertyValuesHolder pvhScaleX = PropertyValuesHolder.ofKeyframe(View.SCALE_X,
            Keyframe.ofFloat(0f, 1f),
            Keyframe.ofFloat(.1f, .9f),
            Keyframe.ofFloat(.2f, .9f),
            Keyframe.ofFloat(.3f, 1.1f),
            Keyframe.ofFloat(.4f, 1.1f),
            Keyframe.ofFloat(.5f, 1.1f),
            Keyframe.ofFloat(.6f, 1.1f),
            Keyframe.ofFloat(.7f, 1.1f),
            Keyframe.ofFloat(.8f, 1.1f),
            Keyframe.ofFloat(.9f, 1.1f),
            Keyframe.ofFloat(1f, 1f)
    );

    PropertyValuesHolder pvhScaleY = PropertyValuesHolder.ofKeyframe(View.SCALE_Y,
            Keyframe.ofFloat(0f, 1f),
            Keyframe.ofFloat(.1f, .9f),
            Keyframe.ofFloat(.2f, .9f),
            Keyframe.ofFloat(.3f, 1.1f),
            Keyframe.ofFloat(.4f, 1.1f),
            Keyframe.ofFloat(.5f, 1.1f),
            Keyframe.ofFloat(.6f, 1.1f),
            Keyframe.ofFloat(.7f, 1.1f),
            Keyframe.ofFloat(.8f, 1.1f),
            Keyframe.ofFloat(.9f, 1.1f),
            Keyframe.ofFloat(1f, 1f)
    );

    PropertyValuesHolder pvhRotate = PropertyValuesHolder.ofKeyframe(View.ROTATION,
            Keyframe.ofFloat(0f, 0f),
            Keyframe.ofFloat(.1f, -3f * shakeFactor),
            Keyframe.ofFloat(.2f, -3f * shakeFactor),
            Keyframe.ofFloat(.3f, 3f * shakeFactor),
            Keyframe.ofFloat(.4f, -3f * shakeFactor),
            Keyframe.ofFloat(.5f, 3f * shakeFactor),
            Keyframe.ofFloat(.6f, -3f * shakeFactor),
            Keyframe.ofFloat(.7f, 3f * shakeFactor),
            Keyframe.ofFloat(.8f, -3f * shakeFactor),
            Keyframe.ofFloat(.9f, 3f * shakeFactor),
            Keyframe.ofFloat(1f, 0)
    );

    return ObjectAnimator.ofPropertyValuesHolder(view, pvhScaleX, pvhScaleY, pvhRotate).
            setDuration(1000);
}

nope方法實現了左右抖動。左右抖動的原理就是對view進行x軸的平移。
public static ObjectAnimator nope(View view) {
    int delta = view.getResources().getDimensionPixelOffset(R.dimen.spacing_medium);

    PropertyValuesHolder pvhTranslateX = PropertyValuesHolder.ofKeyframe(View.TRANSLATION_X,
            Keyframe.ofFloat(0f, 0),
            Keyframe.ofFloat(.10f, -delta),
            Keyframe.ofFloat(.26f, delta),
            Keyframe.ofFloat(.42f, -delta),
            Keyframe.ofFloat(.58f, delta),
            Keyframe.ofFloat(.74f, -delta),
            Keyframe.ofFloat(.90f, delta),
            Keyframe.ofFloat(1f, 0f)
    );

    return ObjectAnimator.ofPropertyValuesHolder(view, pvhTranslateX).
            setDuration(500);
}

github程式碼