Android中使用抖動動畫吸引來使用者注意
阿新 • • 發佈:2019-01-31
在應用中,有時候我們要吸引使用者去點選某些按鈕,比如應用市場的推薦按鈕,為了能夠吸引使用者主動點選而且不過分的打擾使用者,最好的方法就是給我們想吸引使用者注意的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程式碼