Android動畫設計(基礎篇)
在android開發過程當中，咱們常常會遇到動畫的設計，這篇文章主要講述下，android動畫的基本知識。android的動畫設計可分爲逐幀動畫（frame animation）和補間動畫（tween animation）。html
#1、逐幀動畫（frame animation） 一張一張地播放圖片集，首先須要準備好各個狀態下的圖片。java
XMLandroid
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item apk:drawable="@drawable/p01" android:duration="500" />
<item apk:drawable="@drawable/p02" android:duration="500" />
<item apk:drawable="@drawable/p03" android:duration="500" />
<item apk:drawable="@drawable/p04" android:duration="500" />
<item apk:drawable="@drawable/p05" android:duration="500" />
<item apk:drawable="@drawable/p06" android:duration="500" />
</animation-list>
<!--
根標籤爲animation-list，其中oneshot表明着是否只展現一遍，設置爲false會不停的循環播放動畫
根標籤下，經過item標籤對動畫中的每個圖片進行聲明
android:duration 表示展現所用的該圖片的時間長度
-->
代碼canvas
某些環節下須要代碼來操做。函數
//徹底編碼實現的動畫效果
AnimationDrawable anim = new AnimationDrawable();
for (int i = 1; i <= 4; i++) {
//根據資源名稱和目錄獲取R.java中對應的資源ID
int id = getResources().getIdentifier("p0" + i, "drawable", getPackageName());
//根據資源ID獲取到Drawable對象
Drawable drawable = getResources().getDrawable(id);
//將此幀添加到AnimationDrawable中
anim.addFrame(drawable, 500);
}
anim.setOneShot(false); //設置爲loop
image.setBackgroundDrawable(anim); //將動畫設置爲ImageView背景
#2、補間動畫（tween animation） ###1.類別oop
| XML | Android代碼 | 說明 |
|---|---|---|
| alph | AlphaAnimation | 漸變透明度動畫效果 |
| scale | ScaleAnimation | 漸變尺寸伸縮動畫效果 |
| translate | TranslateAnimation | 轉換位置移動動畫效果 |
| rotate | RotateAnimation | 轉移旋轉動畫效果 |
###2.XML應用 alpha 漸變透明度動畫效果動畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<alpha
android:duration="1000"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
<!--
透明度控制動畫效果 alpha
浮點型值：
fromAlpha 屬性爲動畫起始時透明度
toAlpha 屬性爲動畫結束時透明度
說明:
0.0表示徹底透明
1.0表示徹底不透明
以上值取0.0-1.0之間的float數據類型的數字
長整型值：
duration 屬性爲動畫持續時間
說明:
時間以毫秒爲單位
-->
</set>
scale 漸變尺寸伸縮動畫效果this
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
android:duration="1000"
android:fillAfter="false"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.4"
android:toYScale="1.4" />
</set>
<!--
尺寸伸縮動畫效果 scale
屬性：interpolator 指定一個動畫的插入器
在我試驗過程當中，使用android.res.anim中的資源時候發現
有三種動畫插入器:
accelerate_decelerate_interpolator 加速-減速 動畫插入器
accelerate_interpolator 加速-動畫插入器
decelerate_interpolator 減速- 動畫插入器
其餘的屬於特定的動畫效果
浮點型值：
fromXScale 屬性爲動畫起始時 X座標上的伸縮尺寸
toXScale 屬性爲動畫結束時 X座標上的伸縮尺寸
fromYScale 屬性爲動畫起始時Y座標上的伸縮尺寸
toYScale 屬性爲動畫結束時Y座標上的伸縮尺寸
說明:
以上四種屬性值
0.0表示收縮到沒有
1.0表示正常無伸縮
值小於1.0表示收縮
值大於1.0表示放大
pivotX 屬性爲動畫相對於物件的X座標的開始位置
pivotY 屬性爲動畫相對於物件的Y座標的開始位置
說明:
以上兩個屬性值 從0%-100%中取值
50%爲物件的X或Y方向座標上的中點位置
長整型值：
duration 屬性爲動畫持續時間
說明: 時間以毫秒爲單位
布爾型值:
fillAfter 屬性 當設置爲true ，該動畫轉化在動畫結束後被應用
-->
translate 畫面轉換位置移動動畫效果編碼
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="2000"
android:fromXDelta="30"
android:fromYDelta="30"
android:toXDelta="-80"
android:toYDelta="300" />
<!--
translate 位置轉移動畫效果
整型值:
fromXDelta 屬性爲動畫起始時 X座標上的位置
toXDelta 屬性爲動畫結束時 X座標上的位置
fromYDelta 屬性爲動畫起始時 Y座標上的位置
toYDelta 屬性爲動畫結束時 Y座標上的位置
注意:
沒有指定fromXType toXType fromYType toYType 時候，
默認是以本身爲相對參照物
長整型值：
duration 屬性爲動畫持續時間
說明: 時間以毫秒爲單位
-->
</set>
rotate 畫面轉移旋轉動畫效果.net
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<rotate
android:duration="3000"
android:fromDegrees="0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="+350" />
<!--
rotate 旋轉動畫效果
屬性：interpolator 指定一個動畫的插入器
在我試驗過程當中，使用android.res.anim中的資源時候發現
有三種動畫插入器:
accelerate_decelerate_interpolator 加速-減速 動畫插入器
accelerate_interpolator 加速-動畫插入器
decelerate_interpolator 減速- 動畫插入器
其餘的屬於特定的動畫效果
浮點數型值:
fromDegrees 屬性爲動畫起始時物件的角度
toDegrees 屬性爲動畫結束時物件旋轉的角度 能夠大於360度
說明:
當角度爲負數——表示逆時針旋轉
當角度爲正數——表示順時針旋轉
(負數from——to正數:順時針旋轉)
(負數from——to負數:逆時針旋轉)
(正數from——to正數:順時針旋轉)
(正數from——to負數:逆時針旋轉)
pivotX 屬性爲動畫相對於物件的X座標的開始位置
pivotY 屬性爲動畫相對於物件的Y座標的開始位置
說明: 以上兩個屬性值 從0%-100%中取值
50%爲物件的X或Y方向座標上的中點位置
長整型值：
duration 屬性爲動畫持續時間
說明: 時間以毫秒爲單位
-->
</set>
應用
//第一個參數Context爲程序的上下文 //第二個參數id爲動畫XML文件的引用 public static Animation loadAnimation (Context context, int id) //例子： Animation myAnimation= AnimationUtils.loadAnimation(this, R.anim.my_anim); //使用AnimationUtils類的靜態方法loadAnimation()來加載XML中的動畫XML文件
###三、Java代碼應用 AlphaAnimation
//第一個參數fromAlpha爲 動畫開始時候透明度 //第二個參數toAlpha爲 動畫結束時候透明度 AlphaAnimation(float fromAlpha, float toAlpha) //說明:0.0表示徹底透明,1.0表示徹底不透明 Animation myAnimation_Alpha= new AlphaAnimation(0.1f, 1.0f); //設置時間持續時間爲 5000毫秒 myAnimation_Alpha.setDuration(5000);
ScaleAnimation
ScaleAnimation(float fromX, float toX, float fromY, float toY,
int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
//第一個參數fromX爲動畫起始時 X座標上的伸縮尺寸
//第二個參數toX爲動畫結束時 X座標上的伸縮尺寸
//第三個參數fromY爲動畫起始時Y座標上的伸縮尺寸
//第四個參數toY爲動畫結束時Y座標上的伸縮尺寸
/*說明:
以上四種屬性值
0.0表示收縮到沒有
1.0表示正常無伸縮
值小於1.0表示收縮
值大於1.0表示放大
*/
//第五個參數pivotXType爲動畫在X軸相對於物件位置類型
//第六個參數pivotXValue爲動畫相對於物件的X座標的開始位置
//第七個參數pivotXType爲動畫在Y軸相對於物件位置類型
//第八個參數pivotYValue爲動畫相對於物件的Y座標的開始位置
Animation myAnimation_Scale = new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
//設置時間持續時間爲 700毫秒
myAnimation_Scale.setDuration(700);
TranslateAnimation
/第一個參數fromXDelta爲動畫起始時 X座標上的移動位置 //第二個參數toXDelta爲動畫結束時 X座標上的移動位置 //第三個參數fromYDelta爲動畫起始時Y座標上的移動位置 //第四個參數toYDelta爲動畫結束時Y座標上的移動位置 TranslateAnimation(float fromXDelta, float toXDelta,float fromYDelta, float toYDelta) //設置時間持續時間爲 2000毫秒 Animation myAnimation_Translate = new TranslateAnimation(100, 100, 100, 100); myAnimation_Translate.setDuration(2000);
RotateAnimation
RotateAnimation(float fromDegrees, float toDegrees,int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) //第一個參數fromDegrees爲動畫起始時的旋轉角度 //第二個參數toDegrees爲動畫旋轉到的角度 //第三個參數pivotXType爲動畫在X軸相對於物件位置類型 //第四個參數pivotXValue爲動畫相對於物件的X座標的開始位置 //第五個參數pivotXType爲動畫在Y軸相對於物件位置類型 //第六個參數pivotYValue爲動畫相對於物件的Y座標的開始位置 Animation myAnimation_Rotate= new RotateAnimation(0.0f, +350.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f); //設置時間持續時間爲 3000毫秒 myAnimation_Rotate.setDuration(3000);
#3、注意點 1.在實際開發用過程當中，有一種需求就是要求一張圖片在勻速向上平移的過程不斷放大；原本覺得只是簡單的組合動畫，但是當兩種動畫組合時，效果每每難以控制。
/* 需求：圓形圖片在座標x=200的地方向上平移，而且在平移過程當中不斷放大到必定程度後中止縮放 */
final float maxPointY = 150f;
final float minPointY = 40f;
final float boundScaleDegrees = 0.5f;
//first circle
boolean needScale = mRotate;
currentDegrees = needScale ? mRotate : currentDegrees; //當前縮放比例
float r = mSmoke.getWidth() / 2 * currentDegrees; //當前半徑
float curPointX = mScreenWidth / 2 - 200 - r;
float curPointY = maxPointY - (maxPointY - minPointY) * mRotate;
matrix.setTranslate( curPointX, curPointY);
matrix.preScale(currentDegrees, currentDegrees);
canvas.drawBitmap( mSmoke , matrix, null);
#4、參考 1.Animation 動畫介紹和實現
4.緩動函數速查表
相關文章
- 1. Android 基礎動畫
- 2. Android 動畫基礎
- 3. jQuery基礎(四)—動畫篇
- 4. 【Android開發日記】之基礎篇（二）——Android的動畫效果
- 5. 【Android基礎知識】【Android動畫】
- 6. UI設計基礎知識點之Android設計規範篇
- 7. Java語言程序設計-基礎篇（十三）事件驅動與動畫
- 8. CSS3基礎第二篇（變形，動畫）
- 9. flash做動畫教程（基礎篇）
- 10. iOS Core Animation（核心動畫基礎篇）
- 更多相關文章...
- • 移動設備 統計 - 瀏覽器信息
- • Web 創建設計 - 網站建設指南
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
- • IntelliJ IDEA代碼格式化設置
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
