剖析Android動畫(圖片閃爍、左右搖擺、上下晃動等效果)
阿新 • • 發佈:2019-02-19
圖片閃爍,類似這樣。
左右搖擺:
一、續播 (不知道取什麼名字好,就是先播放動畫A, 接著播放動畫B)
有兩種方式。
第一種,分別動畫兩個動畫,A和B, 然後先播放動畫A,設定A 的 AnimationListener。當onAnimationEnd觸發(即A播放完畢)時,開始播放B。
這邊舉一個例子,動畫A是 透明度從 0.1 到 1.0 , 動畫B是透明度從1.0到0.1, 使用下面這個動畫集你就可以看到整個變化過程。
二、迴圈
有時候,我們可能需要實現一個圖片不停閃爍的功能(比如天氣預報中的緊急警報功能), 或者有的時候我們需要實現圖片左右晃動,都需要迴圈動畫來實現。
同樣,也有兩種辦法。
第一種,設定兩個動畫A 和 B, 動畫A 是透明度 0 -1, 動畫B是1 - 0, 然後對這兩個動畫都進行監聽, A 結束執行B, B結束執行A.. 無限迴圈...
第二種,利用Animation的setRepeatCount、setRepeatMode來實現動畫迴圈。
比如閃爍(透明度亮 -> 暗, 暗->亮,如此迴圈)
alphaAnimation1.setRepeatMode(Animation.REVERSE);表示動畫結束後,反過來再執行。 該方法有兩種值, RESTART 和 REVERSE。 RESTART表示從頭開始,REVERSE表示從末尾倒播。
懶得螢幕錄影了,類似下面的效果:
再比如左右搖擺
左右搖擺:
一、續播 (不知道取什麼名字好,就是先播放動畫A, 接著播放動畫B)
有兩種方式。
第一種,分別動畫兩個動畫,A和B, 然後先播放動畫A,設定A 的 AnimationListener。當onAnimationEnd觸發(即A播放完畢)時,開始播放B。
- animation1.setAnimationListener(new Animation.AnimationListener() {
- @Override
- public void onAnimationStart(Animation animation) {
- }
- @Override
- public void onAnimationRepeat(Animation animation) {
- }
- @Override
- public void onAnimationEnd(Animation animation) {
- animation2.start();
- }
- );
這邊舉一個例子,動畫A是 透明度從 0.1 到 1.0 , 動畫B是透明度從1.0到0.1, 使用下面這個動畫集你就可以看到整個變化過程。
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android">
- <alpha
- android:fromAlpha="0.2"
- android:toAlpha="1.0"
- android:duration="3000"
- />
- <alpha
- android:startOffset="3000"
- android:fromAlpha="1.0"
- android:toAlpha="0.2"
- android:duration="3000"
- />
- </set>
二、迴圈
有時候,我們可能需要實現一個圖片不停閃爍的功能(比如天氣預報中的緊急警報功能), 或者有的時候我們需要實現圖片左右晃動,都需要迴圈動畫來實現。
同樣,也有兩種辦法。
第一種,設定兩個動畫A 和 B, 動畫A 是透明度 0 -1, 動畫B是1 - 0, 然後對這兩個動畫都進行監聽, A 結束執行B, B結束執行A.. 無限迴圈...
第二種,利用Animation的setRepeatCount、setRepeatMode來實現動畫迴圈。
比如閃爍(透明度亮 -> 暗, 暗->亮,如此迴圈)
- //閃爍
- AlphaAnimation alphaAnimation1 = new AlphaAnimation(0.1f, 1.0f);
- alphaAnimation1.setDuration(3000);
- alphaAnimation1.setRepeatCount(Animation.INFINITE);
- alphaAnimation1.setRepeatMode(Animation.REVERSE);
- iv.setAnimation(alphaAnimation1);
- alphaAnimation1.start();
alphaAnimation1.setRepeatMode(Animation.REVERSE);表示動畫結束後,反過來再執行。 該方法有兩種值, RESTART 和 REVERSE。 RESTART表示從頭開始,REVERSE表示從末尾倒播。
懶得螢幕錄影了,類似下面的效果:
再比如左右搖擺
- //搖擺
- TranslateAnimation alphaAnimation2 = new TranslateAnimation(150f, 350f, 50, 50);
- alphaAnimation2.setDuration(1000);
- alphaAnimation2.setRepeatCount(Animation.INFINITE);
- alphaAnimation2.setRepeatMode(Animation.REVERSE);
- iv.setAnimation(alphaAnimation2);
- alphaAnimation2.start();
其中 iv 是一個ImageView。
效果例子問題總結:
實驗:拖動一個view使之移動,鬆開後view會移動到固定的位置
結果:每當view回到指定位置的動畫結束後,view都會回到起始位置,於是我設定了AnimationListener,在onAnimationEnd裡調整了view的位置,但是在動畫結束的一瞬間view還是會閃動一下。
關於setFillAfter設為true的方法我也嘗試過。不會閃動,但是下一次拖拽會出現問題。
總結:
1、在onAnimationEnd里加view.clearAnimation();
2、view.clearAnimation(); 雖然不會出現閃動現象,但是如果view裡面有listView,拖動list到邊緣出現黃色高光(2.3版)會異常,黃光出現過渡不自然,就像由32位顏色變到了24位,估計是由於動畫被強制清除的原因。
解決辦法是不用view.clearAnimation(),
在onAnimationEnd里加
TranslateAnimation anim = new TranslateAnimation(0,0,0,0);
view.setAnimation(anim);
既不閃動,也不會出現list拖動黃光異常現象。
清楚動畫,然後再移動位置,這樣就不會閃爍了