Android 之 3種動畫

這里將講述:
  1. 逐幀動畫(FrameAnimation) 、補間動畫(TweenAnimation) 敢朱、屬性動畫(PropertyAnimation)剪菱;
  2. As的res文件中,分別使用drawable拴签、anim孝常、animator目錄下的xml編寫動畫;
逐幀動畫(FrameAnimation)

它的實現(xiàn)方式也有兩種:代碼和xml方式篓吁;

  • 代碼方式:

    private void setSrcFrameAnim() {  
        animationDrawable = new AnimationDrawable();  
        // 為AnimationDrawable添加動畫幀  
        animationDrawable.addFrame(  
            getResources().getDrawable(R.drawable.img00), 50);  
        animationDrawable.addFrame(  
            getResources().getDrawable(R.drawable.img01), 50);  
        animationDrawable.addFrame(  
            getResources().getDrawable(R.drawable.img02), 50);  
       
        // 設置為循環(huán)播放  
        animationDrawable.setOneShot(false);  
        imageView.setBackground(animationDrawable);  
        animationDrawable.start(); 
    }  
    
    
  • xml方式:
    在res/drawable文件夾下新建animation-list的XML實現(xiàn)幀動畫

     <?xml version="1.0" encoding="utf-8"?>  
     <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
         android:oneshot="true" >  
       
         <!-- animation-list 幀動畫 -->  
         <!-- android:oneshot的值為 false代表播放多次茫因,true代表只播放一次 -->  
    
         <item  
         android:drawable="@drawable/img00"  
         android:duration="50"/>  
         <item  
         android:drawable="@drawable/img01"  
         android:duration="50"/>  
         <item  
         android:drawable="@drawable/img02"  
         android:duration="50"/>  
     </animation-list>  
    

    在布局中可以這樣:

      <RelativeLayout 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"  
        tools:context="com.havorld.frameanimation.MainActivity" >  
        <ImageView  
        android:id="@+id/imageView"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_centerInParent="true" />  
        <!-- android:background="@drawable/frame_anim" -->  
     </RelativeLayout>  
    

    在代碼中我們這樣:

    private void setFrameAnim() {  
        imageView.setBackgroundResource(R.drawable.frame_anim);  
        animationDrawable = (AnimationDrawable) imageView.getBackground();  
        animationDrawable.start(); 
    
        //或者這樣
        animationDrawable = (AnimationDrawable) getResources().getDrawable(R.drawable.frame_anim);  
        imageView.setBackground(animationDrawable);  
        animationDrawable.start(); 
    }
    
    


  • Drawable Animation(補間動畫)

補間動畫的屬性有:RotateAnimation、AlphaAnimation杖剪、ScaleAnimation冻押、TranslateAnimation、AnimationSet 盛嘿,再者可以加上用于xml動畫文件引入的AnimationUtils類洛巢,示例:

  ImageView iv = (ImageView) dialog.findViewById(R.id.loading_iv);
  RotateAnimation rotateAnimation = new RotateAnimation(0, 5760, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f); //相對自己左上為0.0
 // Animation rotateAnimation=AnimationUtils.loadAnimation(this, R.anim.rote); //當然這里你也可以用xml方式
  rotateAnimation.setDuration(10000);
  iv.startAnimation(rotateAnimation); 
// rotateAnimation.start(); //或這樣啟動


  • Property Animation 屬性動畫

涉及到的屬性值有 (名稱一定要寫對):
??? 1、透明度:alpha
??? 2次兆、旋轉度數(shù):rotation稿茉、rotationX、rotationY
??? 3芥炭、平移:translationX漓库、translationY
??? 4、縮放:scaleX园蝠、scaleY

示例 1. 使用代碼實現(xiàn):

    ObjectAnimator animator = ObjectAnimator
        .ofFloat(iv, "rotation", 0.0F, 360.0F)
        .setDuration(800);
    animator .setRepeatCount(ObjectAnimator.INFINITE);
    animator.setInterpolator(new LinearInterpolator());
    animator .start();

示例 2. 使用 xml文件配置動畫(R.animator.anim_file):

    <set xmlns:android="http://schemas.android.com/apk/res/android"  
        android:ordering="sequentially" >  
        <objectAnimator  
            android:duration="2000"  
            android:propertyName="translationX"  
            android:valueFrom="-500"  
            android:valueTo="0"  
            android:valueType="floatType" >  
        </objectAnimator>  
      
        <set android:ordering="together" >  
            <objectAnimator  
                android:duration="3000"  
                android:propertyName="rotation"  
                android:valueFrom="0"  
                android:valueTo="360"  
                android:valueType="floatType" >  
            </objectAnimator>  
      
            <set android:ordering="sequentially" >  
                <objectAnimator  
                    android:duration="1500"  
                    android:propertyName="alpha"  
                    android:valueFrom="1"  
                    android:valueTo="0"  
                    android:valueType="floatType" >  
                </objectAnimator>  
                <objectAnimator  
                    android:duration="1500"  
                    android:propertyName="alpha"  
                    android:valueFrom="0"  
                    android:valueTo="1"  
                    android:valueType="floatType" >  
                </objectAnimator>  
            </set>  
        </set>  
    </set>  

然后在代碼中用AnimatorInflater引入:

   Animator animator = AnimatorInflater.loadAnimator(context, R.animator.anim_file);  
   animator.setTarget(view);  
   animator.start();  

  • 動畫總結:

    補間動畫:
    XXXAnimation animation = new XXXAnimation (); //需要什么動畫就new什么動畫渺蒿,然后.start();
    AnimationSet animationSet = new AnimationSet(false); //代碼方式實現(xiàn)補間動畫
    animationSet.addAnimation(new AlphaAnimation(1,0));
    Animation animation = AnimationUtils.loadAnimation(context, R.anim.cs);//加載的是補間動畫文件(在anim中);
    注意:若想給動畫設置重復模式彪薛,設置給AnimationSet是無效的茂装,需要給每個單個動畫設置才能生效,如:
    alphaAnimation.setRepeatMode(Animation.RESTART);
    alphaAnimation.setRepeatCount(Animation.INFINITE);

    屬性動畫:
    ObjectAnimator.ofFloat(iv, "rotation", 0.0F, 360.0F).start();
    AnimatorSet animatorSet = new AnimatorSet(); //代碼方式實現(xiàn)屬性動畫
    animatorSet.playTogether();
    Animator animator = AnimatorInflater.loadAnimator(context, R.animator.scale_with_alpha); //加載的是屬性動畫文件(在animator中)

    anim善延、animator目錄下的xml中動畫屬性是不同的:

    1. res的anim文件夾下XML文件中屬性對應關系(補間動畫):
      <set> 對應代碼中 AnimationSet
      <rotate> 對應: RotateAnimation
      <alpha> 對應: AlphaAnimation
      <scale> 對應: ScaleAnimation
      <translate> 對應: TranslateAnimation
    2. res的animator文件夾的XML文件中屬性對應關系(屬性動畫):
      <set> 對應代碼中的 AnimatorSet
      <objectAnimator> 對應代碼中的 ObjectAnimator
      <animator> 對應代碼中的 ValueAnimator
  • 接下來說下Drawable的繪制(在res的drawable目錄下):

    1 . <layer-list>的機理就是一層層的覆蓋少态,示例:

      <?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <!--底部圖層a,是其他圖層item位置鎖定的基礎-->
        <item android:height="99dp" android:width="99dp" android:gravity="center" >
          <rotate
              android:drawable="@drawable/ic_launcher"  <----此處可用shap替代易遣,也可以放帶動畫的Drawable
              android:fromDegrees="0"
              android:pivotX="50%"
              android:pivotY="50%"
              android:toDegrees="360"/>
        </item>  
    
        <!--該圖層放在底部圖層a之上彼妻,位置為相對a的位置-->
        <item
            android:gravity="center"
            android:height="40dp"
            android:width="40dp">
          <rotate
              android:drawable="@drawable/lt"
              android:fromDegrees="360"
              android:pivotX="50%"
              android:pivotY="50%"
              android:toDegrees="0"/>
        </item>
      </layer-list>
    

    2 . Drawable的<animated-selector>類似于selector(效果如CheckBox的動畫變換) 示例:

      <?xml version="1.0" encoding="utf-8"?>
      <animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:id="@+id/state_on"
            android:drawable="@drawable/lt"
            android:state_selected="true"/>
        <item
            android:id="@+id/state_off"
            android:drawable="@drawable/progressbar"
            android:state_selected="false"/>
        <transition
            android:fromId="@+id/state_on"
            android:toId="@+id/state_off">
          <animation-list android:oneshot="true">
            <item
                android:drawable="@drawable/lt"
                android:duration="188"/>
            <item
                android:drawable="@drawable/ic_launcher"
                android:duration="188"/>
            <item
                android:drawable="@drawable/shape_noraml"
                android:duration="122"/>
            <item
                android:drawable="@drawable/progressbar"
                android:duration="122"/>
          </animation-list>
        </transition>
    
        <transition    <!--補間動畫執(zhí)行過程配置-->
            android:fromId="@+id/state_off"
            android:toId="@+id/state_on">
          <animation-list android:oneshot="true">
            <item
                android:drawable="@drawable/progressbar"
                android:duration="122"/>
            <item
                android:drawable="@drawable/shape_noraml"
                android:duration="122"/>
            <item
                android:drawable="@drawable/ic_launcher"
                android:duration="188"/>
            <item
                android:drawable="@drawable/lt"
                android:duration="188"/>
          </animation-list>
        </transition>
      </animated-selector>
    

    布局文件中代碼

    <Button
       android:id="@+id/btn_web_native"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentRight="true"
       android:background="@drawable/animation_selector"
       android:onClick="onClicked"
       />
    

    在代碼中配置

      view.setSelected(!view.isSelected());
    
  • 告訴你個小秘密:

    ProgressBar聽這名字就是做進度用的,但是它功能不僅僅如此训挡,你也可以用它來做圖片切換澳骤、旋轉等動畫歧强,比如上邊三種方法繪制的Drawable都能設置給ProgressBar,而達到強大的動畫效果为肮,如下:

    布局代碼:

      <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="77dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/loading_iv"
        android:indeterminateDrawable="@drawable/loadding" />
    

    drawable/loadding.xml代碼:

              
        <?xml version="1.0" encoding="utf-8"?>
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
          <!--底部圖層a摊册,是其他圖層item位置鎖定的基礎-->
          <item
              android:gravity="center"
              android:height="59dp"
              android:width="59dp">
            <rotate
                android:fromDegrees="1080"
                android:pivotX="50%"
                android:pivotY="50%"
                android:toDegrees="0">
              <shape            <----此處改用shap替代drawable,下邊則采用帶動畫的drawable
                  android:innerRadiusRatio="3"
                  android:shape="ring"
                  android:thicknessRatio="9"
                  android:useLevel="false">
                <gradient
                    android:centerColor="@android:color/holo_red_light"
                    android:centerY="0.2"
                    android:endColor="#1E90FF"
                    android:startColor="#000000"
                    android:type="sweep"
                    android:useLevel="false"/>
              </shape>
            </rotate>
          </item>
        
          <!--該圖層放在底部圖層a之上颊艳,位置為相對a的位置-->
          <item android:drawable="@drawable/progressbar"  <----此處采用帶動畫的drawable
              android:gravity="center"
              android:height="33dp"
              android:width="33dp">
          </item>
        </layer-list>
    

    xml文件@drawable/progressbar代碼:

     <?xml version="1.0" encoding="utf-8"?>
     <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
         android:pivotX="50%"
         android:pivotY="50%"
         android:duration="10"
         android:repeatCount="-1"
         android:fromDegrees="0"
         android:toDegrees="360">
       <shape
           android:innerRadiusRatio="3"
           android:shape="ring"
           android:thicknessRatio="8"
           android:useLevel="false">
         <gradient
             android:centerColor="#FF7121"
             android:centerY="0.50"
             android:endColor="#FFFF00"
             android:startColor="#6BD3FF"
             android:type="sweep"
             android:useLevel="false"/>
       </shape>
     </animated-rotate>
    

    當然ProgressBar也可以用上邊的animation-list方式添加 android:indeterminateDrawable="@drawable/animation-list" 屬性茅特,效果也很棒,這個實驗的機會就留給你啦棋枕!

  • 其它

    還有一種簡單的設置動畫的方法白修,如下:

    //ViewCompat這樣的單次屬性動畫,只適用于要求只執(zhí)行一次的需求重斑,執(zhí)行完后所有狀態(tài)將會停留在最后一刻兵睛,
    //這種單值設置動畫就是為了設置view的終態(tài)的,其默認view的初始狀態(tài)就是當其view的狀態(tài)窥浪。
    ViewCompat.animate(target)
         .setDuration(2100)
         .translationY(screenData.onScreenHeight/2)
         .setInterpolator(new BounceInterpolator())
         .rotation(1200)
         .alpha(0)
         .scaleX(8)
         .scaleY(7)
         .start()祖很;
    
    


漾脂。
假颇。

骨稿。
笨鸡。
好啦,就先寫到這里坦冠,后繼再來追加形耗。。辙浑。

.

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末趟脂,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子例衍,更是在濱河造成了極大的恐慌,老刑警劉巖已卸,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件佛玄,死亡現(xiàn)場離奇詭異,居然都是意外死亡累澡,警方通過查閱死者的電腦和手機均芽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進店門险耀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來皆辽,“玉大人俘种,你說我怎么就攤上這事∨剑” “怎么了?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長腮介。 經(jīng)常有香客問我,道長端衰,這世上最難降的妖魔是什么叠洗? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮旅东,結果婚禮上灭抑,老公的妹妹穿的比我還像新娘。我一直安慰自己抵代,他們只是感情好腾节,可當我...
    茶點故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著荤牍,像睡著了一般案腺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上参淫,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天救湖,我揣著相機與錄音,去河邊找鬼涎才。 笑死鞋既,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的耍铜。 我是一名探鬼主播邑闺,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼棕兼!你這毒婦竟也來了陡舅?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤伴挚,失蹤者是張志新(化名)和其女友劉穎靶衍,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體茎芋,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡颅眶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了田弥。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片涛酗。...
    茶點故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出商叹,到底是詐尸還是另有隱情燕刻,我是刑警寧澤,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布剖笙,位于F島的核電站卵洗,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏枯途。R本人自食惡果不足惜忌怎,卻給世界環(huán)境...
    茶點故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望酪夷。 院中可真熱鬧榴啸,春花似錦、人聲如沸晚岭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽坦报。三九已至库说,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間片择,已是汗流浹背潜的。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留字管,地道東北人啰挪。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像嘲叔,于是被迫代替她去往敵國和親亡呵。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,654評論 2 354

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

  • 1 背景 不能只分析源碼呀硫戈,分析的同時也要整理歸納基礎知識锰什,剛好有人微博私信讓全面說說Android的動畫,所以今...
    未聞椛洺閱讀 2,705評論 0 10
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,085評論 25 707
  • 最近工作比較清閑丁逝,所以想系統(tǒng)的復習和學習下自己比較短缺的知識汁胆,所以。霜幼。沦泌。 程序運行效果圖: Android動畫主要...
    小沈新手閱讀 508評論 0 1
  • 【Android 動畫】 動畫分類補間動畫(Tween動畫)幀動畫(Frame 動畫)屬性動畫(Property ...
    Rtia閱讀 6,150評論 1 38
  • 轉載一篇高質(zhì)量博文,原地址請戳這里轉載下來方便今后查看辛掠。1 背景不能只分析源碼呀,分析的同時也要整理歸納基礎知識,...
    Elder閱讀 1,942評論 0 24