Android學習(16)Animations_動畫
標簽: Android Animations
Android學習(16)Animations_動畫
什么是Animations:
Animations提供了一系列的動畫效果,這些效果可以作用于大多數的控件之上
Animations分為兩大類:
- Tweened Animations:該類提供了旋轉、移動、縮放、淡入淡出的動畫效果
- Frame-by-Frame Animations:該類可以創建一個Drawable序列,這些Drawable中的圖片可以按照指定時間一個一個連續顯示,就形成了動畫效果。可以制作出動圖的效果。
Animations的使用步驟
- 創建一個AnimationSet動畫集對象
- 根據需要創建相應的Animation對象
- 為Animation設置相應的數據
- 將Animation動畫放入AnimationSet中
- 給控件添加動畫并執行
Animations的分類
- Alpha:淡入淡出
- Scale:縮放
- Rotate:旋轉
- Translate:移動
1.在Activity中設置Tweened Animations
(1)在布局文件中布局五個按鈕,分別用于實現四個動畫效果和動畫的監聽
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btnAlpha"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="淡入淡出"/>
<Button
android:id="@+id/btnScale"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="縮放"/>
<Button
android:id="@+id/btnRotate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="旋轉"/>
<Button
android:id="@+id/btnTranslate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="移動"/>
<Button
android:id="@+id/btnAnLsn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="動畫的監聽"/>
</LinearLayout>
(2)在Activity中實例化動畫效果
public class AnimaionsActivity extends AppCompatActivity implements View.OnClickListener{
private Button Alpha_btn,Scale_btn,Rotate_btn,Translate_btn,AnLsn_btn;
//聲明動畫并實例化
private AlphaAnimation alpha1 = new AlphaAnimation(1,0);
private AlphaAnimation alpha2 = new AlphaAnimation(0,1);
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_animaions);
Alpha_btn = (Button)findViewById(R.id.btnAlpha);
Scale_btn = (Button)findViewById(R.id.btnScale);
Rotate_btn = (Button)findViewById(R.id.btnRotate);
Translate_btn = (Button)findViewById(R.id.btnTranslate);
AnLsn_btn = (Button)findViewById(R.id.btnAnLsn);
Alpha_btn.setOnClickListener(this);
Scale_btn.setOnClickListener(this);
Rotate_btn.setOnClickListener(this);
Translate_btn.setOnClickListener(this);
AnLsn_btn.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
//淡入淡出
case R.id.btnAlpha:
//第一步:創建animationSet動畫集對象
AnimationSet animationSet_a = new AnimationSet(true);
//第二步:創建相應的動畫
AlphaAnimation alpha = new AlphaAnimation(1,0);//從什么透明度到什么透明度
//第三步:設置動畫執行時間
alpha.setDuration(2000);
//第四步:將動畫放入動畫集中
animationSet_a.addAnimation(alpha);
//第五步:直接作用在控件之上
Alpha_btn.startAnimation(animationSet_a);
break;
//縮放
case R.id.btnScale:
AnimationSet animationSet_s = new AnimationSet(true);
//(Animation.RELATIVE_TO_PARENT)圍繞父級控件變化
//X軸從1縮放到0.1,Y軸從1縮放到0.1
//圍繞父級控件縮放,從1到0
ScaleAnimation scale = new ScaleAnimation(1,0.1f,1,0.1f,
Animation.RELATIVE_TO_PARENT,1f,Animation.RELATIVE_TO_PARENT,0);
scale.setDuration(2000);
animationSet_s.addAnimation(scale);
Scale_btn.startAnimation(animationSet_s);
break;
//旋轉
case R.id.btnRotate:
AnimationSet animationSet_r = new AnimationSet(true);
//(Animation.RELATIVE_TO_SELF)圍繞自身
//從0度旋轉到到360度
RotateAnimation rotate = new RotateAnimation(0,360,
Animation.RELATIVE_TO_SELF,0.5f,
Animation.RELATIVE_TO_SELF,0.5f);
rotate.setDuration(2000);
animationSet_r.addAnimation(rotate);
Rotate_btn.startAnimation(animationSet_r);
break;
//移動
case R.id.btnTranslate:
AnimationSet animationSet_t = new AnimationSet(true);
//X軸上從父級控件的0到父級控件的1,Y軸上從父級控件的0到父級控件的1
TranslateAnimation translate = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT,0f,
Animation.RELATIVE_TO_PARENT,1f,
Animation.RELATIVE_TO_PARENT,0f,
Animation.RELATIVE_TO_PARENT,1f
);
translate.setDuration(2000);
animationSet_t.addAnimation(translate);
Translate_btn.startAnimation(animationSet_t);
break;
//動畫的監聽
case R.id.btnAnLsn:
//設置動畫執行時間
alpha1.setDuration(2000);
alpha2.setDuration(2000);
//設置a按鈕的監聽
AnLsn_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AnLsn_btn.startAnimation(alpha1);
}
});
//動畫的監聽,當第一個動畫結束后立即執行第二個動畫
alpha1.setAnimationListener(new Animation.AnimationListener() {
//動畫開始時觸發
@Override
public void onAnimationStart(Animation animation) {
}
//動畫結束時觸發
@Override
public void onAnimationEnd(Animation animation) {
AnLsn_btn.startAnimation(alpha2);
}
//動畫重新執行時觸發
@Override
public void onAnimationRepeat(Animation animation) {
}
});
break;
}
}
}
淡入淡出效果
縮放效果
旋轉效果
移動效果
動畫的監聽
2.在XML文件中配置Tweened Animations
優點:使用方便,可重復利用
(1)新建一個文件夾anim存放動畫相關的xml
(2)在XML中創建動畫
淡入淡出動畫alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<alpha
android:fromAlpha = "1.0"
android:toAlpha = "0.0"
android:duration="2000"
android:startOffset="1000"
/>
</set>
屬性解析:
android:fromAlpha = “1.0”:從透明度1.0
android:toAlpha = “0.0”:到透明度0.0
android:duration=”2000”:變化時間2秒
android:startOffset=”1000”:延時1秒鐘后執行
縮放動畫scale.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<scale
android:duration="2000"
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1"
android:toXScale="0"
android:fromYScale="1"
android:toYScale="0"
/>
</set>
屬性解析:
android:duration=”2000”:動畫執行時間2秒
android:pivotX=”50%”:以自身X軸長度的50%為中心
android:pivotY=”50%”:以自身Y軸長度的50%為中心
android:fromXScale=”1”:X軸從坐標1開始縮放
android:toXScale=”0”:縮放到X軸的坐標0
android:fromYScale=”1”:Y軸從坐標1開始縮放
android:toYScale=”0”:縮放到Y軸的坐標0
旋轉動畫rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<rotate
android:fromDegrees = "0"
android:toDegrees="720"
android:duration="2000"
android:pivotX="50%"
android:pivotY="50%"
/>
</set>
屬性解析:
android:fromDegrees = “0”:從0度開始旋轉
android:toDegrees=”720”:旋轉720度
android:duration=”2000”:執行時間2秒
android:pivotX=”50%”:以自身X軸長度的50%為中心
android:pivotY=”50%”:以自身Y軸長度的50%為中心
移動動畫translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<translate
android:fromXDelta="0"
android:toXDelta="1000"
android:fromYDelta="0"
android:toYDelta="1000"
android:duration="2000"
/>
</set>
屬性解析:
android:fromXDelta=”0”:從X軸坐標的0位置開始移動
android:toXDelta=”1000”:移動到X軸坐標的1000位置
android:fromYDelta=”0”:從Y軸坐標的0位置開始移動
android:toYDelta=”1000”:移動到Y軸坐標的1000位置
android:duration=”2000”:執行時間2秒
(3)在布局文件中添加四個按鈕,實現四個動畫效果
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.test.androidtest.AnimationXMLActivity">
<Button
android:id="@+id/btnAlphaX"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="淡入淡出"/>
<Button
android:id="@+id/btnScaleX"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="縮放"/>
<Button
android:id="@+id/btnRotateX"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="旋轉"/>
<Button
android:id="@+id/btnTranslateX"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="移動"/>
</LinearLayout>
(4)在Activity中引入xml文件
public class AnimationXMLActivity extends AppCompatActivity implements View.OnClickListener{
private Button btn_alpha,btn_rotate,btn_scale,btn_tran;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_animation_xml);
//找到按鈕并綁定監聽
btn_alpha = (Button)findViewById(R.id.btnAlphaX);
btn_alpha.setOnClickListener(this);
btn_rotate = (Button)findViewById(R.id.btnRotateX);
btn_rotate.setOnClickListener(this);
btn_scale = (Button)findViewById(R.id.btnScaleX);
btn_scale.setOnClickListener(this);
btn_tran = (Button)findViewById(R.id.btnTranslateX);
btn_tran.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
//淡入淡出
case R.id.btnAlphaX:
//引入XML文件
Animation animation_1 = AnimationUtils.loadAnimation(
AnimationXMLActivity.this,R.anim.alpha);
//給4個組建添加動畫效果
btn_alpha.startAnimation(animation_1);
btn_rotate.startAnimation(animation_1);
btn_scale.startAnimation(animation_1);
btn_tran.startAnimation(animation_1);
break;
//旋轉
case R.id.btnRotateX:
//引入XML文件
Animation animation_2 = AnimationUtils.loadAnimation(
AnimationXMLActivity.this,R.anim.rotate);
btn_alpha.startAnimation(animation_2);
btn_rotate.startAnimation(animation_2);
btn_scale.startAnimation(animation_2);
btn_tran.startAnimation(animation_2);
break;
//縮放
case R.id.btnScaleX:
//引入XML文件
Animation animation_3 = AnimationUtils.loadAnimation(
AnimationXMLActivity.this,R.anim.scale);
btn_alpha.startAnimation(animation_3);
btn_rotate.startAnimation(animation_3);
btn_scale.startAnimation(animation_3);
btn_tran.startAnimation(animation_3);
break;
//移動
case R.id.btnTranslateX:
//引入XML文件
Animation animation_4 = AnimationUtils.loadAnimation(
AnimationXMLActivity.this,R.anim.translate);
//給組件添加動畫
btn_alpha.startAnimation(animation_4);
btn_rotate.startAnimation(animation_4);
btn_scale.startAnimation(animation_4);
btn_tran.startAnimation(animation_4);
break;
}
}
}
淡入淡出
旋轉
縮放
移動
4.在Activity中配置Frame-by-Frame Animations
(1)把要顯示的圖片放入drawable文件夾中
(2)在布局文件中添加兩個按鈕用于開始和停止動畫,添加一個ImageView顯示動畫圖片
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btnFAStart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="開始"/>
<Button
android:id="@+id/btnFAStop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="停止"/>
<ImageView
android:id="@+id/ivFA"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
(3)在Activity中設置動畫
public class FramAnimationsActivity extends AppCompatActivity implements View.OnClickListener{
//通過數組將要加載的圖片的ID存入數組frameIds[]
private int[] frameIds = new int[]{
R.drawable.anim_0010001,R.drawable.anim_0010002,R.drawable.anim_0010003,
R.drawable.anim_0010004,R.drawable.anim_0010005,R.drawable.anim_0010006,
R.drawable.anim_0010007,R.drawable.anim_0010008,R.drawable.anim_0010009,
R.drawable.anim_0010010,R.drawable.anim_0010011,R.drawable.anim_0010012,
R.drawable.anim_0010013,R.drawable.anim_0010014,R.drawable.anim_0010015,
R.drawable.anim_0010016,R.drawable.anim_0010016
};
private Button start_btn,stop_btn;
private ImageView iv;
//創建AnumationDrawable序列對象
private AnimationDrawable anim;
//資源
private Resources res;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fram_animations);
start_btn = (Button)findViewById(R.id.btnFAStart);
stop_btn = (Button)findViewById(R.id.btnFAStop);
iv = (ImageView)findViewById(R.id.ivFA);
start_btn.setOnClickListener(this);
stop_btn.setOnClickListener(this);
//獲得圖片的資源
res = getResources();
anim = new AnimationDrawable();
for (int i=0; i < 17; i++) {
//參數:圖片的資源參數,每一張圖片之間執行的間隔時間
anim.addFrame(res.getDrawable(frameIds[i]),100);
}
//加載動畫
iv.setBackgroundDrawable(anim);
//設置動畫是否可見
anim.setVisible(true,true);
//設置動畫執行一次
anim.setOneShot(false);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btnFAStart:
//開始動畫
anim.start();
break;
case R.id.btnFAStop:
//停止動畫
anim.stop();
break;
}
}
}
5.在XML中配置Frame-by-Frame Animations
在代碼中書寫以及在XML文件中配置:
創建animation-list標簽,以及標簽下的item標簽并配置其屬性
(1)創建anim_list.xml文件,加載動畫圖片
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<item
android:drawable="@drawable/anim_0010001"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010002"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010003"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010004"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010005"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010006"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010007"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010008"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010009"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010010"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010011"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010012"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010013"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010014"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010015"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010016"
android:duration="100"
/>
<item
android:drawable="@drawable/anim_0010017"
android:duration="100"
/>
</animation-list>
注意事項:
android:drawable=”@drawable/anim_0010017”:表示圖片地址
android:duration=”100”:表示圖片存在時間
(2)在布局文件中的ImageView中加載anim_list.xml中的圖品
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btnFAXStart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="開始"/>
<Button
android:id="@+id/btnFAXStop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="停止"/>
<ImageView
android:id="@+id/ivFAX"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/anim_list"/>
</LinearLayout>
(3)在Activity中獲得動畫資源,啟動或停止動畫
public class FrameAnimXmlActivity extends AppCompatActivity implements View.OnClickListener{
private ImageView iv;
//定義AnimationDrawable對象
private AnimationDrawable anim;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_frame_anim_xml);
findViewById(R.id.btnFAXStart).setOnClickListener(this);
findViewById(R.id.btnFAXStop).setOnClickListener(this);
iv = (ImageView)findViewById(R.id.ivFAX);
//通過AnimationDrawable對象獲得資源
anim = (AnimationDrawable) iv.getBackground();
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btnFAXStart:
//開啟動畫
anim.start();
break;
case R.id.btnFAXStop:
//停止動畫
anim.stop();
break;
}
}
}
聲明:
1.知識點來源于《網易云課堂》——《Android基礎****》
2.本文只用于本人自身學習記錄,如有侵權,請立即通知本人更改或刪除
智能推薦
Android動畫學習筆記
Android 動畫 補間動畫 根據不同的動畫效果,補間動畫分為4種 平移動畫 縮放動畫 旋轉動畫 透明度動畫 動畫屬性既可以在xml中設置,也可以在java代碼中寫 插值器Interpolator 簡單的來說插值器就是返回當前動畫的進度,然后根據進度設置動畫當前的效果 這是給動畫設置插值器的方法 作用 資源ID 對應Java類 動畫加速進行 @android:anim/accelerate_in...
Android 動畫學習總結
動畫是移動開發中不可或缺的一部分,要想讓用戶有不一樣的App體驗,難么就為你的App加上動畫吧! Android中動畫主要分為三種:View動畫,圖片動畫(Frame動畫,也叫幀動畫),屬性動畫。 View動畫:View動畫支持四種動畫效果,分別是位移,旋轉,縮放和透明度動畫。 幀動畫:透過順序播放一系列的圖片從而產生的動畫。 屬性動畫:API11的新特性,可以對任何Object做的動畫。 本篇主...
Android36_Animations使用(四)
一、LayoutAnimationsContrlller的使用方法 LayoutAnimationsContrlller可以用于實現使多個控件按順序一個一個的顯示。 ...
Android35_Animations使用(三)
一、AnimationSet的具體使用方法 1.AnimationSet是Animation的子類; 2.一個AnimationSet包含了一系列的Animation; &nbs...
猜你喜歡
freemarker + ItextRender 根據模板生成PDF文件
1. 制作模板 2. 獲取模板,并將所獲取的數據加載生成html文件 2. 生成PDF文件 其中由兩個地方需要注意,都是關于獲取文件路徑的問題,由于項目部署的時候是打包成jar包形式,所以在開發過程中時直接安照傳統的獲取方法沒有一點文件,但是當打包后部署,總是出錯。于是參考網上文章,先將文件讀出來到項目的臨時目錄下,然后再按正常方式加載該臨時文件; 還有一個問題至今沒有解決,就是關于生成PDF文件...
電腦空間不夠了?教你一個小秒招快速清理 Docker 占用的磁盤空間!
Docker 很占用空間,每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時,我們的磁盤空間會被大量占用。 如果你也被這個問題所困擾,咱們就一起看一下 Docker 是如何使用磁盤空間的,以及如何回收。 docker 占用的空間可以通過下面的命令查看: TYPE 列出了docker 使用磁盤的 4 種類型: Images:所有鏡像占用的空間,包括拉取下來的鏡像,和本地構建的。 Con...
requests實現全自動PPT模板
http://www.1ppt.com/moban/ 可以免費的下載PPT模板,當然如果要人工一個個下,還是挺麻煩的,我們可以利用requests輕松下載 訪問這個主頁,我們可以看到下面的樣式 點每一個PPT模板的圖片,我們可以進入到詳細的信息頁面,翻到下面,我們可以看到對應的下載地址 點擊這個下載的按鈕,我們便可以下載對應的PPT壓縮包 那我們就開始做吧 首先,查看網頁的源代碼,我們可以看到每一...