Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android UI開發第四十三篇——使用Property Animation實現墨跡天氣3.0引導界面及動畫實現

Android UI開發第四十三篇——使用Property Animation實現墨跡天氣3.0引導界面及動畫實現

編輯:關於Android編程

前面寫過《墨跡天氣3.0引導界面及動畫實現》,裡面完美實現了動畫效果,那一篇文章使用的View Animation,這一篇文章使用的Property Animation實現。Property Animation是Android3.0以後新增的動畫庫。

這篇文章的源碼以及效果在github。

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

 

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

 

/ /

圖一 圖二

 

/ /

圖三 圖四


 

墨跡天氣的引導界面使用的無非是移動、漸變、縮放、轉動或者其中幾個的組合。我們介紹其中的部分實現。

 

1、縮放動畫

 

首先是圖一的“極低耗電”使用了一個縮放效果,使用Property Animation實現如下:

xml動畫文件:

 




    
    


 

java使用:

 

	animation1=(AnimatorSet)AnimatorInflater.loadAnimator(PropertyAnimActivity.this,  
				    R.animator.tutorail_rotate); 
			LinearInterpolator lin = new LinearInterpolator();
			animation1.setInterpolator(lin);
			t1_icon2.setVisibility(View.VISIBLE);
			
			animation1.setTarget(t1_icon2);  
			animation1.start(); 


 

2、移動漸變組合動畫

 

圖一中下面的箭頭使用了移動漸變組合動畫,實現如下:

xml文件:

 




    

 

 

Java調用動畫資源和前面是一樣的,不做過多說明。

3、旋轉縮放組合動畫

 

圖1中間使用了旋轉縮放組合動畫,,實現如下:

 




    
        
        
    

    
  

 

 

Java調用動畫資源和前面是一樣的,不做過多說明。

 

4、平移動畫

 

圖三更多的使用了平移動畫,因為要計算位置,沒有使用xml資源文件,Java實現:

 

	transAnimationX2=ObjectAnimator.ofFloat(t3_icon2, translationX, fx1, tx1);
			transAnimationX2.setDuration(800);
			transAnimationX2.setRepeatCount(Animation.INFINITE);// Animation.INFINITE
			transAnimationX2.setRepeatMode(Animation.RESTART);
			transAnimationX2.setInterpolator(new LinearInterpolator());
			
			transAnimationY2=ObjectAnimator.ofFloat(t3_icon2, translationY, fy1, ty1);
			transAnimationY2.setDuration(800);
			transAnimationY2.setRepeatCount(Animation.INFINITE);// Animation.INFINITE
			transAnimationY2.setRepeatMode(Animation.RESTART);
			transAnimationY2.setInterpolator(new LinearInterpolator());
			
	
			
			PropertyValuesHolder pvhX3 = PropertyValuesHolder.ofFloat(translationX, fx2, tx2);
			PropertyValuesHolder pvhY3 = PropertyValuesHolder.ofFloat(translationY, fy2, ty2);
			transAnimation3=ObjectAnimator.ofPropertyValuesHolder(t3_icon3, pvhX3, pvhY3);
			transAnimation3.setDuration(1200);
			transAnimation3.setRepeatCount(Animation.INFINITE);
			transAnimation3.setRepeatMode(Animation.RESTART);
			transAnimation3.setInterpolator((new LinearInterpolator()));

			
			PropertyValuesHolder pvhX4 = PropertyValuesHolder.ofFloat(translationX, fx3, tx3);
			PropertyValuesHolder pvhY4 = PropertyValuesHolder.ofFloat(translationY, fy3, ty3);
			transAnimation4=ObjectAnimator.ofPropertyValuesHolder(t3_icon4, pvhX4, pvhY4);
			transAnimation4.setDuration(1200);
			transAnimation4.setRepeatCount(Animation.INFINITE);
			transAnimation4.setRepeatMode(Animation.RESTART);
			transAnimation4.setInterpolator((new LinearInterpolator()));



			PropertyValuesHolder pvhX5 = PropertyValuesHolder.ofFloat(translationX, fx4, tx4);
			PropertyValuesHolder pvhY5 = PropertyValuesHolder.ofFloat(translationY, fy4, ty4);
			transAnimation5=ObjectAnimator.ofPropertyValuesHolder(t3_icon5, pvhX5, pvhY5);
			transAnimation5.setDuration(800);
			transAnimation5.setRepeatCount(Animation.INFINITE);
			transAnimation5.setRepeatMode(Animation.RESTART);
			transAnimation5.setInterpolator((new LinearInterpolator()));
			
			flag3=true;
			
			// 延遲1秒
			new Handler() {				
				@Override
				public void dispatchMessage(Message msg) {
					// TODO Auto-generated method stub
					if(flag3)
						super.dispatchMessage(msg);
				}

				public void handleMessage(android.os.Message msg) {
					if (msg.what == 1) {
						
						t3_icon2.setVisibility(View.VISIBLE);
						t3_icon3.setVisibility(View.VISIBLE);
						t3_icon4.setVisibility(View.VISIBLE);
						t3_icon5.setVisibility(View.VISIBLE);

						transAnimationX2.start();
						transAnimationY2.start();
						
						transAnimation3.start();
						transAnimation4.start();
						transAnimation5.start();
						
						t3_icon6_animationDrawable.start();

					}
				};
			}.sendEmptyMessageDelayed(1, 1000);// 1秒


 

這個動畫中更重要的是計算初始和結束位置:

 

	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(
								PropertyAnimActivity.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();
					}
				});


 

5、循環插值器

第四頁動畫中重要的使用了CycleInterpolator(循環插值器)

 

	ObjectAnimator objAnim=ObjectAnimator.ofFloat(t4_icon1, rotation, 0f, 10f);
			CycleInterpolator interpolator = new CycleInterpolator(3.0f);
			objAnim.setStartDelay(500);
			objAnim.setDuration(3000);
			objAnim.setRepeatCount(Animation.INFINITE);// Animation.INFINITE
			objAnim.setInterpolator(interpolator);
			t4_icon1.setPivotX(t4_icon1.getWidth()*0.47f);
			t4_icon1.setPivotY(t4_icon1.getHeight()*0.05f);
			objAnim.start();


 

上面基本實現了墨跡天氣的動畫效果,更多請參考代碼。

 

 

 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved