代码改变世界

Andorid小項目之--Animation四種動畫的圖片效果(附源碼)

2010-05-31 22:46 by Terry_龙, ... 阅读, ... 评论, 收藏, 编辑

  繼上篇未講述完的動畫實例效果,本篇將會全部實現android小種類型動畫的效果,這次為了方便我沒有用xml文件加載,如果追求OO原則可以自行創建XML,根據具體參數自行配置。

四種動畫效果運行圖:

漸變Alpha
拉伸由大到小Scale
移位Translate
旋轉Rotate

  本篇重點:定義Gallery組件的屬性信息,通過在res\Values\attrs.xml文件定,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  
<declare-styleable name="Gallery">
    
<attr name="android:galleryItemBackground" />
  
</declare-styleable> 
</resources>

 

以上XML屬性信息設置了Gallery組件的背景風格

注意:這個XML一定要放在values下麵,如果將它放在layout目錄下,將無法讀取;

如果設置Gallery數據,我在此就不多說了,您可以在我之前的博客獲得相關的操作方法:http://www.cnblogs.com/TerryBlog/archive/2010/05/17/1737789.html

在這里重點要說的就是以下幾段代碼 :

片段一:

代码
    private int mGalleryItemBackGround;  //獲取資源ID
    public static int[] myImageArray=
    {
            R.drawable.one,
            R.drawable.two,
            R.drawable.three,
            R.drawable.four,
            R.drawable.five,
            R.drawable.six
    };
    
private Context mContext;
    
private int Height;
    
private int Width;
    
public ImageAdapter(Context c,int height,int width)
    {
        mContext
=c;
        Height
=height;
        Width
=width;
        TypedArray ta
=c.obtainStyledAttributes(R.styleable.Gallery);
        mGalleryItemBackGround
=ta.getResourceId(R.styleable.Gallery_android_galleryItemBackground,
                
0);
        
        ta.recycle();
    }

 

構造函數裏面,帶了一個上下文,一個高度,一個寬度。

參數一:為了防止這個錯误“The method obtainStyledAttributes(int[]) is undefined for the type ImageAdapter”,意思是obtainStyledAttributes()是Context类中的方法,如果将ImageAdapter单独写在一个.java文件中的话,必须在obtainStyledAttributes()方法前加上方法的引用才能解决问题。

參數二三:是為了後面設置圖片的高度和寬度,後方將有介紹。

代碼示意:通過TypedArray或者Gallery組件屬性,然後設置Gallery的背景風格,之后通過TypedArray所得到的對象,設置Gallery組件無無限循環顯示。

片段二:

代码
public View getView(int position, View convertView, ViewGroup parent) {
        
// TODO Auto-generated method stub 
        ImageView iv=new ImageView(mContext);
        iv.setImageResource(myImageArray[position]);
     
        iv.setScaleType(ImageView.ScaleType.FIT_CENTER);  
//設置圖片的寬高
        
        iv.setLayoutParams(
new Gallery.LayoutParams(Width, Height));     //設置圖片的寬高
        
        iv.setBackgroundResource(mGalleryItemBackGround);        
//通過 上面設置的資源ID設置背景圖
        return iv;
    }

 

重寫getView這個方法,設置圖片的資源,之后通過setLayoutParams這個方法用傳進來的高度和寬度設置圖片寬高。

如何獲取屏幕的高度和寬度:

 

import android.util.DisplayMetrics; //命名空間

DisplayMetrics dm
=new DisplayMetrics();
 getWindowManager().getDefaultDisplay().getMetrics(dm);

 

之后通過dm.heightPixels,dm.widthPixels  的屬性可得到屏幕高度和寬度。

基本工作完畢,現在到了我們的動畫階段,四種動畫定義如下:

代码
 

private Animation myAnimationAlpha;
    
private Animation myAnimationScale;
    
private Animation myAnimationTranslate;
    
private Animation myAnimationRotate;

 myAnimationAlpha
=new AlphaAnimation(0.1f1.0f);
        myAnimationAlpha.setDuration(
3000);
        
        myAnimationScale
=new ScaleAnimation(0.0f1.4f0.0f1.4f,
                Animation.RELATIVE_TO_SELF, 
0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        myAnimationScale.setDuration(
3000);
        
        myAnimationTranslate
=new TranslateAnimation(30.0f-80.0f30.0f300.0f);
        myAnimationTranslate.setDuration(
3000);
        
       myAnimationRotate
=new RotateAnimation(0.0f+350.0f,
               Animation.RELATIVE_TO_SELF,
0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
       myAnimationRotate.setDuration(
3000);

 

 

詳細參數說明請看這里:http://www.cnblogs.com/TerryBlog/archive/2010/05/30/1747311.html

定義好了動畫的顯示方式,就可以在Gallery組件上做動作了,做一個點擊事件監聽,當用戶每點擊一次就執行一次動畫,四種動畫效果就循環交替顯示各自的魅力

代碼如下:

代码
  myGallery.setOnItemClickListener(new OnItemClickListener() {

            @Override
            
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                    
long arg3) {
                
// TODO Auto-generated methsod stub
                ImageView ig=(ImageView)arg1; 
                
switch (i) {
                
case 0
                    ig.startAnimation(myAnimationAlpha);
                    i
++;
                    
break
                
case 1
                    ig.startAnimation(myAnimationScale);
                    i
++;
                    
break;
                
case 2
                    ig.startAnimation(myAnimationTranslate);
                    i
++;
                    
break;
                
case 3
                    ig.startAnimation(myAnimationRotate);
                    i
=0;
                    
break;
                
default:
                    
break;
                }
                
                
                
//ImageAdapter.myImageArray[arg2];
            }
        });

 

總結:

一開始看到動畫效果複雜的參數列表,有點關暈,但耐下心來看一下,覺得還是有一定的規律的,掌握好這門動畫課程以后項目上的動畫效果將迎刃而解。

 

源碼下載:/Files/TerryBlog/testGallery.rar   如果你這篇文章對你有幫助,別忘了推薦。謝謝

代碼簡單而明了,如果您有什麽疑問或者建議請:QQ285735942  或  Email:terryyhl@gmail.com