1.概述
其實(shí)越是形勢不好的時(shí)候越是要練習(xí)內(nèi)功，我們學(xué)會(huì)思考很重要，技術(shù)也只是技術(shù)而已钾虐。話不多說看看今天的效果：
2．效果實(shí)現(xiàn)
2.1 布局分析
可以看到上圖可分為三部分，最上面是彈跳的幾何形狀圖形妆艘，中間是陰影指示器，最下面是文字看幼，所以布局用LinearLayout批旺，最上面暫且放ImageView，中間陰影放ImageView , 最下面放玩命加載文字诵姜。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="@+id/shapeLoadingView"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="4dp" />
<ImageView
android:id="@+id/indication"
android:layout_width="23dp"
android:layout_height="3dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="82dp"
android:src="@drawable/shadow" />
<TextView
android:id="@+id/promptTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/indication"
android:layout_centerHorizontal="true"
android:layout_marginTop="18dp"
android:text="玩命加載中..."
android:textColor="#757575"
android:textSize="14sp" />
</LinearLayout>
2.2 組合控件 LoadingView 繼承自 LinearLayout
public class LoadingView extends LinearLayout{
private ImageView mShapeLodingView,mIndicationView;
private Context mContext;
public LoadingView(Context context) {
this(context, null);
}
public LoadingView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
initLayout();
}
private void initLayout() {
View.inflate(mContext, R.layout.load_view,this);
mShapeLodingView = (ShapeLoadingView) findViewById(R.id.shapeLoadingView);
mIndicationView = (ImageView) findViewById(R.id.indication);
}
}
2.3 動(dòng)畫分析
這里可以看做兩個(gè)部分的動(dòng)畫汽煮，一個(gè)是上面幾何圖形的下落上拋動(dòng)畫，一個(gè)是中間陰影指示器放大縮小的動(dòng)畫棚唆，如果能這樣組合就算實(shí)現(xiàn)了: 當(dāng)幾何圖形下落時(shí)配合陰影放大暇赤，當(dāng)幾何圖形上拋時(shí)配合中間陰影縮小。需要用到 ObjectAnimator 屬性動(dòng)畫
//初始化下落動(dòng)畫
private void initFreeFallAnimation() {
// 下落動(dòng)畫集合
mFreeFallAnimatiorSet = new AnimatorSet();
// 幾何圖形的垂直位移動(dòng)畫
ObjectAnimator freeFallTranslationAnimator = ObjectAnimator.ofFloat(
mShapeLodingView, "translationY", 0, mTranslationYDistance);
// 定義動(dòng)畫的變化率宵凌。
freeFallTranslationAnimator.setInterpolator(new AccelerateInterpolator(factor));
// 中間陰影縮小動(dòng)畫
ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(mIndicationView,
"scaleX", 1, 0.2f);
mFreeFallAnimatiorSet.setDuration(ANIMATION_DURATION);
mFreeFallAnimatiorSet.playTogether(freeFallTranslationAnimator, scaleIndication);
mFreeFallAnimatiorSet.addListener(new AnimatorListenerAdapter() {
//設(shè)置動(dòng)畫監(jiān)聽器鞋囊，監(jiān)聽該動(dòng)畫的開始、停止瞎惫、取消溜腐、結(jié)束等狀態(tài)，我們往往會(huì)用AnimtorListener適配器類來只實(shí)現(xiàn)我們需要的方法
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
// 下落動(dòng)畫結(jié)束微饥，改變形狀逗扒，然后執(zhí)行上拋動(dòng)畫
upThrow();
mShapeLodingView.changeShape();
}
});
}
上拋動(dòng)畫其實(shí)和下落動(dòng)畫差不多，只要在下落動(dòng)畫執(zhí)行完之后啟動(dòng)上拋動(dòng)畫即可欠橘，但是我們需要在下落動(dòng)畫結(jié)束完后改變形狀，最直接的方式便是改變幾何圖像 ImageView 的背景資源即可现恼，但是個(gè)人認(rèn)為這樣不是太好肃续，所以需要自定義幾何形狀 ShapeLoadingView，然后提供一個(gè) changeShape() 的方法叉袍，里面調(diào)用 invalidate()始锚，在 onDraw(Canvas canvas) 中畫對應(yīng)的幾何形狀，具體請看這里 自定義View - 仿 QQ 運(yùn)動(dòng)步數(shù)進(jìn)度效果
最后就剩兩個(gè)旋轉(zhuǎn)的動(dòng)畫了喳逛，我們旋轉(zhuǎn)的動(dòng)畫以及角度問題我們直接從自定義 ShapeLoadingView 中獲取瞧捌，提供一個(gè) getUpThrowRoteAnimation() 方法
/**
* 在ShapeLoadingView的構(gòu)造方法中初始化旋轉(zhuǎn)動(dòng)畫即可
*/
private void initRoteAnimation() {
mRectRoteAnimation = ObjectAnimator.ofFloat(this,
"rotation", 0, -120);
mDefaultRoteAnimation = ObjectAnimator.ofFloat(this,
"rotation", 0, 180);
}
/**
* 得到當(dāng)前正在上拋時(shí)應(yīng)該旋轉(zhuǎn)的動(dòng)畫
*/
public ObjectAnimator getUpThrowRoteAnimation() {
switch (mCureentShape){
case SHAPE_RECT:
return mRectRoteAnimation;
default:
return mDefaultRoteAnimation;
}
}
給上拋動(dòng)畫設(shè)置動(dòng)畫監(jiān)聽，在其 onAnimationStart() 中執(zhí)行旋轉(zhuǎn)動(dòng)畫
mUpThrowAnimatiorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//動(dòng)畫結(jié)束,下落
freeFall();
}
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
// 動(dòng)畫開始，和旋轉(zhuǎn)動(dòng)畫一起執(zhí)行
startShapeRoteAnimator();
}
/**
* 執(zhí)行旋轉(zhuǎn)動(dòng)畫
*/
private void startShapeRoteAnimator() {
ObjectAnimator roteAnimation = mShapeLodingView.getUpThrowRoteAnimation();
roteAnimation.setDuration(ANIMATION_DURATION);
roteAnimation.setInterpolator(new DecelerateInterpolator(factor));
roteAnimation.start();
}
});
2.3 優(yōu)化性能
網(wǎng)上有太多太多的 Demo 感覺都還很不錯(cuò)姐呐，但是后期檢測性能的時(shí)候其實(shí)面臨很多問題殿怜，如果某些效果不是你寫的但是性能比較差的話其實(shí)很難改，要么你特別熟悉別人的代碼要么你需要自己重新寫要么得過且過曙砂。
/**
* 采用代碼的方式添加
*
* @param parent
* @return
*/
public static LoadingView attach(ViewGroup parent) {
LoadingView loadingView = new LoadingView(parent.getContext());
loadingView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
parent.addView(loadingView);
return loadingView;
}
/**
* 優(yōu)化性能
* @param visibility
*/
@Override
public void setVisibility(int visibility) {
super.setVisibility(View.INVISIBLE);
ViewGroup parent = (ViewGroup) this.getParent();
if(parent != null){
parent.removeView(this);
mShapeView.clearAnimation();
mShadowView.clearAnimation();
this.removeAllViews();
mStopAnimator = true;
}
}
所有分享大綱：Android進(jìn)階之旅 - 自定義View篇
