Android 動畫基礎知識學習(上)

學習資料:Android開發(fā)藝術(shù)探索Android應用開發(fā)之所有動畫使用詳解

1.Android中的三種動畫

  1. View動畫

通過場景里的對象不斷做圖像變換(平移,縮放,旋轉(zhuǎn),透明度)從而產(chǎn)生動畫效果,是一種漸近式動畫,并支持自定義。

  1. 幀動畫

幀動畫其實也屬于View動畫。通過順序播放一系列圖像從而產(chǎn)生動畫效果,可以簡單理解為圖片切換動畫效果,但圖片過多過大會導致OOM

  1. 屬性動畫

屬相動畫通過動態(tài)地改變對象的屬性從而達到動畫效果。

重點在于屬性動畫的學習


2.View動畫

View動畫的作用對象是View。支持四種典型動畫效果:

  • 平移動畫 TranslateAnimation
  • 縮放動畫 ScaleAnimation
  • 旋轉(zhuǎn)動畫 RotateAnimation
  • 透明度動畫 AlphaAnimation

對于View動畫,建議采用xml來定義動畫,這樣可讀性更好

View動畫的四種變換

名稱 標簽 子類 效果
平移動畫 <translate> TranslateAnimation 移動View
縮放動畫 <scale> ScaleAnimation 放大或縮小View
旋轉(zhuǎn)動畫 <rotate> RotateAnimation 旋轉(zhuǎn)View
透明度動畫 <alpha> AlphaAnimation 改變View的透明度

Animation屬性:

xml屬性 jav代碼 作用
android:detachWallpaper setDetachWallpaper(boolean) 是否在壁紙上運行
android:duration setDuration(long) 動畫的持續(xù)時間
android:fillAfter setFillAfter(boolean) 動畫結(jié)束后是否停留在結(jié)束位置
android:fillBefore setFillBefore(boolean) 動畫結(jié)束時是否還原開始位置
android:fillEnabled setFillEnabled(boolean) 同上,與fillBefore相同
android:interpolator setInterpolator(Interpolator) 設置插值器
android:repeatCount setRepeatCount(int) 重復次數(shù)
android:repeatMode setRepeatMode(int) 有兩種重復類型,reverse倒序回放,restart從頭播放
android:startOffset setStartOffset(long) 開啟動畫startAnimation(animation)之后等待執(zhí)行運行動畫的時間
android:zAdjustment setZAdjustment(int) 表示被設置動畫的內(nèi)容運行時在Z軸上的位置(top/bottom/normal),默認為normal

View動畫既可以是單個動畫,也可以是一些列動畫組成。


<set> 標簽標示動畫集合,對應于AnimationSet類,可以包含若干動畫,也可以嵌套其他的動畫集合。

  • android:interpolator
    動畫集合所采用的的插值器,插值器影響動畫的速度,比如非勻速動畫就需要通過插值器來控制動畫的播放過程。默認為@android:anim/accelerate_decelerate_interpolator,即加速加速插值器。
  • android:shareInterpolator
    集合中的動畫是否和集合共享同一個插值器。如果集合不指定插值器,子動畫就需要單獨指定所需的插值器或者使用默認值。

2.1TranslateAnimation平移動畫

平移動畫

可以簡單實現(xiàn)抖動效果,轉(zhuǎn)成gif掉幀有點嚴重,沒有抖起來

res下創(chuàng)建anim文件夾,文件名translate_animation.xml

xml文件代碼:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="false"
    android:duration="100"
    android:repeatMode="restart"
    >
    <translate
        android:repeatCount="2"
        android:fromXDelta="-10"
        android:fromYDelta="-5"
        android:toXDelta="10"
        android:toYDelta="5" />
</set>

java代碼:

Button bt = (Button) view.findViewById(R.id.bt_translate_fragment_translate);
ImageView iv = (ImageView)view.findViewById(R.id.iv_translate_fragment_translate);
//初始化動畫
Animation animation = AnimationUtils.loadAnimation(context, R.anim.translate_animation);
//點擊按鈕開始動畫
bt.setOnClickListener((v) -> iv.startAnimation(animation));

  • android:fromXDelta
    x的起始坐標值,可以為數(shù)值、百分數(shù)、百分數(shù)p。以View的左上角為坐標系原點。負為左,正為右。
1.0 坐標圖
  1. 數(shù)值: 10表示以當前View左上角坐標加10px為初始點
  1. 百分數(shù): 50%表示以當前View的左上角加上當前View寬高的50%做為初始點
  2. 百分數(shù)p: 50%p表示以當前View的左上角加上父控件寬高的50%做為初始點
  • android:toXDelta
    x的結(jié)束坐標值
  • android:fromYDelta
    y的起始坐標值。負為上,正為下
  • android:toYDelta
    y的結(jié)束坐標值

需要注意的是,TranslateAnimation動畫并不會改變View的位置布局屬性。

例如,利用TranslateAnimation把一個Button改變了,點擊移動后的Button是無效的,而點擊Button移動前的原始空白位置會響應Button的點擊事件。


2.2ScaleAnimation縮放動畫

縮放動畫

xml代碼:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fillAfter="false"
    android:repeatMode="reverse">
    <scale
        android:fromXScale="0.5"
        android:fromYScale="0.5"
        android:pivotX="-100"
        android:pivotY="-100"
        android:repeatCount="2"
        android:toXScale="1"
        android:toYScale="1" />
</set>
  • android:fromXScale 水平方向的縮放值,數(shù)字代表比例。1.0是不縮放

  • android:fromYScale 垂直方向的縮放值

  • android:toXScale 水平方向的結(jié)束值

  • android:toYScale 垂直方向的結(jié)束值

  • android:pivotX 縮放的軸點的x軸的坐標。軸點為View的左上角

  • android:pivotY 縮放的軸點的y軸的坐標

默認情況下軸點為View的中心點

感覺書上這里和我實際測試有些出入,我感覺默認是View的左上角。不曉得是我哪里搞錯了,希望可以指出。感覺坐標系就是自己上面畫的那個1.0坐標圖


2.2RotateAnimation旋轉(zhuǎn)動畫

旋轉(zhuǎn)動畫

xml代碼:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:repeatMode="reverse">
    <rotate
        android:fromDegrees="0"
        android:pivotX="235"
        android:pivotY="150"
        android:repeatCount="2"
        android:toDegrees="360" />
</set>
  • android:fromDegrees 旋轉(zhuǎn)開始的角度
  • android:toDegrees 旋轉(zhuǎn)結(jié)束的角度
  • android:pivotX 旋轉(zhuǎn)的軸點的x坐標
  • android:pivotY 旋轉(zhuǎn)的軸點的y坐標

2.4AlphaAnimation透明度動畫

透明度動畫

xml代碼:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:repeatMode="reverse">
    <alpha
        android:fromAlpha="1.0"
        android:repeatCount="2"
        android:toAlpha="0.1" />
</set>
  • android:fromAlpha 透明度的起始值,1.0代表最不透明,值越小越透明
  • android:toAlpha 透明度的結(jié)束值

3. 幀動畫

幀動畫是順序播放一組預先定義好的圖片,類似播放電影。需要用到AnimationDrawable這個類。

隨便百度的吾王,一點沒有表現(xiàn)出吾王美如畫。

幀動畫

幀動畫使用步驟:

  • 先在drawable文件下,定義一個animation-list文件,文件名字frames_animation.xml
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/a"
        android:duration="500" />
    <item
        android:drawable="@drawable/b"
        android:duration="500" />
    <item
        android:drawable="@drawable/c"
        android:duration="500" />
</animation-list>
  • Drawable作為View的背景播放
private void initView() {
    ImageView iv = (ImageView) findViewById(R.id.iv_frames_animation_activity);
    Button bt_start= (Button) findViewById(R.id.bt_start_frames_animation_activity);
    Button bt_stop= (Button) findViewById(R.id.bt_stop_frames_animation_activity);

    iv.setBackgroundResource(R.drawable.frames_animation);
    AnimationDrawable animation = (AnimationDrawable) iv.getBackground();

    bt_start.setOnClickListener((v)-> animation.start());
    bt_stop.setOnClickListener((v)->animation.stop());
}

幀動畫使用很簡單,但很容易出現(xiàn)OOM。盡量避免使用較大較多的圖片。


4.View動畫的特殊使用場景

View動畫除了四種基本使用場景外,還可以在ViewGroup中控制子元素的出場效果,在Activity中可以實現(xiàn)不同Activity之間的切換效果。

4.1 LayoutAnimation簡單介紹

LayoutAnimation作用于ViewGroup,為ViewGroup指定一個動畫,這樣當它的子元素出場時,都會具有這種動畫效果。這種效果常常用于ListView上。

挖坑:RecyclerViewitem的動畫效果如何實現(xiàn)?

LayoutAnimation動畫

使用步驟:

1.指定子View的動畫

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:repeatMode="reverse">
    <rotate
        android:fromDegrees="0"
        android:pivotX="235"
        android:pivotY="150"
        android:repeatCount="2"
        android:toDegrees="360" />
</set>

用的是2.2旋轉(zhuǎn)的動畫


2. 定義LayoutAnimation

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/rotate_animation"
    android:animationOrder="reverse"
    android:delay="1" />
  • android:animation

指定子元素入場顯示的動畫

  • android:animationOrder

子元素動畫的順序。有: nomal,reverse,random
nomal 順序顯示,排在前面的子元素先顯示動畫;
reverse 逆序顯示,排在后面的子元素先顯示動畫;
random 隨機顯示子元素的動畫

  • android:delay

子元素開始動畫的時間延遲。比如子元素的入場動畫周期為300ms,0.5就表示每個子元素都需要延遲150ms。第一個進來延遲150ms,播放入場動畫,第二個子元素延遲300ms播放入場動畫。依次類推。


3.ViewGroup使用LayoutAniimation

采用布局文件的形式,指定android:layoutAnimation

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:layoutAnimation="@anim/layout_anim"
    android:orientation="vertical"
    >

    <ImageView style="@style/img" />

    <ImageView style="@style/img" />

    <ImageView style="@style/img" />

</LinearLayout>

也可以通過代碼來實現(xiàn):

Animation animation= AnimationUtils.loadAnimation(context,R.anim.resId);
LayoutAnimationController controller = new LayoutAnimationController(animation);
controller.setDelay(1);
controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
目標ViewGroup.setLayoutAnimation(controller);

4.2Activity的切換效果

使用overidePendingTransition(int enterAnim, int exitAnim)可以改變Activity的的默認切換效果。這個方法 必須在startActivity()或者finish()之后才有效果。

  • enterAnim Activity被打開時所需的動畫資源id

  • exitAnim Activity暫停時所需的動畫資源id

啟動一個Activity時:

Intent intent = new Intent(MainActivity.this, activity);
startActivity(intent);
overridePendingTransition(R.anim.enter_anim,R.anim.exit_anim);

退出一個Activity時:

  @Override
  public void finish() {
     super.finish();
     overridePendingTransition(R.anim.enter_anim,R.anim.exit_anim);
}

5.最后

下篇學習屬性動畫。周末填4.1挖的坑,學習RecyclerView如何為子item添加動畫效果

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容