Android實現(xiàn)控件聚合動畫效果
效果展示
效果是當(dāng)切換到頁面2的時候執(zhí)行聚合動畫
實現(xiàn)步驟
1、繼承LinearLayout
因為我實現(xiàn)的效果繼承LinearLayout比較方便，這里也可以繼承其他已有的ViewGroup
public class AnimationLinearLayout extends LinearLayout {public AnimationLinearLayout(Context context) {this(context, null);}public AnimationLinearLayout(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public AnimationLinearLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}}
2、實現(xiàn)動畫
這里就是將所有的直接子控件通過循環(huán)全部執(zhí)行TranslateAnimation動畫，這里我使用動畫方式的是相對于父容器來在Y軸方向平移的
/*** 開始動畫（補間動畫）*/public void startTweenAnim(@NonNull AnimType animType){float startVal;for (int i = 0; i < getChildCount(); i++) {View childView = getChildAt(i);startVal = 0.1f + i / 20f;if(animType == AnimType.DOWN){startVal = -(0.1f + (getChildCount() - 1 - i) / 20f);}TranslateAnimation animation=new TranslateAnimation(RELATIVE_TO_PARENT,0,RELATIVE_TO_PARENT,0,RELATIVE_TO_PARENT,startVal ,RELATIVE_TO_PARENT,0);animation.setDuration(700);//設(shè)置單次動畫的重復(fù)時間animation.setFillAfter(false);//設(shè)置動畫結(jié)束后是否保持結(jié)束時的狀態(tài)，默認為falsechildView.startAnimation(animation);}}
這里定義了一個結(jié)構(gòu)體，是用來設(shè)置聚合的方向的，例如文章開頭展示的效果就是上半部分向下聚合，下半部分向下聚合實現(xiàn)的
/*** 動畫的類型*/public enum AnimType{UP,//向上DOWN//向下}
而我們向下聚合的話就是讓控件從上往下平移，所以就是Y軸方向由負的值向正值變化，即對應(yīng)如下代碼
if(animType == AnimType.DOWN){startVal = -(0.1f + (getChildCount() - 1 - i) / 20f);}
另外代碼中之所以會出現(xiàn)0.1f和i / 20f，是因為這里平移的是父容器高度的百分比，而i / 20f是為了讓距離聚合中心遠的控件直接的邊距更大，這樣更有離散聚合的效果。
3、優(yōu)化
最后為了防止在當(dāng)前動畫還未執(zhí)行完畢，又調(diào)用執(zhí)行動畫的方法，我們需要進行優(yōu)化，這里我們加了一個名為mIsRunning的標(biāo)記，另外我們還需要給最后一個子控件執(zhí)行的動畫添加監(jiān)聽事件，在最后一個動畫執(zhí)行完畢后將標(biāo)記復(fù)原
/*** 開始動畫（補間動畫）*/public void startTweenAnim(@NonNull AnimType animType){//如果正在執(zhí)行就不再執(zhí)行動畫if(mIsRunning){return;}mIsRunning = true;float startVal;for (int i = 0; i < getChildCount(); i++) {View childView = getChildAt(i);startVal = 0.1f + i / 20f;if(animType == AnimType.DOWN){startVal = -(0.1f + (getChildCount() - 1 - i) / 20f);}TranslateAnimation animation=new TranslateAnimation(RELATIVE_TO_PARENT,0,RELATIVE_TO_PARENT,0,RELATIVE_TO_PARENT,startVal ,RELATIVE_TO_PARENT,0);animation.setDuration(700);//設(shè)置單次動畫的重復(fù)時間animation.setFillAfter(false);//設(shè)置動畫結(jié)束后是否保持結(jié)束時的狀態(tài)，默認為falsechildView.startAnimation(animation);//最后一個控件的動畫添加監(jiān)聽事件if(i == getChildCount() - 1){animation.setAnimationListener(new Animation.AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {}@Overridepublic void onAnimationEnd(Animation animation) {//最后一個子控件的動畫執(zhí)行完畢了，將動畫狀態(tài)設(shè)置為沒有動畫mIsRunning = false;}@Overridepublic void onAnimationRepeat(Animation animation) {}});}}}
源碼地址：
https://gitee.com/itfitness/animatio-layout
評論
圖片
表情