Android動畫使用教程:補(bǔ)間動畫該如何使用?


前言

  • 動畫的使用 是 Android 開發(fā)中常用的知識
  • 今天,我將將獻(xiàn)上一份Android補(bǔ)間動畫的使用教程观挎,手把手教你使用補(bǔ)間動畫。

Carson帶你學(xué)Android動畫系列文章:
Carson帶你學(xué)Android:一份全面&詳細(xì)的動畫知識學(xué)習(xí)攻略
Carson帶你學(xué)Android:常見的三種動畫類型
Carson帶你學(xué)Android:補(bǔ)間動畫學(xué)習(xí)教程
Carson帶你學(xué)Android:屬性動畫學(xué)習(xí)教程
Carson帶你學(xué)Android:逐幀動畫學(xué)習(xí)教程
Carson帶你學(xué)Android:自定義動畫神器-估值器(含實(shí)例教學(xué))
Carson帶你學(xué)Android:自定義動畫神器-插值器(含實(shí)例教學(xué))


目錄

示意圖

1. 簡介

示意圖

2. 使用場景

補(bǔ)間動畫的使用場景主要包括:基礎(chǔ)動畫效果 & 特殊使用場景

2.1 基礎(chǔ)動畫效果

補(bǔ)間動畫的標(biāo)準(zhǔn)動畫分為4種:

  • 平移動畫(Translate
  • 縮放動畫(scale
  • 旋轉(zhuǎn)動畫(rotate
  • 透明度動畫(alpha

上述常用于視圖View的一些標(biāo)準(zhǔn)動畫效果段化,具體效果如下:

平移
縮放
旋轉(zhuǎn)
透明度

2.2 特殊的應(yīng)用場景

  • Activity 的切換效果(淡入淡出、左右滑動等)
  • Fragement 的切換效果(淡入淡出造成、左右滑動等)
  • 視圖組(ViewGroup)中子元素的出場效果(淡入淡出显熏、左右滑動等)

具體效果如下:


淡入淡出
左右滑動
ListView出場動畫

3. 使用方法

3.1 核心類

不同類型的動畫對應(yīng)于不同的子類,具體如下:


示意圖

3.2 設(shè)置方式

  • 補(bǔ)間動畫的使用方式分為兩種:在XML 代碼 / Java 代碼里設(shè)置
  1. 前者優(yōu)點(diǎn):動畫描述的可讀性更好
  2. 后者優(yōu)點(diǎn):動畫效果可動態(tài)創(chuàng)建

下面晒屎,我將詳細(xì)介紹上面所示補(bǔ)間動畫的具體使用喘蟆。


4. 平移動畫(Translate)

效果圖如下


效果圖

對應(yīng)的核心類是:TranslateAnimation類,具體使用如下:

/*
 * 設(shè)置方式1:xml
 */
 // 步驟1:在 res/anim的文件夾里創(chuàng)建動畫效果.xml文件
 // 此處路徑為res/anim/view_animation.xml

 // 步驟2:根據(jù)不同動畫效果的語法設(shè)置不同動畫參數(shù)-view_animation.xml
   <?xml version="1.0" encoding="utf-8"?>
   
   <translate xmlns:android="http://schemas.android.com/apk/res/android"
      // 采用<translate /> 標(biāo)簽表示平移動畫
      // 以下參數(shù)是4種動畫效果的公共屬性,即都有的屬性
      android:duration="3000" // 動畫持續(xù)時間(ms)鼓鲁,必須設(shè)置蕴轨,動畫才有效果
      android:startOffset ="1000" // 動畫延遲開始時間(ms)
      android:fillBefore = “true” // 動畫播放完后,視圖是否會停留在動畫開始的狀態(tài)骇吭,默認(rèn)為true
      android:fillAfter = “false” // 動畫播放完后橙弱,視圖是否會停留在動畫結(jié)束的狀態(tài),優(yōu)先于fillBefore值,默認(rèn)為false
      android:fillEnabled= “true” // 是否應(yīng)用fillBefore值棘脐,對fillAfter值無影響斜筐,默認(rèn)為true
      android:repeatMode= “restart” // 選擇重復(fù)播放動畫模式,restart代表正序重放蛀缝,reverse代表倒序回放顷链,默認(rèn)為restart|
      android:repeatCount = “0” // 重放次數(shù)(所以動畫的播放次數(shù)=重放次數(shù)+1),為infinite時無限重復(fù)
      android:interpolator = @[package:]anim/interpolator_resource // 插值器屈梁,即影響動畫的播放速度,下面會詳細(xì)講
      
      // 以下參數(shù)是平移動畫特有的屬性
      android:fromXDelta="0" // 視圖在水平方向x 移動的起始值
      android:toXDelta="500" // 視圖在水平方向x 移動的結(jié)束值
      android:fromYDelta="0" // 視圖在豎直方向y 移動的起始值
      android:toYDelta="500" // 視圖在豎直方向y 移動的結(jié)束值
      /> 

  // 步驟3:在Java代碼中創(chuàng)建Animation對象并播放動畫
  // 1. 創(chuàng)建需要設(shè)置動畫的 視圖View
  Button mButton = (Button) findViewById(R.id.Button); 
  // 2. 創(chuàng)建動畫對象并傳入設(shè)置的動畫效果xml文件
  Animation translateAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
  // 3. 播放動畫
  mButton.startAnimation(translateAnimation);

/*
 * 設(shè)置方式2:Java
 */
 // 步驟1:創(chuàng)建需要設(shè)置動畫的視圖View
 Button mButton = (Button) findViewById(R.id.Button);
 // 步驟2:創(chuàng)建平移動畫的對象
 // 平移動畫對應(yīng)的Animation子類為TranslateAnimation
 Animation translateAnimation = new TranslateAnimation(0嗤练,500,0在讶,500);
 // 參數(shù)說明
 // fromXDelta :視圖在水平方向x 移動的起始值
 // toXDelta :視圖在水平方向x 移動的結(jié)束值
 // fromYDelta :視圖在豎直方向y 移動的起始值
 // toYDelta:視圖在豎直方向y 移動的結(jié)束值

 // 步驟3:屬性設(shè)置:方法名是在其屬性前加“set”潭苞,如設(shè)置時長setDuration()
 translateAnimation.setDuration(3000);

 // 步驟4:播放動畫
 mButton.startAnimation(translateAnimation);

5. 縮放動畫(Scale)

縮放動畫有一個“縮放中心”的概念,說明如下:

image.png

效果圖如下:軸點(diǎn)為(50%,50%) & 軸點(diǎn)為(20%,30%)的情況

軸點(diǎn)為(50%,50%)
軸點(diǎn)為(20%,30%)

對應(yīng)的核心類是:ScaleAnimation類真朗,具體使用如下:

/*
 * 設(shè)置方式1:xml
 */
 // 步驟1:在 res/anim的文件夾里創(chuàng)建動畫效果.xml文件
 // 此處路徑為res/anim/view_animation.xml

 // 步驟2:根據(jù)不同動畫效果的語法設(shè)置不同動畫參數(shù)-view_animation.xml
    <?xml version="1.0" encoding="utf-8"?>
    // 采用<scale/> 標(biāo)簽表示是縮放動畫
    <scale xmlns:android="http://schemas.android.com/apk/res/android"

    // 以下參數(shù)是4種動畫效果的公共屬性,即都有的屬性
    android:duration="3000" // 動畫持續(xù)時間(ms)此疹,必須設(shè)置,動畫才有效果
    android:startOffset ="1000" // 動畫延遲開始時間(ms)
    android:fillBefore = “true” // 動畫播放完后遮婶,視圖是否會停留在動畫開始的狀態(tài)蝗碎,默認(rèn)為true
    android:fillAfter = “false” // 動畫播放完后,視圖是否會停留在動畫結(jié)束的狀態(tài)旗扑,優(yōu)先于fillBefore值蹦骑,默認(rèn)為false
    android:fillEnabled= “true” // 是否應(yīng)用fillBefore值,對fillAfter值無影響臀防,默認(rèn)為true
    android:repeatMode= “restart” // 選擇重復(fù)播放動畫模式眠菇,restart代表正序重放,reverse代表倒序回放袱衷,默認(rèn)為restart|
    android:repeatCount = “0” // 重放次數(shù)(所以動畫的播放次數(shù)=重放次數(shù)+1)捎废,為infinite時無限重復(fù)
    android:interpolator = @[package:]anim/interpolator_resource // 插值器,即影響動畫的播放速度,下面會詳細(xì)講
    
    // 以下參數(shù)是縮放動畫特有的屬性
    android:fromXScale="0.0" 
    // 動畫在水平方向X的起始縮放倍數(shù)
    // 0.0表示收縮到?jīng)]有致燥;1.0表示正常無伸縮
    // 值小于1.0表示收縮登疗;值大于1.0表示放大

    android:toXScale="2"  //動畫在水平方向X的結(jié)束縮放倍數(shù)

    android:fromYScale="0.0" //動畫開始前在豎直方向Y的起始縮放倍數(shù)
    android:toYScale="2" //動畫在豎直方向Y的結(jié)束縮放倍數(shù)

    android:pivotX="50%" // 縮放軸點(diǎn)的x坐標(biāo)
    android:pivotY="50%" // 縮放軸點(diǎn)的y坐標(biāo)
    // 軸點(diǎn) = 視圖縮放的中心點(diǎn)

    // pivotX pivotY,可取值為數(shù)字,百分比嫌蚤,或者百分比p
    // 設(shè)置為數(shù)字時(如50)辐益,軸點(diǎn)為View的左上角的原點(diǎn)在x方向和y方向加上50px的點(diǎn)。在Java代碼里面設(shè)置這個參數(shù)的對應(yīng)參數(shù)是Animation.ABSOLUTE脱吱。
    // 設(shè)置為百分比時(如50%)智政,軸點(diǎn)為View的左上角的原點(diǎn)在x方向加上自身寬度50%和y方向自身高度50%的點(diǎn)。在Java代碼里面設(shè)置這個參數(shù)的對應(yīng)參數(shù)是Animation.RELATIVE_TO_SELF箱蝠。
    // 設(shè)置為百分比p時(如50%p)续捂,軸點(diǎn)為View的左上角的原點(diǎn)在x方向加上父控件寬度50%和y方向父控件高度50%的點(diǎn)垦垂。在Java代碼里面設(shè)置這個參數(shù)的對應(yīng)參數(shù)是Animation.RELATIVE_TO_PARENT

    // 兩個50%表示動畫從自身中間開始,具體如下圖
    /> 
  
// 步驟3:在Java代碼中創(chuàng)建Animation對象并播放動畫
  // 1. 創(chuàng)建需要設(shè)置動畫的 視圖View
  Button mButton = (Button) findViewById(R.id.Button); 
  // 2. 創(chuàng)建動畫對象并傳入設(shè)置的動畫效果xml文件
  Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
  // 3. 播放動畫
  mButton.startAnimation(scaleAnimation);

/*
 * 設(shè)置方式2:Java
 */

 // 步驟1:創(chuàng)建 需要設(shè)置動畫的 視圖View
 Button mButton = (Button) findViewById(R.id.Button);

 // 步驟2:創(chuàng)建縮放動畫的對象 & 設(shè)置動畫效果
 // 縮放動畫對應(yīng)的Animation子類為RotateAnimation
 Animation scaleAnimation = new ScaleAnimation(0,2,0,2,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
 // 參數(shù)說明:
 // 1. fromX :動畫在水平方向X的結(jié)束縮放倍數(shù)
 // 2. toX :動畫在水平方向X的結(jié)束縮放倍數(shù)
 // 3. fromY :動畫開始前在豎直方向Y的起始縮放倍數(shù)
 // 4. toY:動畫在豎直方向Y的結(jié)束縮放倍數(shù)
 // 5. pivotXType:縮放軸點(diǎn)的x坐標(biāo)的模式
 // 6. pivotXValue:縮放軸點(diǎn)x坐標(biāo)的相對值
 // 7. pivotYType:縮放軸點(diǎn)的y坐標(biāo)的模式
 // 8. pivotYValue:縮放軸點(diǎn)y坐標(biāo)的相對值
 // pivotXType = Animation.ABSOLUTE:縮放軸點(diǎn)的x坐標(biāo) =  View左上角的原點(diǎn) 在x方向 加上 pivotXValue數(shù)值的點(diǎn)(y方向同理)
 // pivotXType = Animation.RELATIVE_TO_SELF:縮放軸點(diǎn)的x坐標(biāo) = View左上角的原點(diǎn) 在x方向 加上 自身寬度乘上pivotXValue數(shù)值的值(y方向同理)
 // pivotXType = Animation.RELATIVE_TO_PARENT:縮放軸點(diǎn)的x坐標(biāo) = View左上角的原點(diǎn) 在x方向 加上 父控件寬度乘上pivotXValue數(shù)值的值 (y方向同理)
  
  // 步驟3:屬性設(shè)置:方法名是在其屬性前加“set”疾忍,如設(shè)置時長setDuration() 
  scaleAnimation.setDuration(3000);

  // 步驟4:播放動畫
  mButton.startAnimation(scaleAnimation);

6. 旋轉(zhuǎn)動畫(Rotate)

類似于縮放動畫的“縮放中心”乔外,旋轉(zhuǎn)動畫也有一個“旋轉(zhuǎn)軸點(diǎn)”的概念:


image.png

旋轉(zhuǎn)軸點(diǎn)為(50%,50%)的效果如下圖所示。


軸點(diǎn)為(50%,50%)

對應(yīng)的核心類是:RotateAnimation類一罩,具體使用如下:

/*
 * 設(shè)置方式1:xml
 */
 // 步驟1:在 res/anim的文件夾里創(chuàng)建動畫效果.xml文件
 // 此處路徑為res/anim/view_animation.xml

 // 步驟2:根據(jù)不同動畫效果的語法設(shè)置不同動畫參數(shù)-view_animation.xml
 // 采用<rotate/> 標(biāo)簽表示是旋轉(zhuǎn)動畫
    <?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"

    // 以下參數(shù)是4種動畫效果的公共屬性,即都有的屬性
    android:duration="3000" // 動畫持續(xù)時間(ms)杨幼,必須設(shè)置,動畫才有效果
    android:startOffset ="1000" // 動畫延遲開始時間(ms)
    android:fillBefore = “true” // 動畫播放完后聂渊,視圖是否會停留在動畫開始的狀態(tài)差购,默認(rèn)為true
    android:fillAfter = “false” // 動畫播放完后,視圖是否會停留在動畫結(jié)束的狀態(tài)汉嗽,優(yōu)先于fillBefore值欲逃,默認(rèn)為false
    android:fillEnabled= “true” // 是否應(yīng)用fillBefore值,對fillAfter值無影響饼暑,默認(rèn)為true
    android:repeatMode= “restart” // 選擇重復(fù)播放動畫模式稳析,restart代表正序重放,reverse代表倒序回放弓叛,默認(rèn)為restart|
    android:repeatCount = “0” // 重放次數(shù)(所以動畫的播放次數(shù)=重放次數(shù)+1)彰居,為infinite時無限重復(fù)
    android:interpolator = @[package:]anim/interpolator_resource // 插值器,即影響動畫的播放速度,下面會詳細(xì)講
    
    // 以下參數(shù)是旋轉(zhuǎn)動畫特有的屬性
    android:duration="1000"
    android:fromDegrees="0" // 動畫開始時 視圖的旋轉(zhuǎn)角度(正數(shù) = 順時針撰筷,負(fù)數(shù) = 逆時針)
    android:toDegrees="270" // 動畫結(jié)束時 視圖的旋轉(zhuǎn)角度(正數(shù) = 順時針陈惰,負(fù)數(shù) = 逆時針)
    android:pivotX="50%" // 旋轉(zhuǎn)軸點(diǎn)的x坐標(biāo)
    android:pivotY="0" // 旋轉(zhuǎn)軸點(diǎn)的y坐標(biāo)
    // 軸點(diǎn) = 視圖縮放的中心點(diǎn)

    // pivotX pivotY,可取值為數(shù)字,百分比毕籽,或者百分比p
    // 設(shè)置為數(shù)字時(如50)抬闯,軸點(diǎn)為View的左上角的原點(diǎn)在x方向和y方向加上50px的點(diǎn)。在Java代碼里面設(shè)置這個參數(shù)的對應(yīng)參數(shù)是Animation.ABSOLUTE关筒。
    // 設(shè)置為百分比時(如50%)溶握,軸點(diǎn)為View的左上角的原點(diǎn)在x方向加上自身寬度50%和y方向自身高度50%的點(diǎn)。在Java代碼里面設(shè)置這個參數(shù)的對應(yīng)參數(shù)是Animation.RELATIVE_TO_SELF平委。
    // 設(shè)置為百分比p時(如50%p)奈虾,軸點(diǎn)為View的左上角的原點(diǎn)在x方向加上父控件寬度50%和y方向父控件高度50%的點(diǎn)。在Java代碼里面設(shè)置這個參數(shù)的對應(yīng)參數(shù)是Animation.RELATIVE_TO_PARENT
    // 兩個50%表示動畫從自身中間開始廉赔,具體如下圖

    /> 
  
 // 步驟3:在Java代碼中創(chuàng)建Animation對象并播放動畫
  // 1. 創(chuàng)建需要設(shè)置動畫的 視圖View
  Button mButton = (Button) findViewById(R.id.Button); 
  // 2. 創(chuàng)建動畫對象并傳入設(shè)置的動畫效果xml文件
  Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
  // 3. 播放動畫
  mButton.startAnimation(rotateAnimation);

/*
 * 設(shè)置方式2:Java
 */
 // 步驟1:創(chuàng)建需要設(shè)置動畫的視圖View
 Button mButton = (Button) findViewById(R.id.Button);

 // 步驟2:創(chuàng)建旋轉(zhuǎn)動畫的對象 & 設(shè)置動畫效果
 // 旋轉(zhuǎn)動畫對應(yīng)的Animation子類為RotateAnimation
 Animation rotateAnimation = new RotateAnimation(0,270,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
 // 參數(shù)說明:
 // 1. fromX :動畫在水平方向X的結(jié)束縮放倍數(shù)
 // 2. toX :動畫在水平方向X的結(jié)束縮放倍數(shù)
 // 3. fromY :動畫開始前在豎直方向Y的起始縮放倍數(shù)
 // 4. toY:動畫在豎直方向Y的結(jié)束縮放倍數(shù)
 // 5. pivotXType:縮放軸點(diǎn)的x坐標(biāo)的模式
 // 6. pivotXValue:縮放軸點(diǎn)x坐標(biāo)的相對值
 // 7. pivotYType:縮放軸點(diǎn)的y坐標(biāo)的模式
 // 8. pivotYValue:縮放軸點(diǎn)y坐標(biāo)的相對值
 // pivotXType = Animation.ABSOLUTE:縮放軸點(diǎn)的x坐標(biāo) =  View左上角的原點(diǎn) 在x方向 加上 pivotXValue數(shù)值的點(diǎn)(y方向同理)
 // pivotXType = Animation.RELATIVE_TO_SELF:縮放軸點(diǎn)的x坐標(biāo) = View左上角的原點(diǎn) 在x方向 加上 自身寬度乘上pivotXValue數(shù)值的值(y方向同理)
 // pivotXType = Animation.RELATIVE_TO_PARENT:縮放軸點(diǎn)的x坐標(biāo) = View左上角的原點(diǎn) 在x方向 加上 父控件寬度乘上pivotXValue數(shù)值的值 (y方向同理)
  
  // 步驟3:屬性設(shè)置:方法名是在其屬性前加“set”,如設(shè)置時長setDuration() 
  rotateAnimation.setDuration(3000);

  // 步驟4:播放動畫
  mButton.startAnimation(rotateAnimation);

7. 透明度動畫(Alpha)

透明度從1-0匾鸥,即從有到無的效果圖如下圖所示蜡塌。

對應(yīng)的核心類是:AlphaAnimation類,具體使用如下:

/*
 * 設(shè)置方式1:xml
 */
   // 步驟1:在 res/anim的文件夾里創(chuàng)建動畫效果.xml文件
   // 此處路徑為res/anim/view_animation.xml

   // 步驟2:根據(jù)不同動畫效果的語法設(shè)置不同動畫參數(shù)-view_animation.xml
   // 采用<alpha/> 標(biāo)簽表示是透明度動畫
   <?xml version="1.0" encoding="utf-8"?>
   <alpha xmlns:android="http://schemas.android.com/apk/res/android"

    // 以下參數(shù)是4種動畫效果的公共屬性,即都有的屬性
    android:duration="3000" // 動畫持續(xù)時間(ms)勿负,必須設(shè)置馏艾,動畫才有效果
    android:startOffset ="1000" // 動畫延遲開始時間(ms)
    android:fillBefore = “true” // 動畫播放完后,視圖是否會停留在動畫開始的狀態(tài)琅摩,默認(rèn)為true
    android:fillAfter = “false” // 動畫播放完后铁孵,視圖是否會停留在動畫結(jié)束的狀態(tài),優(yōu)先于fillBefore值房资,默認(rèn)為false
    android:fillEnabled= “true” // 是否應(yīng)用fillBefore值蜕劝,對fillAfter值無影響,默認(rèn)為true
    android:repeatMode= “restart” // 選擇重復(fù)播放動畫模式轰异,restart代表正序重放岖沛,reverse代表倒序回放,默認(rèn)為restart|
    android:repeatCount = “0” // 重放次數(shù)(所以動畫的播放次數(shù)=重放次數(shù)+1)搭独,為infinite時無限重復(fù)
    android:interpolator = @[package:]anim/interpolator_resource // 插值器婴削,即影響動畫的播放速度,下面會詳細(xì)講
    
    // 以下參數(shù)是透明度動畫特有的屬性
    android:fromAlpha="1.0" // 動畫開始時視圖的透明度(取值范圍: -1 ~ 1)
    android:toAlpha="0.0"http:// 動畫結(jié)束時視圖的透明度(取值范圍: -1 ~ 1)

    /> 
  
 // 步驟3:在Java代碼中創(chuàng)建Animation對象并播放動畫
  // 1. 創(chuàng)建需要設(shè)置動畫的 視圖View
  Button mButton = (Button) findViewById(R.id.Button); 
  // 2. 創(chuàng)建動畫對象并傳入設(shè)置的動畫效果xml文件
  Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
  // 3. 播放動畫
  mButton.startAnimation(alphaAnimation);

/*
 * 設(shè)置方式2:Java
 */
   // 步驟1:創(chuàng)建需要設(shè)置動畫的視圖View
   Button mButton = (Button) findViewById(R.id.Button);

   // 步驟2:創(chuàng)建透明度動畫的對象 & 設(shè)置動畫效果
   // 透明度動畫對應(yīng)的Animation子類為AlphaAnimation
   Animation alphaAnimation = new AlphaAnimation(1,0);
   // 參數(shù)說明:
   // 1. fromX :動畫在水平方向X的結(jié)束縮放倍數(shù)
   // 2. toX :動畫在水平方向X的結(jié)束縮放倍數(shù)
   // 3. fromY :動畫開始前在豎直方向Y的起始縮放倍數(shù)
   // 4. toY:動畫在豎直方向Y的結(jié)束縮放倍數(shù)
   // 5. pivotXType:縮放軸點(diǎn)的x坐標(biāo)的模式
   // 6. pivotXValue:縮放軸點(diǎn)x坐標(biāo)的相對值
   // 7. pivotYType:縮放軸點(diǎn)的y坐標(biāo)的模式
   // 8. pivotYValue:縮放軸點(diǎn)y坐標(biāo)的相對值
   // pivotXType = Animation.ABSOLUTE:縮放軸點(diǎn)的x坐標(biāo) =  View左上角的原點(diǎn) 在x方向 加上 pivotXValue數(shù)值的點(diǎn)(y方向同理)
   // pivotXType = Animation.RELATIVE_TO_SELF:縮放軸點(diǎn)的x坐標(biāo) = View左上角的原點(diǎn) 在x方向 加上 自身寬度乘上pivotXValue數(shù)值的值(y方向同理)
   // pivotXType = Animation.RELATIVE_TO_PARENT:縮放軸點(diǎn)的x坐標(biāo) = View左上角的原點(diǎn) 在x方向 加上 父控件寬度乘上pivotXValue數(shù)值的值 (y方向同理)
    
    // 步驟3:屬性設(shè)置:方法名是在其屬性前加“set”,如設(shè)置時長setDuration() 
    AlphaAnimation.setDuration(3000);

    // 步驟4:播放動畫
    mButton.startAnimation(AlphaAnimation);

至此牙肝,關(guān)于補(bǔ)間動畫的基礎(chǔ)動畫效果講解完畢唉俗。


8. Activity 的切換效果

Activity 啟動 / 退出時的動畫效果,主要包括淡入淡出配椭、左滑右滑等虫溜。

8.1 系統(tǒng)預(yù)設(shè)

本身系統(tǒng)已經(jīng)封裝好了淡入淡出、左滑右滑的效果颂郎,如下圖所示:

淡入淡出.gif
向左向右滑動.gif

具體使用如下:

// 系統(tǒng)已經(jīng)封裝好的動畫效果
  // 淡入淡出:android.R.anim.fade_in吼渡、android.R.anim.fade_out
  // 由左向右滑入:android.R.anim.slide_in_left、android.R.anim.slide_out_right

// 核心方法:overridePendingTransition(int enterAnim, int exitAnim)
  // 調(diào)用時機(jī):Activity的onCreate() 或 finish()
  // 參數(shù)說明
  // 對于在onCreate()設(shè)置:
     // enterAnim:進(jìn)入該Activity時的動畫效果資源ID
     // exitAnim:進(jìn)入該Activity時上一個Activity離開時的動畫效果資源ID

  // 對于在finish()設(shè)置:
     // enterAnim:進(jìn)入其他Activity時 進(jìn)入Activity的動畫效果資源ID
     // exitAnim:進(jìn)入其他Activity時 該Activity離開時的動畫效果資源ID

// 具體使用
  // 方式1:在onCreate()設(shè)置
  @Override
      public void onCreate(Bundle savedInstanceState) {
          overridePendingTransition(R.anim.fade_in, R.anim.fade_out);
          super.onCreate(savedInstanceState);
      }

  // 方式2:在finish()設(shè)置
   @Override
      public void finish() {
          super.finish();
          overridePendingTransition(R.anim.fade_in, R.anim.fade_out);
      }

這里需要特別注意的是:如果進(jìn)入退出頁面:一個需要動畫乓序、另外一個不需要動畫寺酪,但也必須設(shè)置時間相同的、沒有任何變化的動畫替劈,否則會出現(xiàn)黑屏寄雀。

8.2 自定義切換效果

除了使用系統(tǒng)自帶的切換效果,還可以自定義Activity的切換效果:

此處就用到補(bǔ)間動畫了

8.2.1 自定義 淡入淡出 效果

實(shí)現(xiàn)原理:透明度動畫(Alpha)陨献,具體使用如下:

// 淡入:fade_in.xml
<?xml version="1.0" encoding="utf-8"?>  
<alpha xmlns:android="http://schemas.android.com/apk/res/android" >   
        android:duration="1500"  
        android:fromAlpha="0.0"  
        android:toAlpha="1.0" >  
</alpha>

// 淡出:fade_out.xml
<?xml version="1.0" encoding="utf-8"?>  
<alpha xmlns:android="http://schemas.android.com/apk/res/android" >   
        android:duration="1500"  
        android:fromAlpha="1.0"  
        android:toAlpha="0.0" >  
</alpha>

8.2.2 自定義 左右滑動 效果

自定義滑動.gif

實(shí)現(xiàn)原理:平移動畫(Translate)盒犹。先了解Activity的位置信息,如下圖

從上圖可以看出:

  • 以屏幕底邊為X軸眨业,屏幕左邊為Y軸急膀;
  • 當(dāng)Activity在X軸 = -100%p時,剛好完全超出屏幕到左邊(位置1)
  • 當(dāng)Activity在X軸 = 0%p時龄捡,剛好完全在屏幕內(nèi)(位置2)
  • 當(dāng)Activity在X軸 = 100%p時卓嫂,剛好完全超出屏幕到右邊(位置3)

下面自定義一個動畫效果:從右滑到左

// 從中間滑到左邊,即從位置2 -> 位置1:out_to_left.xml
<?xml version="1.0" encoding="utf-8"?>  
<translate xmlns:android="http://schemas.android.com/apk/res/android" >   
        android:duration="500"
        android:fromXDelta="0%p"
        android:toXDelta="-100%p" >  
</translate>

// 從右邊滑到中間聘殖,即從位置3 -> 位置2:in_from_right.xml
<?xml version="1.0" encoding="utf-8"?>  
<translate xmlns:android="http://schemas.android.com/apk/res/android" >   
        android:duration="500"
        android:fromXDelta="100%p"
        android:toXDelta="0%p" >  
</translate>

9. Fragment動畫切換效果

類似于Activity晨雳,F(xiàn)ragment的動畫切換效果同樣存在兩種方式:使用系統(tǒng)預(yù)設(shè)和自定義切換動畫效果行瑞。具體使用如下:

// 方式1:系統(tǒng)預(yù)設(shè)
  // 通過setTransition(int transit)進(jìn)行設(shè)置
  // transit參數(shù)說明
  // 1. FragmentTransaction.TRANSIT_NONE:無動畫
  // 2. FragmentTransaction.TRANSIT_FRAGMENT_OPEN:標(biāo)準(zhǔn)的打開動畫效果
  // 3. FragmentTransaction.TRANSIT_FRAGMENT_CLOSE:標(biāo)準(zhǔn)的關(guān)閉動畫效果
  // 標(biāo)準(zhǔn)動畫設(shè)置好后,在Fragment添加和移除的時候都會有餐禁。

  // 具體使用
  FragmentTransaction fragmentTransaction = mFragmentManager.beginTransaction();
  fragmentTransaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)血久;


// 方式2:自定義動畫效果
  // 通過FragmentTransavtion.setCustomAnimations()設(shè)置
  // 此處的自定義動畫效果同Activity,此處不再過多描述

  // 具體使用
  FragmentTransaction fragmentTransaction = mFragmentManager.beginTransaction();
  fragmentTransaction.setCustomAnimations(R.anim.in_from_right,R.anim.out_to_left);

10. 視圖組(ViewGroup)中子元素的出場效果

視圖組(ViewGroup)中子元素可以具備出場時的補(bǔ)間動畫效果帮非。常用需求場景:為ListViewitem 設(shè)置出場動畫:

ListView出場動畫效果圖

使用步驟如下:

// 步驟1:設(shè)置子元素的出場動畫
// res/anim/view_animation.xml

  <?xml version="1.0" encoding="utf-8"?>
  // 此處采用了組合動畫
  <set xmlns:android="http://schemas.android.com/apk/res/android" >
      android:duration="3000"

      <alpha
          android:duration="1500"
          android:fromAlpha="1.0"
          android:toAlpha="0.0" />

      <translate
          android:fromXDelta="500"
          android:toXDelta="0"
           />
  </set>

// 步驟2:設(shè)置 視圖組(ViewGroup)的動畫文件
// res/anim/anim_layout.xml
  <?xml version="1.0" encoding="utf-8"?>
  // 采用LayoutAnimation標(biāo)簽
  <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
      android:delay="0.5"
      // 子元素開始動畫的時間延遲
      // 如子元素入場動畫的時間總長設(shè)置為300ms
      // 那么 delay = "0.5" 表示每個子元素都會延遲150ms才會播放動畫效果
      // 第一個子元素延遲150ms播放入場效果氧吐;第二個延遲300ms,以此類推

      android:animationOrder="normal"
      // 表示子元素動畫的順序
      // 可設(shè)置屬性為:
      // 1. normal :順序顯示喜鼓,即排在前面的子元素先播放入場動畫
      // 2. reverse:倒序顯示副砍,即排在后面的子元素先播放入場動畫
      // 3. random:隨機(jī)播放入場動畫

      android:animation="@anim/view_animation"
      // 設(shè)置入場的具體動畫效果
      // 將步驟1的子元素出場動畫設(shè)置到這里
      />

// 步驟3:為視圖組(ViewGroup)指定andorid:layoutAnimation屬性
   // 指定的方式有兩種: XML / Java代碼
   // 方式1:XML
   <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF"
        android:orientation="vertical" >
        <ListView
            android:id="@+id/listView1"
            android:layoutAnimation="@anim/anim_layout"
            // 指定layoutAnimation屬性用以指定子元素的入場動畫
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    // 方式2:Java
    // 注:不需額外設(shè)置res/ anim /anim_layout.xml該xml文件了
    ListView lv = (ListView) findViewById(R.id.listView1);

    // 加載子元素的出場動畫
    Animation animation = AnimationUtils.loadAnimation(this,R.anim.anim_item);
    
    // 設(shè)置LayoutAnimation的屬性
    LayoutAnimationController controller = new LayoutAnimationController(animation);
    controller.setDelay(0.5f);
    controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
    
    // 為ListView設(shè)置LayoutAnimation的屬性
    lv.setLayoutAnimation(controller);

11. 高級使用

除了上述使用,還有一些額外的高級用法:

  • 組合動畫
  • 監(jiān)聽動畫
  • 插值器
  • 估值器

11.1 組合動畫

上面講的都是單個動畫效果庄岖,但實(shí)際中很多需求都需要同時使用平移豁翎、縮放、旋轉(zhuǎn) & 透明度4種動畫隅忿,即組合動畫心剥。


組合動畫

具體使用如下:

// 方式:xml跟java代碼設(shè)置

// 方式1:xml
 // 步驟1:在路徑 res/anim 的文件夾里創(chuàng)建動畫效果 .xml文件 - view_animation.xml
 // 步驟2:設(shè)置組合動畫(同單個動畫設(shè)置)
  <?xml version="1.0" encoding="utf-8"?>
    // 采用< Set/>標(biāo)簽
    <set xmlns:android="http://schemas.android.com/apk/res/android">

    // 組合動畫同樣具備公共屬性
        android:duration="3000" // 動畫持續(xù)時間(ms),必須設(shè)置背桐,動畫才有效果
        android:startOffset ="1000" // 動畫延遲開始時間(ms)
        android:fillBefore = “true” // 動畫播放完后优烧,視圖是否會停留在動畫開始的狀態(tài),默認(rèn)為true
        android:fillAfter = “false” // 動畫播放完后链峭,視圖是否會停留在動畫結(jié)束的狀態(tài)畦娄,優(yōu)先于fillBefore值,默認(rèn)為false
        android:fillEnabled= “true” // 是否應(yīng)用fillBefore值弊仪,對fillAfter值無影響熙卡,默認(rèn)為true
        android:repeatMode= “restart” // 選擇重復(fù)播放動畫模式,restart代表正序重放励饵,reverse代表倒序回放驳癌,默認(rèn)為restart|
        android:repeatCount = “0” // 重放次數(shù)(所以動畫的播放次數(shù)=重放次數(shù)+1),為infinite時無限重復(fù)
        android:interpolator = @[package:]anim/interpolator_resource // 插值器役听,即影響動畫的播放速度,下面會詳細(xì)講
        
    // 組合動畫獨(dú)特的屬性
        android:shareinterpolator = “true”
        // 表示組合動畫中的動畫是否和集合共享同一個差值器
        // 如果集合不指定插值器颓鲜,那么子動畫需要單獨(dú)設(shè)置

    // 組合動畫播放時是全部動畫同時開始
    // 如果想不同動畫不同時間開始就要使用android:startOffset屬性來延遲單個動畫播放時間

    // 設(shè)置旋轉(zhuǎn)動畫,語法同單個動畫
        <rotate
            android:duration="1000"
            android:fromDegrees="0"
            android:toDegrees="360"
            android:pivotX="50%"
            android:pivotY="50%"
            android:repeatMode="restart"
            android:repeatCount="infinite"
            />

    // 設(shè)置平移動畫典予,語法同單個動畫
        <translate
            android:duration="10000"
            android:startOffset = “1000”// 延遲該動畫播放時間
            android:fromXDelta="-50%p"
            android:fromYDelta="0"
            android:toXDelta="50%p"
            android:toYDelta="0" />

    // 設(shè)置透明度動畫甜滨,語法同單個動畫
        <alpha
            android:startOffset="7000"
            android:duration="3000"
            android:fromAlpha="1.0"
            android:toAlpha="0.0" />


    // 設(shè)置縮放動畫,語法同單個動畫
        <scale
            android:startOffset="4000"
            android:duration="1000"
            android:fromXScale="1.0"
            android:fromYScale="1.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toXScale="0.5"
            android:toYScale="0.5" />
    // 特別注意:
    // 1. 在組合動畫里scale縮放動畫設(shè)置的repeatCount(重復(fù)播放)和fillBefore(播放完后瘤袖,視圖是否會停留在動畫開始的狀態(tài))是無效的艳吠。
    // 2. 所以如果需要重復(fù)播放或者回到原位的話需要在set標(biāo)簽里設(shè)置
    // 3. 但是由于此處rotate旋轉(zhuǎn)動畫里已設(shè)置repeatCount為infinite,所以動畫不會結(jié)束孽椰,也就看不到重播和回復(fù)原位

    </set>

    // 步驟3:播放動畫
        // 創(chuàng)建 需要設(shè)置動畫的 視圖View
        Button mButton = (Button) findViewById(R.id.Button);
        // 創(chuàng)建 動畫對象 并傳入設(shè)置的動畫效果xml文件
        Animation setAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
        // 播放動畫
        mButton.startAnimation(setAnimation);


// 方式2:java代碼設(shè)置
    // 創(chuàng)建 需要設(shè)置動畫的 視圖View
    Button mButton = (Button) findViewById(R.id.Button);
    

    // 組合動畫設(shè)置
    AnimationSet setAnimation = new AnimationSet(true);
    // 步驟1:創(chuàng)建組合動畫對象(設(shè)置為true)

    // 步驟2:設(shè)置組合動畫的屬性
    // 特別說明以下情況
    // 因?yàn)樵谙旅娴男D(zhuǎn)動畫設(shè)置了無限循環(huán)(RepeatCount = INFINITE)
    // 所以動畫不會結(jié)束昭娩,而是無限循環(huán)
    // 所以組合動畫的下面兩行設(shè)置是無效的
    setAnimation.setRepeatMode(Animation.RESTART);
    setAnimation.setRepeatCount(1);// 設(shè)置了循環(huán)一次,但無效

    // 步驟3:逐個創(chuàng)建子動畫(方式同單個動畫創(chuàng)建方式,此處不作過多描述)

    // 子動畫1:旋轉(zhuǎn)動畫
    Animation rotate = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
    rotate.setDuration(1000);
    rotate.setRepeatMode(Animation.RESTART);
    rotate.setRepeatCount(Animation.INFINITE);

    // 子動畫2:平移動畫
    Animation translate = new TranslateAnimation(TranslateAnimation.RELATIVE_TO_PARENT,-0.5f,
    TranslateAnimation.RELATIVE_TO_PARENT,0.5f,
    TranslateAnimation.RELATIVE_TO_SELF,0
    ,TranslateAnimation.RELATIVE_TO_SELF,0);
    translate.setDuration(10000);

    // 子動畫3:透明度動畫
    Animation alpha = new AlphaAnimation(1,0);
    alpha.setDuration(3000);
    alpha.setStartOffset(7000);

    // 子動畫4:縮放動畫
    Animation scale1 = new ScaleAnimation(1,0.5f,1,0.5f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
    scale1.setDuration(1000);
    scale1.setStartOffset(4000);

    // 步驟4:將創(chuàng)建的子動畫添加到組合動畫里
    setAnimation.addAnimation(alpha);
    setAnimation.addAnimation(rotate);
    setAnimation.addAnimation(translate);
    setAnimation.addAnimation(scale1);

    // 步驟5:播放動畫
    mButton.startAnimation(setAnimation);
        

11.2 監(jiān)聽動畫

Animation類通過監(jiān)聽動畫開始 / 結(jié)束 / 重復(fù)時刻來進(jìn)行一系列操作。具體使用如下:

// 主要通過setAnimationListener()設(shè)置
Animation.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        // 動畫開始時回調(diào)
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        // 動畫結(jié)束時回調(diào)
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
        //動畫重復(fù)執(zhí)行的時候回調(diào)
    }
});

11.3 插值器

具體請看文章:Android:手把手帶你深入了解神秘的估值器(TypeEvaluator)

11.4 估值器

具體請看文章:Android 動畫:手把手帶你深入了解神秘的插值器(Interpolator)


12. 總結(jié)


歡迎關(guān)注Carson_Ho的簡書

不定期分享關(guān)于安卓開發(fā)的干貨黍匾,追求短栏渺、平、快锐涯,但卻不缺深度磕诊。


請點(diǎn)贊!因?yàn)槟愕墓膭钍俏覍懽鞯淖畲髣恿Γ?/h1>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末纹腌,一起剝皮案震驚了整個濱河市霎终,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌升薯,老刑警劉巖莱褒,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異涎劈,居然都是意外死亡广凸,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進(jìn)店門蛛枚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來谅海,“玉大人,你說我怎么就攤上這事蹦浦∨び酰” “怎么了?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵盲镶,是天一觀的道長侥袜。 經(jīng)常有香客問我,道長徒河,這世上最難降的妖魔是什么系馆? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮顽照,結(jié)果婚禮上由蘑,老公的妹妹穿的比我還像新娘。我一直安慰自己代兵,他們只是感情好尼酿,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著植影,像睡著了一般裳擎。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上思币,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天鹿响,我揣著相機(jī)與錄音羡微,去河邊找鬼。 笑死惶我,一個胖子當(dāng)著我的面吹牛妈倔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播绸贡,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼盯蝴,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了听怕?” 一聲冷哼從身側(cè)響起捧挺,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎尿瞭,沒想到半個月后挨队,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體桦踊,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡宾毒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年前普,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片酥艳。...
    茶點(diǎn)故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡摊溶,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出充石,到底是詐尸還是另有隱情莫换,我是刑警寧澤,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布骤铃,位于F島的核電站拉岁,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏惰爬。R本人自食惡果不足惜喊暖,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望撕瞧。 院中可真熱鬧陵叽,春花似錦、人聲如沸丛版。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽页畦。三九已至胖替,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背独令。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工端朵, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人记焊。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓逸月,卻偏偏與公主長得像,于是被迫代替她去往敵國和親遍膜。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,914評論 2 355

推薦閱讀更多精彩內(nèi)容