Android變形(Transform) 之 3D Animation

引言

了解Matrix和Camera的使用，本章主要總結自定義動畫（Animation），最后通過一個3D動畫來綜合應用。對於Animation的基本使用以及種類不做細講，希望

 

Animation

動畫說白了就是在一個時間段，改變一個目標的視圖狀態。

---

example：1秒鍾內，讓一個圖片的透明度從1編程0.5

1.設置時間-1秒鍾，對於抽象類Animation直接提供setDuration(long milis)方法進行設置

2.執行目標，View提供startAnimation(Animation anim)方法執行動畫

3.改變狀態視圖，動畫的多樣化就是改變視圖的各種狀態，可以分為透明度，坐標矩陣倆種，坐標矩陣就可以引申出位移，旋轉，縮放等等變形了。

---

Animation里面提供一個自定義動畫行為的方法 applyTransformation (float interprolatedTime, Transformation t)

float型參數interprolatedTime代表動畫的插值，動畫開始為0，動畫結束為1，所有的動畫行為可以從這個值的變化引申出自定義的各種動畫

Transformation類型的參數t表示當前動畫目標的行為狀態，可以通過getMatrix和setMatrix方法對目標的坐標矩陣進行獲取和設置，通過setAlpha對其透明度進行設置

---

下面是example的代碼實現：

 
             1  
            public  
            class CustomAnimation  
            extends Animation { 
            
 
             2  
            
 
             3      
            float mFromAlpha, mToAlpha; 
            
 
             4      
            
 
             5      
            public CustomAnimation( 
            float fromAlpha,  
            float toAlpha) { 
            
 
             6         mFromAlpha = fromAlpha; 
            
 
             7         mToAlpha = toAlpha; 
            
 
             8     } 
            
 
             9      
            
 
            10     @Override 
            
 
            11      
            protected  
            void applyTransformation( 
            float interpolatedTime, Transformation t) { 
            
 
            12         t.setAlpha(mFromAlpha + (mToAlpha - mFromAlpha) * interpolatedTime); 
            
 
            13          
            super.applyTransformation(interpolatedTime, t); 
            
 
            14     } 
            
 
            15 } 
           

調用代碼：

 
            1             CustomAnimation anim =  
            new CustomAnimation(0.5f, 1f); 
            
 
            2             anim.setDuration(300); 
            
 
            3             anim.setInterpolator( 
            new AccelerateInterpolator()); 
            
 
            4             img.startAnimation(anim); 
           

setInterpolator方法為設置動畫行為控制器，例如線性運動，加速運動，曲線運動等等。

上述一個簡單的自定義動畫就完成。

 

3D Animation

看下3D動畫的實現

 
             1  
            public  
            class Custom3DAnimation  
            extends Animation { 
            
 
             2      
            public  
            static  
            final  
            int AXIS_Y = 0; 
            
 
             3      
            public  
            static  
            final  
            int AXIS_X = 1; 
            
 
             4  
            
 
             5      
            float mCenterX, mCenterY; 
            
 
             6      
            float mFromDegree, mToDegree, mDistanceZ; 
            
 
             7      
            int mAxis = AXIS_Y; 
            
 
             8  
            
 
             9      
            public Custom3DAnimation( 
            
 
            10              
            float centerX, 
            
 
            11              
            float centerY, 
            
 
            12              
            float fromDegree, 
            
 
            13              
            float toDegree, 
            
 
            14              
            float distanceZ, 
            
 
            15              
            int axis) { 
            
 
            16         mCenterX = centerX; 
            
 
            17         mCenterY = centerY; 
            
 
            18         mFromDegree = fromDegree; 
            
 
            19         mToDegree = toDegree; 
            
 
            20         mDistanceZ = distanceZ; 
            
 
            21         mAxis = axis; 
            
 
            22     } 
            
 
            23  
            
 
            24     @Override 
            
 
            25      
            protected  
            void applyTransformation( 
            float interpolatedTime, Transformation t) { 
            
 
            26          
            float degree = mFromDegree + (mToDegree - mFromDegree) * interpolatedTime; 
            
 
            27          
            float distanceZ = mDistanceZ * interpolatedTime; 
            
 
            28          
            
 
            29         Matrix matrix = t.getMatrix(); 
            
 
            30         Camera camera =  
            new Camera(); 
            
 
            31         camera.save(); 
            
 
            32          
            if (mDistanceZ != 0) { 
            
 
            33             camera.translate(0.0f, 0.0f, distanceZ); 
            
 
            34         } 
            
 
            35          
            if (mAxis == AXIS_X) { 
            
 
            36             camera.rotateX(degree); 
            
 
            37         }  
            else  
            if (mAxis == AXIS_Y) { 
            
 
            38             camera.rotateY(degree); 
            
 
            39         } 
            
 
            40         camera.getMatrix(matrix); 
            
 
            41         camera.restore(); 
            
 
            42          
            
 
            43          
            // 
            設置旋轉中心 
            
 
            44  
                    matrix.preTranslate(-mCenterX, -mCenterY); 
            
 
            45         matrix.postTranslate(mCenterX, mCenterY); 
            
 
            46          
            
 
            47          
            super.applyTransformation(interpolatedTime, t); 
            
 
            48     } 
            
 
            49 } 
           

3D動畫的參數：中心點X，中心點Y，旋轉開始角度，旋轉結束角度，旋轉是X軸還是Y軸，Z軸動畫距離

調用如下：

 
             1             Custom3DAnimation anim =  
            new Custom3DAnimation( 
            
 
             2                     img.getWidth() / 2,  
            
 
             3                     img.getHeight() / 2, 
            
 
             4                     0, 
            
 
             5                     180, 
            
 
             6                     100, 
            
 
             7                     Custom3DAnimation.AXIS_Y); 
            
 
             8             anim.setDuration(1000); 
            
 
             9             anim.setInterpolator( 
            new AccelerateInterpolator()); 
            
 
            10             img.startAnimation(anim); 
           

 

擴展

一般3D的使用，都是分正反倆面，當View翻轉90度以后，View的內容或者View本身編程變換，然后完成另外90度的選中，來達到翻面的效果。

 
             1 Custom3DAnimation anim =  
            new Custom3DAnimation( 
            
 
             2                 img.getWidth() / 2,  
            
 
             3                 img.getHeight() / 2, 
            
 
             4                 0, 
            
 
             5                 90, 
            
 
             6                 0, 
            
 
             7                 Custom3DAnimation.AXIS_Y); 
            
 
             8         anim.setDuration(500); 
            
 
             9         anim.setInterpolator( 
            new AccelerateInterpolator()); 
            
 
            10         anim.setAnimationListener( 
            new AnimationListener() { 
            
 
            11             @Override 
            
 
            12              
            public  
            void onAnimationStart(Animation animation) {    }         
            
 
            13             @Override 
            
 
            14              
            public  
            void onAnimationRepeat(Animation animation) {} 
            
 
            15             @Override 
            
 
            16              
            public  
            void onAnimationEnd(Animation animation) { 
            
 
            17                 img.setImageResource(R.drawable.logo_l2); 
            
 
            18                 Custom3DAnimation anim1 =  
            new Custom3DAnimation( 
            
 
            19                         img.getWidth() / 2,  
            
 
            20                         img.getHeight() / 2, 
            
 
            21                         -90, 
            
 
            22                         0, 
            
 
            23                         0, 
            
 
            24                         Custom3DAnimation.AXIS_Y); 
            
 
            25                 anim1.setDuration(500); 
            
 
            26                 anim1.setInterpolator( 
            new AccelerateInterpolator()); 
            
 
            27                 img.startAnimation(anim1); 
            
 
            28             } 
            
 
            29         }); 
            
 
            30         img.startAnimation(anim); 
           

涉及到的內容比較簡單，只是起到總結作用，便於以后使用備忘。