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

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

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

墨跡天氣引導界面共有4個視圖,先看一下:(這裡引入的圖片都是實現後的,截圖都是靜態圖,運行程序看動畫效果)。

圖一 圖二

vcD48cD48aW1nIHNyYz0=”https://www.aiwalls.com/uploadfile/Collfiles/20140323/2014032309111562.jpg” width=”240″ height=”400″ alt=”\” />

圖三 圖四

圖一動畫效果:

圖一中有四個動畫效果,最上面的“極低耗電”標示,最下面的箭頭標示,還有中間旋轉的電池圖標和電子表的閃動,最上面的使用的漸變尺寸(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() {

					@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);

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

案例apk下載
/*** @author 張興業* https://blog.csdn.net/xyz_lmn* 我的新浪微博:@張興業TBOW*/

參考:

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

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

發佈留言