【问题标题】:Android Flipboard animationAndroid Flipboard 动画
【发布时间】:2013-08-30 22:43:21
【问题描述】:

我想在 Android 中更改视图时为 Flipboard 设置动画。

是否可以在整个布局上为 Flipboard 设置动画?类似于图片上的那些字母,但整个布局。

例如:

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

// whole layout design

<LinearLayout/>

我想在更改此布局和/或为另一个布局充气以执行 Flipboard 动画时制作动画。

动画应该和this one一模一样

【问题讨论】:

标签: android xml animation


【解决方案1】:

这个问题的答案在 GitHub 上。 OpenAphid 提供的非常好的示例。访问此link

【讨论】:

  • 此解决方案在活动之间不起作用,是吗?
  • @Billda 这是一年前提出的问题,直到现在你可以找到另一种方法来制作这个动画,嗯,我还没有尝试过,因为一切都是碎片化的。
  • 我相信你,但我也不知道如何用片段来实现它。因为 openAphid 解决方案适用于单个活动/片段,对吧?
【解决方案2】:

使用以下代码它们完全符合您的要求:

第一课:

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

【讨论】:

  • 我确实投了赞成票,但我仍在尝试配置此动画以将我的​​视图分成两半并按照我的要求进行操作。顺便说一句,剪断很棒。如果我设法将视图分成两半,我会接受答案:)
  • 动画应该和这个一模一样 youtube.com/watch?v=w1fTI7oYfbI ..
  • @Naskov 将您的视图分成两半并精确更改角度。我认为可以做到。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-04-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-05-17
相关资源
最近更新 更多