週末升級了墨跡天氣，看着引導界面做的不錯，模仿一下，可能與原作者的代碼實現不一樣，但是實現的效果還是差不多的。先分享一篇以前的文章，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>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下載看回復
參考：
http://developer.android.com/guide/topics/resources/animation-resource.html
http://developer.android.com/reference/android/view/animation/Animation.html
