2013-02-06 15 views
12

मैं एंड्रॉइड में विचारों को बदलते समय फ्लिपबोर्ड एनिमेट करना चाहता हूं।एंड्रॉइड फ्लिपबोर्ड एनीमेशन

क्या पूरे लेआउट पर फ़्लिपबोर्ड को एनिमेट करना संभव है? तस्वीर पर उन अक्षरों के समान कुछ लेकिन पूरे लेआउट।

उदाहरण के लिए:

<LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent"> 

// whole layout design 

<LinearLayout/> 

मैं एक एनीमेशन बनाने के लिए चाहते हैं जब यह लेआउट बदल रहा है और/या Flipboard एनीमेशन करने के लिए एक और बढ़ा-चढ़ाकर।

Flipboard animation

एनीमेशन दिखना चाहिए बिल्कुल this one

+1

http://code.google.com/p/android-3d-flip-view-transition/ – dilix

+0

@dilix मैं इस तरह एनीमेशन की तलाश में हूं http://www.youtube.com/watch?v= w1fTI7oYfbI – Naskov

+2

मुझे लगता है कि यह पोस्ट उपयोगी है: http://openaphid.github.com/blog/2012/05/21/how-to-implement-flipboard-animation-on-android/ – dilix

उत्तर

2

इस प्रश्न का उत्तर गिटहब पर है। OpenAphid द्वारा प्रदान किया गया बहुत अच्छा उदाहरण। इस link पर जाएं।

+0

यह समाधान गतिविधियों के बीच काम नहीं करता है, है ना? – Billda

+0

@ बिलडा इसे एक साल पहले पूछा गया था, अब तक आप इस एनीमेशन को करने का एक और तरीका ढूंढ सकते हैं, और, उहम, मैंने कोशिश नहीं की है क्योंकि सबकुछ टुकड़ों के साथ घूम रहा है। – Naskov

+0

मैं आपको विश्वास करता हूं, लेकिन मुझे नहीं पता कि इसे टुकड़ों के साथ कैसे कार्यान्वित किया जाए .. क्योंकि ओपनएफ़िड समाधान एकल गतिविधि/टुकड़े के भीतर काम करता है, है ना? – Billda

1

निम्नलिखित उपयोग संहिताओं की तरह वे आपकी आवश्यकता के लिए वास्तव में कर रहे हैं:

कक्षा 1:

import android.graphics.Color; 
import android.view.Display; 
import android.view.View; 
import android.view.WindowManager; 
import android.view.animation.AccelerateInterpolator; 
import android.view.animation.Animation; 

    /** 
    * A class that is responsible switching the mode with the flip animation 
    */ 

    public class ViewSwitcher { 

     private final static int DURATION = 500; 
     private final static float DEPTH = 400.0f; 

     public interface AnimationFinishedListener { 
      /** 
      * Called when the animation is finished. 
      */ 
      public void onAnimationFinished(); 
     } 

     public static void animationIn(View container, WindowManager windowManager) { 
      animationIn(container, windowManager, null); 
     } 

     public static void animationIn(View container, WindowManager windowManager, AnimationFinishedListener listener) { 
      apply3DRotation(90, 0, false, container, windowManager, listener); 
     } 

     public static void animationOut(View container, WindowManager windowManager) { 
      animationOut(container, windowManager, null); 
     } 

     public static void animationOut(View container, WindowManager windowManager, AnimationFinishedListener listener) { 
      apply3DRotation(0, -90, true, container, windowManager, listener); 
     } 

     private static void apply3DRotation(float fromDegree, float toDegree, boolean reverse, View container, WindowManager windowManager, final AnimationFinishedListener listener) { 
      Display display = windowManager.getDefaultDisplay(); 
      final float centerX = display.getWidth()/2.0f; 
      final float centerY = display.getHeight()/2.0f; 

      final Rotate3dAnimation a = new Rotate3dAnimation(fromDegree, toDegree, centerX, centerY, DEPTH, reverse); 
      a.reset(); 
      a.setBackgroundColor(Color.WHITE); 
      a.setDuration(DURATION); 
      a.setFillAfter(true); 
      a.setInterpolator(new AccelerateInterpolator()); 
      if (listener != null) { 
       a.setAnimationListener(new Animation.AnimationListener() { 
        public void onAnimationStart(Animation animation) { 
        } 

        public void onAnimationRepeat(Animation animation) { 
        } 

        public void onAnimationEnd(Animation animation) { 
         listener.onAnimationFinished(); 
        } 
       }); 
      } 
      if(container != null){ 
       container.clearAnimation(); 
       container.startAnimation(a); 
      } 
      else if (listener != null) 
       listener.onAnimationFinished(); 
     } 
    } 

वर्ग 2:

import android.view.animation.Animation; 
import android.view.animation.Transformation; 
import android.graphics.Camera; 
import android.graphics.Color; 
import android.graphics.Matrix; 

/** 
* An animation that rotates the view on the Y axis between two specified angles. 
* This animation also adds a translation on the Z axis (depth) to improve the effect. 
*/ 
public class Rotate3dAnimation extends Animation { 
    private final float mFromDegrees; 
    private final float mToDegrees; 
    private final float mCenterX; 
    private final float mCenterY; 
    private final float mDepthZ; 
    private final boolean mReverse; 
    private Camera mCamera; 

    /** 
    * Creates a new 3D rotation on the Y axis. The rotation is defined by its 
    * start angle and its end angle. Both angles are in degrees. The rotation 
    * is performed around a center point on the 2D space, definied by a pair 
    * of X and Y coordinates, called centerX and centerY. When the animation 
    * starts, a translation on the Z axis (depth) is performed. The length 
    * of the translation can be specified, as well as whether the translation 
    * should be reversed in time. 
    * 
    * @param fromDegrees the start angle of the 3D rotation 
    * @param toDegrees the end angle of the 3D rotation 
    * @param centerX the X center of the 3D rotation 
    * @param centerY the Y center of the 3D rotation 
    * @param reverse true if the translation should be reversed, false otherwise 
    */ 
    public Rotate3dAnimation(float fromDegrees, float toDegrees, 
      float centerX, float centerY, float depthZ, boolean reverse) { 
     super.setBackgroundColor(Color.WHITE); 
     mFromDegrees = fromDegrees; 
     mToDegrees = toDegrees; 
     mCenterX = centerX; 
     mCenterY = centerY; 
     mDepthZ = depthZ; 
     mReverse = reverse; 
    } 

    @Override 
    public void initialize(int width, int height, int parentWidth, int parentHeight) { 
     super.setBackgroundColor(Color.WHITE); 
     super.initialize(width, height, parentWidth, parentHeight); 
     mCamera = new Camera(); 
    } 

    @Override 
    protected void applyTransformation(float interpolatedTime, Transformation t) { 
     super.setBackgroundColor(Color.WHITE); 
     final float fromDegrees = mFromDegrees; 
     float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime); 

     final float centerX = mCenterX; 
     final float centerY = mCenterY; 
     final Camera camera = mCamera; 
     final Matrix matrix = t.getMatrix(); 

     camera.save(); 
     if (mReverse) { 
      camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime); 
     } else { 
      camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime)); 
     } 
     camera.rotateX(degrees); 
     camera.getMatrix(matrix); 
     camera.restore(); 

     matrix.preTranslate(-centerX, -centerY); 
     matrix.postTranslate(centerX, centerY); 

    } 
} 

कक्षा 3:

This Will be Your Actual activity where you should call following two calls to AnimationOut and AnimationIn with passing old view, new view respectively whenever you require to make your disered animation. 

अब पुरानी दृश्य के रूप में पहला तर्क के साथ animationOut के नीचे स्थित कॉल की तरह हटाए जाएंगे:

ViewSwitcher.animationOut(this.findViewById(android.R.id.content1), getWindowManager(), new ViewSwitcher.AnimationFinishedListener() { 
      public void onAnimationFinished() { 
      //Do Something here before removing this view from screen if required. 
      } 
     }); 

अब पहले तर्क के साथ animationIn कॉल के रूप में नया दृश्य होने के लिए नीचे दिखाया गया है:

ViewSwitcher.animationIn(this.findViewById(android.R.id.content2), this.getWindowManager()); 
+2

मैंने अपरिवर्तित किया लेकिन मैं अभी भी इस दृश्य को आधे में विभाजित करने के लिए कॉन्फ़िगर करने की कोशिश कर रहा हूं और वही करो जो मैं ढूंढ रहा हूं। छीन लिया बीटीडब्ल्यू भयानक है। अगर मैं आधा में दृश्य को विभाजित करने का प्रबंधन करता हूं तो मैं जवाब स्वीकार करूंगा :) – Naskov

+0

एनीमेशन बिल्कुल इस तरह दिखना चाहिए http://www.youtube.com/watch?v=w1fTI7oYfbI .. – Naskov

+2

@Naskov अपने दृश्य को विभाजित करने के लिए आधे और कोणों को सटीक रूप से बदलें। मुझे लगता है कि यह कर सकता है। –

संबंधित मुद्दे