過年時候,優酷的導航欄切換出現一個效果:點擊選中的導航欄按鈕出現圖片上移的效果。感覺新鮮有意思,所以自己寫了一個小demo。直接上效果圖。
下面是代碼部分,很簡單隻用屬性動畫就可以實現:
當控件被選中時,實現下列動畫(放大,向上平移):
final ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, View.SCALE_X, 1f, 1.1f);
final ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, View.SCALE_Y, 1f, 1.1f);
final ObjectAnimator translationY = ObjectAnimator.ofFloat(view, View.TRANSLATION_Y, 0, -15);
AnimatorSet set = new AnimatorSet();
set.playTogether(scaleX, scaleY, translationY);
set.setDuration(200);
set.start();
同理,失去選中狀態的控件執行相反動畫(縮小,向下平移):
final ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, View.SCALE_X, 1.1f, 1f);
final ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, View.SCALE_Y, 1.1f, 1f);
final ObjectAnimator translationY = ObjectAnimator.ofFloat(view, View.TRANSLATION_Y, -15, 0);
這裏佈局需要特別注意:
執行動畫的控件如果在導航欄佈局內部,執行平移動畫,平移出去的部分會被導航欄覆蓋。
有什麼意見或建議請加我微信號,告訴我吧! tm1989tm
demo下載:
android導航按鈕點擊切換動畫 demo下載