當(dāng)前位置：首頁 >

Android 动画机制与使用技巧

發(fā)布時間：2025/3/21 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 Android 动画机制与使用技巧小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

動畫效果一直是人機交互中非常重要的部分，與死板、突兀的顯示效果不同，動畫效果的加入，讓交互變得更加友好，特別是在提示、引導(dǎo)類的場景中，合理地使用動畫能讓用戶獲得更加愉悅的使用體驗

一、Android View動畫框架

Animation框架定義了透明度、旋轉(zhuǎn)、縮放、位移等幾種常見的動畫
實現(xiàn)原理：
- 每次繪制View時，ViewGroup中的drawChild函數(shù)獲取該view的Animation的Transformation值，然后調(diào)用canvas.concat(transformToApply.getMatrix())
- 通過矩陣運算完成幀動畫，如果動畫沒有完成，就繼續(xù)調(diào)用invalidate() 函數(shù)，啟動下次繪制來驅(qū)動動畫，從而完成整個動畫的繪制。

二、幀動畫

幀動畫就是一張張圖片不同的切換，形成的動畫效果。
一般手機的開機動畫，應(yīng)用的等待動畫等都是幀動畫，因為只需要幾張圖片輪播，極其節(jié)省資源，如果真的設(shè)計成動畫，那么是很耗費資源的事。
在res目錄下新建一個drawable文件夾并定義xml文件，子節(jié)點為 animation-list,在這里定義要顯示的圖片和每張圖片的顯示時長。

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"><item android:drawable="@drawable/g1" android:duration="200" /><item android:drawable="@drawable/g2" android:duration="200" /><item android:drawable="@drawable/g3" android:duration="200" /><item android:drawable="@drawable/g4" android:duration="200" /><item android:drawable="@drawable/g5" android:duration="200" /><item android:drawable="@drawable/g6" android:duration="300" /><item android:drawable="@drawable/g7" android:duration="400" /><item android:drawable="@drawable/g8" android:duration="500" /><item android:drawable="@drawable/g9" android:duration="200" /><item android:drawable="@drawable/g10" android:duration="200" /><item android:drawable="@drawable/g11" android:duration="200" /></animation-list>

在屏幕上播放幀動畫，需要布局文件有一個ImageView來顯示動畫圖片

public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ImageView iv = (ImageView) findViewById(R.id.iv);//把動畫文件設(shè)置為imageView的背景iv.setBackgroundResource(R.drawable.frameanimation);AnimationDrawable ad = (AnimationDrawable) iv.getBackground();//播放動畫ad.start();} }

三、補間動畫（視圖動畫）

組件由原始狀態(tài)向終極狀態(tài)轉(zhuǎn)變時，為了讓過渡更自然，而自動生成的動畫叫做補間動畫。
主要是在Android 3.0之前
最大的缺陷就是不具備交互性
位移、旋轉(zhuǎn)、縮放、透明

public class MainActivity extends Activity {private ImageView iv;private TranslateAnimation ta;private RotateAnimation ra;private ScaleAnimation sa;private AlphaAnimation aa;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);iv = (ImageView) findViewById(R.id.iv);}//位移動畫public void translate(View v){//創(chuàng)建位移動畫的對象，設(shè)置動畫的初始位置和結(jié)束位置//10,100表示，從imageview的真實坐標(biāo)的左上角 x+10,移動到 x+100的位置//20,200表示，從imageview的真實坐標(biāo)的左上角 y+20,移動到 y+200的位置//ta = new TranslateAnimation(10, 100, 20, 200);//Animation.RELATIVE_TO_SELF相對于自己//對于x,表示，相對于自己，起點是 imageview的真是坐標(biāo)的左上角 x+ 0.5*iv的寬度到 x+ 2*iv的寬度//y 就是乘以 iv 的高度，也可以相對于父控件，但是用的比較少ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 2,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 2);//設(shè)置播放時間ta.setDuration(2000);//設(shè)置重復(fù)次數(shù)，播放一次，重復(fù)一次ta.setRepeatCount(1);//設(shè)置重復(fù)放的模式ta.setRepeatMode(Animation.REVERSE);//動畫播放完畢后，組件停留在動畫結(jié)束的位置上ta.setFillAfter(true);//播放動畫iv.startAnimation(ta);}//旋轉(zhuǎn)動畫public void rotate(View v){//20表示開始的角度，180表示結(jié)束的角度，默認(rèn)的旋轉(zhuǎn)圓心在iv左上角//ra = new RotateAnimation(20, 180);//指定圓心坐標(biāo)，相對于自己， iv真實的坐標(biāo)左上角 x+ 0.5*iv寬度， y+0.5*iv高度ra = new RotateAnimation(20, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);ra.setDuration(2000);ra.setRepeatCount(1);ra.setRepeatMode(Animation.REVERSE);iv.startAnimation(ra);}//縮放動畫public void scale(View v){//sa = new ScaleAnimation(fromX, toX, fromY, toY);//改變縮放的中心點，相對于自己的中心坐標(biāo)，iv的真是坐標(biāo)左上角 x+0.5*iv寬度， y+0.5*iv高度sa = new ScaleAnimation(0.5f, 2, 0.1f, 3, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);sa.setDuration(2000);sa.setRepeatCount(1);sa.setRepeatMode(Animation.REVERSE);iv.startAnimation(sa);}//透明動畫public void alpha(View v){//0為完全透明，1為完全透明aa = new AlphaAnimation(0, 1);aa.setDuration(2000);aa.setRepeatCount(1);aa.setRepeatMode(Animation.REVERSE);iv.startAnimation(aa);}//所有動畫一起飛public void fly(View v){//創(chuàng)建動畫集合 false表示每個動畫的時間校準(zhǔn)有動畫自己決定， true表示有動畫集合決定AnimationSet set = new AnimationSet(false);set.addAnimation(aa);set.addAnimation(ra);set.addAnimation(sa);set.addAnimation(ta);iv.startAnimation(set);}}

四、屬性動畫

補間動畫，只是一個動畫效果，組件其實還在原來的位置上，xy沒有改變。
屬性動畫是組件的位置發(fā)生了真實的改變，而且在動畫的過程中組件的位置是實時改變的，可以相應(yīng)組件事件。
使用最多的就是 AnimatorSet和ObjectAnimator配合：
- 使用ObjectAnimator進(jìn)行更精細(xì)化控制，只控制一個對象的一個屬性值
- 使多個ObjectAnimator組合到AnimatorSet形成一個動畫
ObjectAnimator可以自動驅(qū)動：
- 調(diào)用setFrameDelay()設(shè)置動畫幀之間的間隙時間，調(diào)整幀率，減少動畫繪制過程中頻繁繪制，在不影響動畫效果的情況下減少CPU資源消耗
屬性動畫基本可以實現(xiàn)左右動畫
但是View的該屬性一定要具有 set和get 方法

1.ObjectAnimator

內(nèi)部是通過反射機制實現(xiàn)的，所以該屬性一定要具有 set和get方法
一些常用的可以直接使用的屬性：
- translationX 和translationY：控制View從父容器的左上角的偏移
- rotation、rotationX、rotationY ：控制View圍繞 “支點”進(jìn)行2D和3D旋轉(zhuǎn)
- scaleX、scaleY : 控制View圍繞 “支點”進(jìn)行2D縮放
- pivotX、pivotY : 控制View的“支點”位置，默認(rèn)為View的中心點
- x、y : 這兩個屬性描述了View對象在父容器中的最終位置，它是最初左上角坐標(biāo)和translationX 、translationY值的累計和
- alpha ：透明度

public class MainActivity extends Activity {private ImageView iv;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);iv = (ImageView) findViewById(R.id.iv);iv.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "點不到我", 0).show();}});}public void translate(View v){//target：動畫作用于哪個組件//protertyName指定要改變組件的哪個屬性， //屬性動畫是真正的改變組件的屬性的，每個組件對應(yīng)一個java類，所以，protertyName是指組件Java類中具有g(shù)et,set方法的成員變量//iv.setXXX//values 是可變參數(shù)，就是賦予屬性的新的值，可以往回走 //ObjectAnimator oa = ObjectAnimator.ofFloat(target, propertyName, values);ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX", 10, 70, 20, 100);oa.setDuration(2000);oa.setRepeatCount(1);oa.setRepeatMode(ValueAnimator.REVERSE);oa.start();}public void scale(View v){ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"scaleX", 1, 1.6f, 1.2f, 2);oa.setDuration(2000);oa.start();}public void alpha(View v){ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "alpha", 0, 0.6f, 0.2f, 1);oa.setDuration(2000);oa.start();}public void rotate(View v){ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "rotationY", 0, 180, 90, 360);oa.setDuration(2000);oa.setRepeatCount(1);oa.setRepeatMode(ValueAnimator.REVERSE);oa.start();}public void fly(View v){AnimatorSet set = new AnimatorSet();ObjectAnimator oa1 = ObjectAnimator.ofFloat(iv, "translationX", 10, 70, 20, 100);oa1.setDuration(2000);oa1.setRepeatCount(1);oa1.setRepeatMode(ValueAnimator.REVERSE);ObjectAnimator oa2 = ObjectAnimator.ofFloat(iv, "translationY", 10, 70, 20, 100);oa2.setDuration(2000);oa2.setRepeatCount(1);oa2.setRepeatMode(ValueAnimator.REVERSE);ObjectAnimator oa3 = ObjectAnimator.ofFloat(iv, "scaleX", 1, 1.6f, 1.2f, 2);oa3.setDuration(2000);oa3.setRepeatCount(1);oa3.setRepeatMode(ValueAnimator.REVERSE);ObjectAnimator oa4 = ObjectAnimator.ofFloat(iv, "rotation", 0, 180, 90, 360);oa4.setDuration(2000);oa4.setRepeatCount(1);oa4.setRepeatMode(ValueAnimator.REVERSE);//設(shè)置挨個飛//set.playSequentially(oa1, oa2, oa3, oa4);//設(shè)置一起飛set.playTogether(oa1, oa2, oa3, oa4);set.start();}//使用xml文件配置屬性動畫public void xml(View v){//加載屬性動畫文件Animator animator = AnimatorInflater.loadAnimator(this, R.animator.objanimator);//設(shè)置作用于哪個組件animator.setTarget(iv);animator.start();} }

可以用xml配置屬性動畫只需要在res目錄下創(chuàng)建一個property animator屬性動畫文件

2. 如果屬性沒有set 和 get方法的解決方法

方案一：通過自定義一個屬性類或者包裝類，類間接的給這個屬性增加 get、set方法

/*** Created at: 2016/8/5 14:21.* by author: mwp* 描述：使用屬性動畫時，給沒有set和get方法的屬性包裝工具*/ public class WrapperView {private View mTarget;public WrapperView(View target) {this.mTarget = target;}/**包裝寬度屬性*/public int getWidth(){return mTarget.getLayoutParams().width;}public void setWidth(int width){mTarget.getLayoutParams().width = width;mTarget.requestLayout();}//使用方法public void use(){WrapperView wrapper = new WrapperView(mButton);ObjectAnimator.ofInt(wrapper,"width",500).setDuration(5000).start();}}

方案二：通過ValueAnimator實現(xiàn)

3. ValueAnimator(值動畫)

ObjectAnimator 也是集成自ValueAnimator
ValueAnimator本身不提供任何動畫效果，它更像一個數(shù)值發(fā)生器，用來產(chǎn)生具有一定規(guī)律的數(shù)字，調(diào)用者通過這個過程來執(zhí)行自己特定的動畫邏輯

ValueAnimator animator = ValueAnimator.ofInt(0,100); animator.setTarget(view); animator.setDuration(1000).start(); //最核心的方法 animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {// 進(jìn)度百分比float value = animation.getAnimatedFraction();} });

4. 動畫監(jiān)聽

監(jiān)聽動畫的過程執(zhí)行一些操作

ObjectAnimator anim = ObjectAnimator.ofFloat(view, "alpha",0.5f); anim.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {} });anim.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationStart(Animator animation) {super.onAnimationEnd(animation);} });

這里邊有一個重要的思想，如果一個接口需要實現(xiàn)的方法比較多，而通常時候又不需要實現(xiàn)那么多方法，導(dǎo)致代碼亂亂的，這個時候，可以寫一個抽象類來實現(xiàn)這個接口的所有方法，由于接口的實現(xiàn)類也是接口類型，所以使用的時候就可以只復(fù)寫這個抽象類中感興趣的方法就好了

5. View的animate方法

在3.0之后，Google給View增加了animate方法來直接驅(qū)動屬性動畫

view.animate().alpha(0).scaleX(1).x(300).y(200).setDuration(1000).withStartAction(new Runnable() {@Overridepublic void run() {//動畫開始}}).withEndAction(new Runnable() {@Overridepublic void run() {//動畫結(jié)束runOnUiThread(new Runnable() {@Overridepublic void run() {//執(zhí)行一些主線程方法}});}}).start();

6. Android 布局動畫

布局動畫是指作用在ViewGroup上，給ViewGroup增加View時添加一個動畫過渡效果
最簡單的布局動畫是在ViewGroup的xml中使用如下屬性打開布局動畫
- android:animateLayoutChanges="true"
- 但是這個默認(rèn)的動畫效果無法替換
使用LayoutAnimationController類來自定義一個過渡效果

LinearLayout ll = (LinearLayout)findViewById(R.id.ll); //設(shè)置過渡動畫 ScaleAnimation sa = new ScaleAnimation(0,1,0,1); sa.setDuration(2000); //設(shè)置布局動畫的顯示屬性,第二個參數(shù)是每個子View顯示的delay時間 LayoutAnimationController lac = new LayoutAnimationController(sa,0.5f); lac.setOrder(LayoutAnimationController.ORDER_NORMAL);//順序，隨機，倒序 //為ViewGroup設(shè)置布局動畫 ll.setLayoutAnimation(lac);

7. Interpolators(插值器 )

插值器是動畫中一個非常重要的概念，通過插值器可以定義動畫變換速率，其作用主要是控制目標(biāo)變量的變化值進(jìn)行對應(yīng)的變化
AccelerateDecelerateInterpolator開始與結(jié)束的地方速率改變比較慢，在中間的時候加速
AccelerateInterpolator開始的地方速率改變比較慢，然后開始加速
AnticipateInterpolator開始的時候向后然后向前甩
AnticipateOvershootInterpolator開始的時候向后然后向前甩一定值后返回最后的值
BounceInterpolator動畫結(jié)束的時候彈起
CycleInterpolator循環(huán)播放特定的次數(shù)，速率改變沿著正弦曲線
DecelerateInterpolator在開始的地方快然后慢
創(chuàng)建的時候，可以傳factor值，如DecelerateInterpolator(2f)：
LinearInterpolator以常量速率改變
OvershootInterpolator向前甩一定值后再回到原來位置
創(chuàng)建的時候，可以傳tension值，OvershootInterpolator(0.8f)：

五、自定義動畫

就是現(xiàn)有的透明度，旋轉(zhuǎn)，平移，縮放等行為組合起來仍然不能滿足你的話，可以自定義一些更炫的動畫

public class CustomAnim extends Animation {private int mCenterWidth;private int mCenterHeight;private Camera mCamera = new Camera();private float mRotateY = 0.0f;@Overridepublic void initialize(int width,int height,int parentWidth,int parentHeight) {super.initialize(width, height, parentWidth, parentHeight);// 設(shè)置默認(rèn)時長setDuration(2000);// 動畫結(jié)束后保留狀態(tài)setFillAfter(true);// 設(shè)置默認(rèn)插值器setInterpolator(new BounceInterpolator());mCenterWidth = width / 2;mCenterHeight = height / 2;}// 暴露接口-設(shè)置旋轉(zhuǎn)角度public void setRotateY(float rotateY) {mRotateY = rotateY;}@Overrideprotected void applyTransformation(float interpolatedTime,Transformation t) {final Matrix matrix = t.getMatrix();mCamera.save();// 使用Camera設(shè)置旋轉(zhuǎn)的角度mCamera.rotateY(mRotateY * interpolatedTime);// 將旋轉(zhuǎn)變換作用到matrix上mCamera.getMatrix(matrix);mCamera.restore();// 通過pre方法設(shè)置矩陣作用前的偏移量來改變旋轉(zhuǎn)中心matrix.preTranslate(mCenterWidth, mCenterHeight);matrix.postTranslate(-mCenterWidth, -mCenterHeight);} }

六、Android 5.X SVG 矢量動畫機制

可伸縮矢量圖形（Scalable Vector Graphics）
定義用于網(wǎng)絡(luò)的基于矢量的圖形
使用XML格式定義圖形
圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有損失
與Bitmap對比，SVG最大的優(yōu)點就是方法不失真，而且不需要為不同分辨率設(shè)計多套圖標(biāo)

七、點擊view顯示隱藏其他View帶動畫的一個小例子

public class DropTest extends Activity {private LinearLayout mHiddenView;private float mDensity;private int mHiddenViewMeasuredHeight;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.drop);mHiddenView = (LinearLayout) findViewById(R.id.hidden_view);// 獲取像素密度mDensity = getResources().getDisplayMetrics().density;// 獲取布局的高度mHiddenViewMeasuredHeight = (int) (mDensity * 40 + 0.5);}public void llClick(View view) {if (mHiddenView.getVisibility() == View.GONE) {// 打開動畫animateOpen(mHiddenView);} else {// 關(guān)閉動畫animateClose(mHiddenView);}}private void animateOpen(final View view) {view.setVisibility(View.VISIBLE);ValueAnimator animator = createDropAnimator(view,0,mHiddenViewMeasuredHeight);animator.start();}private void animateClose(final View view) {int origHeight = view.getHeight();ValueAnimator animator = createDropAnimator(view, origHeight, 0);animator.addListener(new AnimatorListenerAdapter() {public void onAnimationEnd(Animator animation) {view.setVisibility(View.GONE);}});animator.start();}private ValueAnimator createDropAnimator(final View view, int start, int end) {ValueAnimator animator = ValueAnimator.ofInt(start, end);animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {int value = (Integer) valueAnimator.getAnimatedValue();ViewGroup.LayoutParams layoutParams =view.getLayoutParams();layoutParams.height = value;view.setLayoutParams(layoutParams);}});return animator;} }

轉(zhuǎn)載于:https://www.cnblogs.com/rocomp/p/5742056.html

總結(jié)

以上是生活随笔為你收集整理的Android 动画机制与使用技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：老oj1965：polygon半平面交
下一篇： Android Studio 添加 Ge