1.收獲
今天我們寫了兩個demo,這兩個demo雖然不難修陡，但是也是需要我們理解的硫麻，并不是簡單我們就能夠?qū)懙膩淼芏希苍S并不是這樣的洒敏，當(dāng)我下來自己背著寫的時候才知道有的地方?jīng)]有理解龄恋，是寫不下去的。盡管自己在學(xué)的時候思路清晰桐玻，但是這并不代表你自己單獨寫的時候也是思路清晰的篙挽。所以自己還要多理解，多去寫幾遍镊靴，也許只有這樣才能在碰到相同的東西的時候铣卡，才有自己的思路和想法。
2.技術(shù)
（1）xml文件通用部分代碼的優(yōu)化
（2）平移和旋轉(zhuǎn)動畫和屬性動畫
（3）AnimationSet集合
（4）延長在容器中的控件執(zhí)行時間
3.技術(shù)的實踐和應(yīng)用
（1）xml文件通用部分代碼的優(yōu)化
當(dāng)我們在xml中配置一些圖片的時候偏竟，有時候會出現(xiàn)在配置的許多圖片的代碼中很多的屬性是一樣的煮落，那么我們?yōu)榱藘?yōu)化代碼，就可以將這些相同部分用一個xml文件裝起來踊谋。
例如：
<ImageButton
android:id="@+id/ib_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:layout_centerInParent="true"
android:src="@drawable/b" />
<ImageButton
android:id="@+id/ib_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:layout_centerInParent="true"
android:src="@drawable/c" />
<ImageButton
android:id="@+id/ib_d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:layout_centerInParent="true"
android:src="@drawable/d" />
<ImageButton
android:id="@+id/ib_e"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:layout_centerInParent="true"
android:src="@drawable/e" />
<ImageButton
android:id="@+id/ib_f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:layout_centerInParent="true"
android:src="@drawable/f" />
<ImageButton
android:id="@+id/ib_g"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:layout_centerInParent="true"
android:src="@drawable/g" />
<ImageButton
android:id="@+id/ib_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:layout_centerInParent="true"
android:src="@drawable/a" />
在此段代碼中明顯有7個控件蝉仇，在這7個空鍵的代碼中，有一部分代碼是相通的
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:layout_centerInParent="true"
于是我們就要優(yōu)化一下代碼
首先我們新建一個文件來裝這相同的屬性的代碼，當(dāng)遇到是我們直接調(diào)用這個文件就可以了
image.png
然后在這個文件中進行添加形同屬性的代碼
image.png
優(yōu)化后的代碼量：
<ImageButton
android:id="@+id/ib_b"
style="@style/ManuBottonStyle"
android:src="@drawable/b" />
<ImageButton
android:id="@+id/ib_c"
style="@style/ManuBottonStyle"
android:src="@drawable/c" />
<ImageButton
android:id="@+id/ib_d"
style="@style/ManuBottonStyle"
android:src="@drawable/d" />
<ImageButton
android:id="@+id/ib_e"
style="@style/ManuBottonStyle"
android:src="@drawable/e" />
<ImageButton
android:id="@+id/ib_f"
style="@style/ManuBottonStyle"
android:src="@drawable/f" />
<ImageButton
android:id="@+id/ib_g"
style="@style/ManuBottonStyle"
android:src="@drawable/g" />
<ImageButton
android:id="@+id/ib_a"
style="@style/ManuBottonStyle"
android:src="@drawable/a" />
（2）平移和旋轉(zhuǎn)動畫和屬性動畫
//移動的動畫
TranslateAnimation tAnim=new TranslateAnimation(0,x,0,y);
tAnim.setDuration(500);
tAnim.setFillAfter(true);
tAnim.setInterpolator(new BounceInterpolator());
//旋轉(zhuǎn)動畫
RotateAnimation rotateAnimation=new RotateAnimation(0,3*360,ib.getPivotX(),ib.getPivotY());
rotateAnimation.setDuration(500);
rotateAnimation.setFillAfter(true);
上面的旋轉(zhuǎn)和移動動畫是補間動畫轿衔，他的性質(zhì)并沒有改變沉迹，只是在我們的視覺上發(fā)生了改變。
//移動
public void test4(){
ObjectAnimator transAni=ObjectAnimator.ofFloat(v,"translationX",v.getTranslationX()+100);
transAni.setDuration(1000);
transAni.start();
}
//旋轉(zhuǎn)
public void test2(){
ObjectAnimator rotatetion=ObjectAnimator.ofFloat(v,"rotation",0,360);
rotatetion.setDuration(2000);
rotatetion.start();
}
上面的旋轉(zhuǎn)和移動動畫是補間動畫害驹，他的性質(zhì)并沒有改變鞭呕，只是在我們的視覺上發(fā)生了改變。
補間動畫（Animation）：只是視覺上的效果宛官，并沒改變他的屬性葫松，意思就是在表面上是改變了，但是他還是在原來的位置上底洗，只是在我們的視覺上發(fā)生了改變腋么。
屬性動畫(Animator)：剛好與補間動畫不同，發(fā)生改變后亥揖，就是改變后屬性珊擂，真正從屬性上發(fā)生了改變。
在我們的應(yīng)用中很少用補間動畫徐块。
image.png
屬性動畫的使用
image.png
（3）AnimationSet集合
有時候想要兩個動畫一起執(zhí)行未玻，那麼我們就可以用一個東西將這兩個動畫裝起來，而這個東西就像是一個容器胡控。
image.png
image.png
（4）延長在容器中的控件執(zhí)行時間
在動畫中扳剿，我想要有的動畫有時間差的動畫，我們我們需要將動畫延時執(zhí)行昼激。那麼我們利用者個控件在某個容器中的性質(zhì)來進行延時
image.png
4.今日demo
1.菜單動畫
效果：
錄制_2019_09_23_23_21_37_506.gif
1.添加圖片控件
<ImageButton
android:id="@+id/ib_b"
style="@style/ManuBottonStyle"
android:src="@drawable/b" />
<ImageButton
android:id="@+id/ib_c"
style="@style/ManuBottonStyle"
android:src="@drawable/c" />
<ImageButton
android:id="@+id/ib_d"
style="@style/ManuBottonStyle"
android:src="@drawable/d" />
<ImageButton
android:id="@+id/ib_e"
style="@style/ManuBottonStyle"
android:src="@drawable/e" />
<ImageButton
android:id="@+id/ib_f"
style="@style/ManuBottonStyle"
android:src="@drawable/f" />
<ImageButton
android:id="@+id/ib_g"
style="@style/ManuBottonStyle"
android:src="@drawable/g" />
<ImageButton
android:id="@+id/ib_a"
style="@style/ManuBottonStyle"
android:src="@drawable/a" />
2.將圖片添加到一個數(shù)組中庇绽，以便于進行動畫的添加
private int[] resID={R.id.ib_b,R.id.ib_c,R.id.ib_d,R.id.ib_e,R.id.ib_f,R.id.ib_g};
3.判斷當(dāng)前是打開還是關(guān)閉，進行相應(yīng)動畫的添加
private boolean isopen=false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
ImageButton menu=findViewById(R.id.ib_a);
menu.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
for(int i=0;i<resID.length;i++ ){
//判斷是打開還是關(guān)閉
if(isopen==true){
close(i);
}else{
open(i);
}
}
isopen=!isopen;
}
});
}
public void open(int i){
//計算平分之后兩個之間的角度
double angle=(2*Math.PI/(resID.length));
//獲取id相應(yīng)的控件
ImageButton ib=findViewById(resID[i]);
//計算當(dāng)前空間的角度
double mangle=(i+1)*angle;
//計算x的距離
float x=(float)Math.cos(-mangle)*400;
//計算y的距離
float y=(float)Math.sin(-mangle)*400;
//移動的動畫
TranslateAnimation tAnim=new TranslateAnimation(0,x,0,y);
tAnim.setDuration(500);
tAnim.setFillAfter(true);
tAnim.setInterpolator(new BounceInterpolator());
//旋轉(zhuǎn)動畫
RotateAnimation rotateAnimation=new RotateAnimation(0,3*360,ib.getPivotX(),ib.getPivotY());
rotateAnimation.setDuration(500);
rotateAnimation.setFillAfter(true);
//創(chuàng)建一個AnimationSet集合 包裹多個動畫
AnimationSet set=new AnimationSet(false);
set.addAnimation(rotateAnimation);
set.addAnimation(tAnim);
set.setFillAfter(true);
//開始動畫
ib.startAnimation(set);
}
public void close(int i){
//計算平分之后兩個之間的角度
double angle=(2*Math.PI/(resID.length));
//獲取id相應(yīng)的控件
ImageButton ib=findViewById(resID[i]);
//計算當(dāng)前空間的角度
double mangle=(i+1)*angle;
//計算x的距離
float x=(float)Math.cos(-mangle)*400;
//計算y的距離
float y=(float)Math.sin(-mangle)*400;
//移動的動畫
TranslateAnimation tAnim=new TranslateAnimation(x,0,y,0);
//tAnim.setDuration(500);
//tAnim.setFillAfter(true);
//tAnim.setInterpolator(new BounceInterpolator());
//旋轉(zhuǎn)動畫
RotateAnimation rotateAnimation=new RotateAnimation(0,3*360,
ib.getPivotX(),ib.getPivotY());
//rotateAnimation.setDuration(500);
//rotateAnimation.setInterpolator(new BounceInterpolator());
//rotateAnimation.setFillAfter(true);
//創(chuàng)建一個AnimationSet集合 包裹多個動畫
AnimationSet set=new AnimationSet(false);
set.addAnimation(rotateAnimation);
set.addAnimation(tAnim);
set.setInterpolator(new BounceInterpolator());
set.setFillAfter(true);
//開始動畫
ib.startAnimation(set);
}
public void animate(int i,boolean state){
}
2.半旋轉(zhuǎn)動畫
效果：
錄制_2019_09_24_00_11_51_635.gif
1.添加圖片控件
<RelativeLayout
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@drawable/level1"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
>
<ImageButton
android:id="@+id/ib_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_home"
android:background="@null"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/ib_level2"
android:layout_width="200dp"
android:layout_height="100dp"
android:background="@drawable/level2"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<ImageButton
android:id="@+id/ib_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_menu"
android:background="@null"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_search"
android:background="@null"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_myyouku"
android:background="@null"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="5dp"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/ib_level3"
android:layout_width="300dp"
android:layout_height="150dp"
android:background="@drawable/level3"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel1"
android:background="@null"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel2"
android:background="@null"
android:layout_marginLeft="25dp"
android:layout_marginTop="60dp"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel3"
android:background="@null"
android:layout_marginLeft="60dp"
android:layout_marginTop="20dp"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel4"
android:background="@null"
android:layout_centerHorizontal="true"
android:layout_marginTop="2dp"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel5"
android:background="@null"
android:layout_alignParentRight="true"
android:layout_marginRight="60dp"
android:layout_marginTop="20dp"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel6"
android:background="@null"
android:layout_alignParentRight="true"
android:layout_marginRight="25dp"
android:layout_marginTop="60dp"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel7"
android:background="@null"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="5dp"/>
</RelativeLayout>
2.在此動畫中有兩種動畫橙困，一個是旋轉(zhuǎn)入瞧掺，一個是旋轉(zhuǎn)出，那么我們用兩個xml文件配置
旋轉(zhuǎn)入
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:duration="1000">
<rotate android:fromDegrees="180" android:toDegrees="0" android:pivotX="50%" android:pivotY="100%"/>
</set>
旋轉(zhuǎn)出
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:duration="1000">
<rotate android:fromDegrees="0" android:toDegrees="-180" android:pivotX="50%" android:pivotY="100%"/>
</set>
3.加載榮容器凡傅，因為我們再旋轉(zhuǎn)的是后是旋轉(zhuǎn)的是容器辟狈，而不是單個的控件，找到需要被點擊的控件
//加載容器
level3=findViewById(R.id.ib_level3);
level2=findViewById(R.id.ib_level2);
//menu按鈕
ImageButton menu=findViewById(R.id.ib_menu);
ImageButton home=findViewById(R.id.ib_home);
//添加點擊事件
menu.setOnClickListener(this);
home.setOnClickListener(this);
4.判斷當(dāng)前控件的狀態(tài)夏跷，是需要轉(zhuǎn)出還是轉(zhuǎn)入
@Override
public void onClick(View view){
switch (view.getId()){
case R.id.ib_menu:
if(islevel3open){
//關(guān)閉
closelevel(level3,0);
}else{
//打開
openlevel(level3);
}
//改變狀態(tài)
islevel3open=!islevel3open;
break;
case R.id.ib_home:
if(islevel3open){
//關(guān)閉第三層
closelevel(level3,0);
islevel3open=!islevel3open;
}
if(islevel2open){
//關(guān)閉第二層
closelevel(level2,200);
}else{
openlevel(level2);
}
islevel2open=!islevel2open;
break;
default:
break;
}
}
public void openlevel(RelativeLayout rl){
Animation in=AnimationUtils.loadAnimation(this,R.anim.rotate_in);
rl.startAnimation(in);
//子控件可點擊
changeState(rl,true);
}
public void closelevel(RelativeLayout rl,long delay){
Animation out=AnimationUtils.loadAnimation(this,R.anim.rotate_out);
out.setStartOffset(delay);
rl.startAnimation(out);
//子控件不可點擊
changeState(rl,false);
}
public void changeState(RelativeLayout rl,boolean enable){
//遍歷容器的子控件
//1.獲取子控件的個數(shù)
int count=rl.getChildCount();
//2.遍歷子控件
for(int i=0;i<count;i++){
View view=rl.getChildAt(i);
//設(shè)置子控件的狀態(tài)
view.setEnabled(enable);
}
}
