1.1幀動畫概念以及用法
幀動畫非常容易理解,其實就是簡單的由N張靜態圖片收集起來,然后我們通過控制依次顯示 這些圖片,因為人眼"視覺殘留"的原因,會讓我們造成動畫的"錯覺",跟放電影的原理一樣!
從本節開始我們來探究Android中的動畫,畢竟在APP中添加上一些動畫,會讓我們的應用變得 很炫,比如最簡單的關開Activity,當然自定義控件動畫肯定必不可少啦~而Android中的動畫 分為三大類,逐幀動畫(Frame)以及補間動畫(Tween),還有Android 3.0以后引入的屬性動畫 (Property),而本節給大家帶來的是第一種動畫——逐幀動畫的一個基本使用~
1.2使用示例:
示例一:最簡單的例子:
運行效果圖:
代碼實現:
首先編寫我們的動畫文件,非常簡單,先在res下創建一個anim目錄,接著開始擼我們的 動畫文件:miao_gif.xml: 這里的android:oneshot是設置動畫是否只是播放一次,true只播放一次,false循環播放!
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item
android:drawable="@mipmap/img_miao1"
android:duration="80" />
<item
android:drawable="@mipmap/img_miao2"
android:duration="80" />
<item
android:drawable="@mipmap/img_miao3"
android:duration="80" />
<!--限于篇幅,省略其他item,自己補上-->
...
</animation-list>
動畫文件有了,接著到我們的布局文件:activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="開始" />
<Button
android:id="@+id/btn_stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="停止" />
<ImageView
android:id="@+id/img_show"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:background="@anim/miao_gif" />
</LinearLayout>
最后是我們的MainActivity.java,這里在這里控制動畫的開始以及暫停:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button btn_start;
private Button btn_stop;
private ImageView img_show;
private AnimationDrawable anim;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bindViews();
anim = (AnimationDrawable) img_show.getBackground();
}
private void bindViews() {
btn_start = (Button) findViewById(R.id.btn_start);
btn_stop = (Button) findViewById(R.id.btn_stop);
img_show = (ImageView) findViewById(R.id.img_show);
btn_start.setOnClickListener(this);
btn_stop.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_start:
anim.start();
break;
case R.id.btn_stop:
anim.stop();
break;
}
}
}
2.1補間動畫簡介
本節帶來的是Android三種動畫中的第二種——補間動畫(Tween),和前面學的幀動畫不同,幀動畫 是通過連續播放圖片來模擬動畫效果,而補間動畫開發者只需指定動畫開始,以及動畫結束"關鍵幀", 而動畫變化的"中間幀"則由系統計算并補齊!好了,開始本節學習~
2.2補間動畫的分類和Interpolator
Andoird所支持的補間動畫效果有如下這五種,或者說四種吧,第五種是前面幾種的組合而已~
AlphaAnimation:透明度漸變效果,創建時許指定開始以及結束透明度,還有動畫的持續 時間,透明度的變化范圍(0,1),0是完全透明,1是完全不透明;對應<alpha/>標簽!
ScaleAnimation:縮放漸變效果,創建時需指定開始以及結束的縮放比,以及縮放參考點, 還有動畫的持續時間;對應<scale/>標簽!
TranslateAnimation:位移漸變效果,創建時指定起始以及結束位置,并指定動畫的持續 時間即可;對應<translate/>標簽!
RotateAnimation:旋轉漸變效果,創建時指定動畫起始以及結束的旋轉角度,以及動畫 持續時間和旋轉的軸心;對應<rotate/>標簽
AnimationSet:組合漸變,就是前面多種漸變的組合,對應<set/>標簽
2.3在開始講解各種動畫的用法之前,我們先要來講解一個東西:Interpolator
用來控制動畫的變化速度,可以理解成動畫渲染器,當然我們也可以自己實現Interpolator 接口,自行來控制動畫的變化速度,而Android中已經為我們提供了五個可供選擇的實現類:
LinearInterpolator:動畫以均勻的速度改變
AccelerateInterpolator:在動畫開始的地方改變速度較慢,然后開始加速
AccelerateDecelerateInterpolator:在動畫開始、結束的地方改變速度較慢,中間時加速
CycleInterpolator:動畫循環播放特定次數,變化速度按正弦曲線改變: Math.sin(2 * mCycles * Math.PI * input)
DecelerateInterpolator:在動畫開始的地方改變速度較快,然后開始減速
AnticipateInterpolator:反向,先向相反方向改變一段再加速播放
AnticipateOvershootInterpolator:開始的時候向后然后向前甩一定值后返回最后的值
BounceInterpolator: 跳躍,快到目的值時值會跳躍,如目的值100,后面的值可能依次為85,77,70,80,90,100
OvershottInterpolator:回彈,最后超出目的值然后緩慢改變到目的值
而這個東東,我們一般是在寫動畫xml文件時會用到,屬性是:android:interpolator, 而上面對應的值是:@android:anim/linear_interpolator,其實就是駝峰命名法變下劃線而已 AccelerateDecelerateInterpolator對應:@android:anim/accelerate_decelerate_interpolator!
2.4各種動畫的詳細講解
1)AlphaAnimation(透明度漸變)
新建一個文件夾anim,創建anim_alpha.xml:文件
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromAlpha="1.0"
android:toAlpha="0.1"
android:duration="2000"/>
屬性解釋:
fromAlpha :起始透明度
toAlpha:結束透明度
透明度的范圍為:0-1,完全透明-完全不透明
2)ScaleAnimation(縮放漸變)
anim_scale.xml:
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromXScale="0.2"
android:toXScale="1.5"
android:fromYScale="0.2"
android:toYScale="1.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"/>
屬性解釋:
fromXScale/fromYScale:沿著X軸/Y軸縮放的起始比例
toXScale/toYScale:沿著X軸/Y軸縮放的結束比例
pivotX/pivotY:縮放的中軸點X/Y坐標,即距離自身左邊緣的位置,比如50%就是以圖像的 中心為中軸點
3)TranslateAnimation(位移漸變)
anim_translate.xml:
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="0"
android:toXDelta="320"
android:fromYDelta="0"
android:toYDelta="0"
android:duration="2000"/>
屬性解釋:
fromXDelta/fromYDelta:動畫起始位置的X/Y坐標
toXDelta/toYDelta:動畫結束位置的X/Y坐標
4)RotateAnimation(旋轉漸變)
anim_rotate.xml:
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromDegrees="0"
android:toDegrees="360"
android:duration="1000"
android:repeatCount="1"
android:repeatMode="reverse"/>
屬性解釋:
fromDegrees/toDegrees:旋轉的起始/結束角度
repeatCount:旋轉的次數,默認值為0,代表一次,假如是其他值,比如3,則旋轉4次 另外,值為-1或者infinite時,表示動畫永不停止
repeatMode:設置重復模式,默認restart,但只有當repeatCount大于0或者infinite或-1時 才有效。還可以設置成reverse,表示偶數次顯示動畫時會做方向相反的運動!
5)AnimationSet(組合漸變)
非常簡單,就是前面幾個動畫組合到一起而已~
anim_set.xml:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:shareInterpolator="true" >
<scale
android:duration="2000"
android:fromXScale="0.2"
android:fromYScale="0.2"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5" />
<rotate
android:duration="1000"
android:fromDegrees="0"
android:repeatCount="1"
android:repeatMode="reverse"
android:toDegrees="360" />
<translate
android:duration="2000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="320"
android:toYDelta="0" />
<alpha
android:duration="2000"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>
好噠,接著到我們的MainActivity.java,同樣非常簡單,只需調用AnimationUtils.loadAnimation() 加載動畫,然后我們的View控件調用startAnimation開啟動畫即可~
這里只貼一下主要實現方法
public void onClick(View v) {
switch (v.getId()){
case R.id.btn_alpha:
animation = AnimationUtils.loadAnimation(this,
R.anim.anim_alpha);
img_show.startAnimation(animation);
break;
case R.id.btn_scale:
animation = AnimationUtils.loadAnimation(this,
R.anim.anim_scale);
img_show.startAnimation(animation);
break;
case R.id.btn_tran:
animation = AnimationUtils.loadAnimation(this,
R.anim.anim_translate);
img_show.startAnimation(animation);
break;
case R.id.btn_rotate:
animation = AnimationUtils.loadAnimation(this,
R.anim.anim_rotate);
img_show.startAnimation(animation);
break;
case R.id.btn_set:
animation = AnimationUtils.loadAnimation(this,
R.anim.anim_set);
img_show.startAnimation(animation);
break;
}
Animation animation= AnimationUtils.loadAnimation(this,實現的xml)
imageview.sstartAnimation(animation)
即可實現
3.動畫狀態的監聽
我們可以對動畫的執行狀態進行監聽,調用動畫對象的:
setAnimationListener(new AnimationListener())方法,重寫下面的三個方法:
onAnimationStart():動畫開始
onAnimtaionRepeat():動畫重復
onAnimationEnd():動畫結束
即可完成動畫執行狀態的監聽~
4.為View動態設置動畫效果
先調用AnimationUtils.loadAnimation(動畫xml文件),然后View控件調用**startAnimation(anim) **開始動畫~這是靜態加載的方式,當然你也可以直接創建一個動畫對象,用Java代碼完成設置,再調用 startAnimation開啟動畫~