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

周末升級了墨跡天氣，看著引導介面做的不錯，模仿一下，可能與原作者的代碼實現不一樣，但是實現的效果還是差不多的。先分享一篇以前的文章，android動畫的基礎知識，《Android UI開發第十二篇——動畫效果Animation（一）》，寫的不好，讀者也可以自行搜尋下android動畫相關知識。模仿墨跡天氣的引導介面動畫使用的android動畫的基礎知識。

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

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

圖一 圖二

圖三 圖四

圖一動畫效果：

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

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

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

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

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

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

電子錶閃動動畫使用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() {@Overridepublic void onGlobalLayout() {// TODO Auto-generated method stubint 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.INFINITEanimation.setInterpolator(interpolator);t4_icon1.startAnimation(animation);

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

案例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