Android中常用的兩種動畫寫法

在Android中常用的兩種動畫,一種是補間動畫(Tween Animation),另一種是幀動畫(Frame Animation)。用一張圖片實現的是補間動畫;定義給出兩個關鍵幀,通過一些算法將給定屬性值在給定的時間內在兩個關鍵幀間漸變是幀動畫,一般兩種動畫的寫法如下:


一、補間動畫(Tween Animation)

主要分爲: 漸變alpha
旋轉rotate
平移translate
縮放scale

res/anim/XXXX.xml ---> 根節點<set>

三個要素:起始狀態、終止狀態、動畫時長

一般寫法:


1.使用xml文檔+Java代碼的方式實現

1.新建文件夾res/anim/splash_anim.xml

文檔內容事例如下:

下面的set集合節點下僅放了一種動畫(漸變動畫)可以同時加入多種動畫,並加入相關屬性

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha 
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="2000"
        />
</set>

2.   在activity_splash.xml佈局文件中添加動畫容器

<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=".SplashActivity" 
    android:background="@drawable/splash"


    android:id="@+id/rl_splash_animcontainer"
    >
</RelativeLayout>

  RelativeLayout   animContainer;

animContainer = (RelativeLayout) findViewById(R.id.rl_splash_animcontainer);

3.  在onCreate方法中對動畫進行初始化,定義方法 initAnim();

private void initAnim() {
Animation anim = AnimationUtils.loadAnimation(this, R.anim.splash_anim);
animContainer.startAnimation(anim);

}

2.純Java代碼實現

1.首先定義一個動畫容器,例如res/layout/activity_splash.xml,給該佈局添加一個id

示例如下:

<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.example.zhihuihn.SplashActivity" 
    android:background="@drawable/splash_bg_newyear"
    android:id="@+id/rl_splash_container">

    <ImageView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/splash_horse_newyear"/>

</RelativeLayout>

2. 在activity中進行相關的view申明定義,可通過黃油刀,或者findViewById的方式,這裏採用黃油刀進行綁定

@Bind(R.id.rl_splash_container)
RelativeLayout animContainer;
3. 在onCreate方法中進行動畫的啓動(使用黃油刀記得也要在此綁定)

ButterKnife.bind(this);
        startAnim();

實現自定義的startAnim()方法

下面通過Java代碼添加了三種動畫,注意動畫的根節點是AnimationSet集合

private void startAnim() {

AnimationSet set=new AnimationSet(false);//此處爲動畫集合,傳false爲不共享動畫差補器,每個動畫獨立

RotateAnimation rotate=new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotate.setDuration(2000);//動畫時間
rotate.setFillAfter(true);//保持動畫播放結束後的狀態

ScaleAnimation scale=new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f,   Animation.RELATIVE_TO_SELF, 0.5f);
scale.setDuration(2000);
scale.setFillAfter(true);

AlphaAnimation alpha=new AlphaAnimation(0, 1);
alpha.setDuration(2000);
alpha.setFillAfter(true);

set.addAnimation(rotate);//將動畫分別添加到集合
set.addAnimation(scale);
set.addAnimation(alpha);


animContainer.startAnimation(set);//啓動動畫

}

二、幀動畫(Frame Animation)

寫法如下:

1)在res文件夾創建drawable文件夾(我們可以將xml文件放置於drawable或anim目錄,官方文檔上是放到了drawable中)。在drawable文件夾下用一個xml文件來描述幀動畫。根元素爲animation-list。根元素中添加item節點,每一個item代表幀動畫中的一幀。每一個item中有兩個屬性:
android:drawable 該幀所顯示的圖像
android:duration 該幀的時長
例子:
<animation-list  xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/web_loading_1" android:duration="200"/>
    <item android:drawable="@drawable/web_loading_2" android:duration="200"/>
    <item android:drawable="@drawable/web_loading_3" android:duration="200"/>
</animation-list>


2)將寫好的幀動畫放到ImageView中呈現。默認的時候,此時ImageView中顯示的幀動畫的第一幀。
3)從ImageView中將幀動畫取出。取出時使用getDrawable方法,該方法的返回值爲Drawable類型。需要將得到的Drawable對象強轉爲AnimationDrawable對象後,調用start方法,啓動幀動畫。

ivLogo = (ImageView) findViewById(R.id.iv_splash_logo);

Drawable d = ivLogo.getDrawable();
((AnimationDrawable)d).start(); 

示例如下:

1. res/drawable/xxx_anim.xml


<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/web_loading_1" android:duration="200"/>
    <item android:drawable="@drawable/web_loading_2" android:duration="200"/>
    <item android:drawable="@drawable/web_loading_3" android:duration="200"/>
</animation-list>


2. res/layout/activity_splash.xml


<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".SplashActivity" >

    <ImageView 
        android:id="@+id/iv_splash_logo"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:src="@drawable/xxx_anim"
        />  
    
</RelativeLayout>

3. public class SplashActivity extends Activity {
ImageView  ivLogo;

      AnimationDrawable  animDrawable;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash);


  1.   if (animDrawable.isRunning()) {  
  2.                     animDrawable.stop();  
  3.                 }else {  
  4.                     animDrawable.start();  
  5.                 }  


  1.   ivLogo = (ImageView) findViewById(R.id.iv_splash_logo);
  2.         /** 
  3. * ivLogo裏面顯示幀動畫   
  4.          * 這裏設置的是setBackgroundResource,那麼你獲取的時候通過getBackground 
  5.          */  
  6.          ivLogo.setBackgroundResource(R.drawable.xxx_anim);  
  7.         animDrawable = (AnimationDrawable)ivLogo.getBackground();  


  1.         /** 
  2.          * 在xml裏面通過src來設置跟在代碼裏面使用setImageResource獲取的時候通過getDrawable 
  3.          * 例如:animationIV2.setImageResource(R.anim.load_animation_2);是一樣的 
  4.  *下面是在xml文檔的src不設置資源,通過代碼設置資源,再使用getDrawable()方法取出動畫
  5.          */  
  6.         ivLogo = (ImageView)findViewById(R.id.iv_splash_logo);  

  7.         ivLogo.setImageResource(R.anim.xxx_anim);  
  8.         animDrawable = (AnimationDrawable)ivLogo.getDrawable();  
  9.      

}

}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章