轉(zhuǎn)載注明出處：簡書-十個雨點
在UI設(shè)計中，微動效是一個挺流行的說法僚祷，恰當(dāng)?shù)氖褂脮oAPP賦予靈動的生命感出嘹。微動效可以是酷炫的動畫，也可以只是很簡單的過渡趣惠，比如下面的兩個圖。
太復(fù)雜的酷炫動畫當(dāng)然很難直接用代碼實現(xiàn)身害，但是在APP中味悄，也可以實現(xiàn)很多簡單卻生動的過渡效果。比如下面的圖就實現(xiàn)了一個平滑的過渡塌鸯，很簡單傍菇，但是確實能夠起到強調(diào)的作用：
這種簡單的效果一般都是使用屬性動畫來實現(xiàn)的。一開始我是在點擊事件中調(diào)用方法界赔，在這個方法中設(shè)置屬性動畫丢习，但是設(shè)置動畫的時候要計算動畫的各種參數(shù)，比如當(dāng)前的位置淮悼，位移的大小咐低，而這些值往往需要在onLayout中才會計算得到。那為什么不直接在onLayout中來設(shè)置屬性動畫呢袜腥？
以上圖中的動畫為例见擦，這是一個簡單的LinearLayout，包含兩個TextView羹令，上面的TextView顯示設(shè)置條目鲤屡，下面的TextView顯示設(shè)置的提示語。要實現(xiàn)圖中的動畫效果福侈，只需要修改onLayout方法酒来，如下：
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int msgTopOld=msgTv.getTop();
int hintTopOld = hintTv.getTop();
super.onLayout(changed, l, t, r, b);
int msgTopNew=msgTv.getTop();
int hintTopNew=hintTv.getTop();
if (showAnimation && showAnimationOnce) {
if (msgTopOld!=0 && msgTopNew!=msgTopOld) {
msgTv.clearAnimation();
msgTv.setY(msgTopOld);
msgTv.animate().y(msgTopNew).setDuration(300).start();
}
if (hintTopOld!=0) {
if (showHint) {
hintTv.clearAnimation();
hintTv.setY(hintTopOld);
hintTv.setAlpha(0);
hintTv.animate().y(hintTopNew).alpha(1).setDuration(300).start();
} else {
hintTv.clearAnimation();
hintTv.setY(hintTopOld);
hintTv.setAlpha(1);
hintTv.animate().y(hintTopNew).alpha(0).setDuration(300).start();
}
}
showAnimationOnce=false;
}
}
代碼很簡單，就是對發(fā)生位移的View肪凛，利用使用屬性動畫從原來的位置移動到新的位置堰汉，而新出現(xiàn)的View，則利用屬性動畫伟墙，使其慢慢浮現(xiàn)翘鸭。
這只是一個簡單的例子，以此類推可以實現(xiàn)更加復(fù)雜多變的動畫效果戳葵。
完整代碼參見Bigbang項目的HintTextView就乓、BigBangLayout、BigBangHeader類的實現(xiàn)拱烁。
最后在這里吐槽一下生蚁，國外的應(yīng)用一般都比較注重微動效這一塊，而國內(nèi)應(yīng)用會少一些邻梆。錘子手機內(nèi)的動效應(yīng)該是國內(nèi)做得最好的了吧守伸。最奇特的是，有些應(yīng)用的國外版本浦妄，反而比國內(nèi)版本的動效更好尼摹。可能是我層次還太低剂娄，看不到造成這種現(xiàn)象的原因所在...
