Android UI開發第四十一篇——墨跡天氣3.0引導界面及動畫實現

    週末升級了墨跡天氣，看着引導界面作的不錯，模仿一下，可能與原做者的代碼實現不同，可是實現的效果仍是差很少的。先分享一篇之前的文章，android動畫的基礎知識，《Android UI開發第十二篇——動畫效果Animation（一）》，寫的很差，讀者也能夠自行搜索下android動畫相關知識。模仿墨跡天氣的引導界面動畫使用的android動畫的基礎知識。

 

     實現墨跡天氣向上滑動的viewpager使用的開源庫ViewPager-Android。ViewPager-Android開源庫設置app:orientation定義滑動方向。

 

    墨跡天氣引導界面共有4個視圖，先看一下：（這裏引入的圖片都是實現後的，截圖都是靜態圖，運行程序看動畫效果）。

                

圖一                                                                                          圖二

    

                

圖三                                                                                        圖四

 

圖一動畫效果：    

    圖一中有四個動畫效果,最上面的「極低耗電」標示，最下面的箭頭標示，還有中間旋轉的電池圖標和電子錶的閃動，最上面的使用的漸變尺寸（scale）動畫效果:

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="2000"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.1"
        android:toYScale="1.1" />
</set>

 

下面簡單說明了scale的各個屬性：

 

<!-- 尺寸伸縮動畫效果 scale
       屬性：interpolator 指定一個動畫的插入器
       常見動畫插入器:
            accelerate_decelerate_interpolator  加速-減速 動畫插入器
            accelerate_interpolator        加速-動畫插入器
            decelerate_interpolator        減速- 動畫插入器
            anticipate_interpolator	先回退一小步而後加速前進
            anticipate_overshoot_interpolator	在上一個基礎上超出終點一小步再回到終點
            bounce_interpolator	最後階段彈球效果
            cycle_interpolator	週期運動
            linear_interpolator	勻速
            overshoot_interpolator	快速到達終點並超出一小步最後回到終點
      浮點型值：
          
            fromXScale 屬性爲動畫起始時 X座標上的伸縮尺寸    
            toXScale   屬性爲動畫結束時 X座標上的伸縮尺寸     
         
            fromYScale 屬性爲動畫起始時Y座標上的伸縮尺寸    
            toYScale   屬性爲動畫結束時Y座標上的伸縮尺寸    
         
            說明:
                 以上四種屬性值    
     
                    0.0表示收縮到沒有 
                    1.0表示正常無伸縮     
                    值小於1.0表示收縮  
                    值大於1.0表示放大
         
            pivotX     屬性爲動畫相對於物件的X座標的開始位置
            pivotY     屬性爲動畫相對於物件的Y座標的開始位置
         
            說明:
                    以上兩個屬性值 從0%-100%中取值
                    50%爲物件的X或Y方向座標上的中點位置
         
        長整型值：
            duration  屬性爲動畫持續時間
            說明:   時間以毫秒爲單位
 
        布爾型值:
            fillAfter 屬性 當設置爲true ，該動畫轉化在動畫結束後被應用
-->

 

最下面的箭頭標示使用了混合動畫：

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:repeatMode="reverse" >

    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="-15"
        android:repeatCount="infinite"
        android:toXDelta="0"
        android:toYDelta="20" />

    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:repeatCount="infinite"
        android:toAlpha="0.3" />

</set>

混合動畫是set集合，包含了平移動畫（translate）和漸變更畫（alpha），對這兩動畫簡單說明：

 

 

  <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:repeatCount="infinite"
        android:toAlpha="0.3" />
    <!--
         透明度控制動畫效果 alpha
        浮點型值：
            fromAlpha 屬性爲動畫起始時透明度
            toAlpha   屬性爲動畫結束時透明度
            說明: 
                0.0表示徹底透明
                1.0表示徹底不透明
            以上值取0.0-1.0之間的float數據類型的數字
         
        長整型值：
            duration  屬性爲動畫持續時間
            說明:     
                時間以毫秒爲單位
        整型值:        
            repeatCount：重複次數
            說明：
            infinite：循環執行，
            具體正整數表示循環次數
            
             repeatMode：重複模式，
             說明：
                restart：從新從頭開始執行
                reverse：反方向執行
             
    -->

 

   <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="-15"
        android:repeatCount="infinite"
        android:toXDelta="0"
        android:toYDelta="20" />
    <!-- translate 平移動畫效果
        整型值:
            fromXDelta 屬性爲動畫起始時 X座標上的位置    
            toXDelta   屬性爲動畫結束時 X座標上的位置
            fromYDelta 屬性爲動畫起始時 Y座標上的位置
            toYDelta   屬性爲動畫結束時 Y座標上的位置
            注意:
                     沒有指定fromXType toXType fromYType toYType 時候，
                     默認是以本身爲相對參照物  ，默認參考物最重要         
        長整型值：
            duration  屬性爲動畫持續時間
            說明:   時間以毫秒爲單位
-->

 

中間的電池動畫使用了旋轉（rotate）動畫和漸變尺寸動畫的組合：

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <scale
        android:duration="800"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.2"
        android:toYScale="1.2" />

    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:toDegrees="359.0" />

</set>

前面介紹了漸變尺寸動畫，下面只介紹旋轉動畫：

 

 

  <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:toDegrees="359.0" />
    <!-- rotate 旋轉動畫效果
       屬性：interpolator 指定一個動畫的插入器
           
       浮點數型值:
            fromDegrees 屬性爲動畫起始時物件的角度    
            toDegrees   屬性爲動畫結束時物件旋轉的角度 能夠大於360度   
 
         
            說明:
                     當角度爲負數——表示逆時針旋轉
                     當角度爲正數——表示順時針旋轉              
                     (負數from——to正數:順時針旋轉)   
                     (負數from——to負數:逆時針旋轉) 
                     (正數from——to正數:順時針旋轉) 
                     (正數from——to負數:逆時針旋轉)       
 
            pivotX     屬性爲動畫相對於物件的X座標的開始位置
            pivotY     屬性爲動畫相對於物件的Y座標的開始位置
                 
            說明:        以上兩個屬性值 從0%-100%中取值
                         50%爲物件的X或Y方向座標上的中點位置
 
        長整型值：
            duration  屬性爲動畫持續時間
            說明:       時間以毫秒爲單位
-->

 

電子錶閃動動畫使用animation-list實現的逐幀動畫：

 

 

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >
<!--   
    根標籤爲animation-list，其中oneshot表明着是否只展現一遍，設置爲false會不停的循環播放動畫  
    根標籤下，經過item標籤對動畫中的每個圖片進行聲明  
    android:duration 表示展現所用的該圖片的時間長度  
 -->  
    <item
        android:drawable="@drawable/tutorial1_icon1"
        android:duration="200"/>
    <item
        android:drawable="@drawable/tutorial1_icon2"
        android:duration="200"/>

</animation-list>

 

 

Anima啓動：

t1_icon1.setImageResource(R.drawable.t1_frame_animation);
			t1_icon1_animationDrawable = (AnimationDrawable) t1_icon1
					.getDrawable();
			t1_icon1_animationDrawable.start();

 

圖二動畫效果： 

    圖二中最上面的「極小安裝」動畫和最下面的箭頭動畫和圖一中同樣，不作過多介紹，中間動畫使用的尺寸漸變更畫，和圖一中的尺寸漸變更畫同樣，也很少介紹。

 

 

圖三動畫效果： 

    圖二中最上面的「極速流暢」動畫和最下面的箭頭動畫和圖一中同樣，不作過多介紹。中間效果使用了雲移動效果使用了平移動畫，火箭噴氣效果使用了animation-list的逐幀動畫。逐幀動畫就很少說了，這裏的平移動畫沒有使用xml文件實現，使用的java代碼，爲了適配多種屏幕，須要計算平移的初始位置，代碼定義了幾個位置：

 

 

	view3.getViewTreeObserver().addOnGlobalLayoutListener(
				new OnGlobalLayoutListener() {

					@Override
					public void onGlobalLayout() {
						// TODO Auto-generated method stub
						int h1 = centerLayout.getTop();
						int h2 = centerLayout.getBottom();
						DensityUtil densityUtil = new DensityUtil(
								MainActivity.this);
						int w = densityUtil.getScreenWidth();

						fx1 = t3_icon2.getTop() + t3_icon2.getHeight();
						fy1 = -t3_icon2.getTop() - t3_icon2.getHeight();
						tx1 = -t3_icon2.getWidth() - t3_icon2.getLeft();
						ty1 = t3_icon2.getTop() + t3_icon2.getLeft()
								+ t3_icon2.getWidth();

						fx2 = t3_icon3.getTop() + t3_icon3.getHeight();
						fy2 = -t3_icon3.getTop() - t3_icon3.getHeight();
						tx2 = -t3_icon3.getWidth() - t3_icon3.getLeft();
						ty2 = t3_icon3.getTop() + t3_icon3.getLeft()
								+ t3_icon3.getWidth();

						fx3 = w - t3_icon4.getLeft();
						fy3 = -(w - t3_icon4.getLeft());
						tx3 = -(h2 - h1 - t3_icon4.getTop());
						ty3 = h2 - h1 - t3_icon4.getTop();

						fx4 = w - t3_icon5.getLeft();
						fy4 = -(w - t3_icon5.getLeft());
						tx4 = -(h2 - h1 - t3_icon5.getTop());
						ty4 = h2 - h1 - t3_icon5.getTop();
					}
				});

 

 

圖四動畫效果：

    圖四中「墨跡天氣3.0」圖片使用了RotateAnimation，動畫插值器使用的CycleInterpolator，「全面革新 我是極致控」使用的漸變尺寸動畫。

int pivot = Animation.RELATIVE_TO_SELF;
			CycleInterpolator interpolator = new CycleInterpolator(3.0f);
			RotateAnimation animation = new RotateAnimation(0, 10, pivot,
					0.47f, pivot, 0.05f);
			animation.setStartOffset(500);
			animation.setDuration(3000);
			animation.setRepeatCount(1);// Animation.INFINITE
			animation.setInterpolator(interpolator);
			t4_icon1.startAnimation(animation);

上面基本實現了墨跡天氣的動畫效果。

 

資源庫下載：http://download.csdn.net/detail/xyz_lmn/7094071

demo下載看回復

 

案例apk下載
/**

* @author 張興業

*  http://blog.csdn.net/xyz_lmn

*  個人新浪微博：@張興業TBOW

*/

 

 

參考：

http://developer.android.com/guide/topics/resources/animation-resource.html

http://developer.android.com/reference/android/view/animation/Animation.html