在Android中翻转双面硬币

时间:2013-06-20 11:56:11

标签: android animation rotation imageview android-animation

我正在使用这个Rotate3dAnimation类创建一个翻转硬币动画,它也在移动和缩放。但我只能用一个图像视图。只需在该图像视图上使用startAnimation()方法。

但我想要做的是,使用硬币的两面使它看起来像一个真正的硬币,两个不同的侧面正在翻转。有人可以帮我解决这个问题吗?

由于

    package com.example.movingcoin;



    import android.view.animation.Animation;
    import android.view.animation.Transformation;
    import android.graphics.Camera;
    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) {
        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.initialize(width, height, parentWidth, parentHeight);
        mCamera = new Camera();
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        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.rotateY(degrees);
        camera.rotateX(degrees);

        camera.getMatrix(matrix);
        camera.restore();

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

2 个答案:

答案 0 :(得分:3)

前几天遇到同样的问题,在FlipAnimator课程中找到了你可以在这里找到的解决方案:FlipAnimatorClass

实际上,这很简单:你必须将硬币的两面传递给FlipAnimator。我认为,这门课程很容易理解,而且它实际上正如g00dy在上面的评论中所做的那样。

答案 1 :(得分:0)

诀窍是旋转你的视图两次! 一旦从正常位置到中间,更改您的视图(例如,更改硬币的图像),然后将其从中间旋转回正常。

你应该在第一个动画的AnimationListener的onAnimationEnd中进行视图中的所有更改并从中间到正常开始旋转!

像这样:

firstAnimation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        findViewById(R.id.conceptsLay).setVisibility(View.GONE);
                        findViewById(R.id.factBaseLay).setVisibility(View.VISIBLE);
                        secondAnimation.startAnimation();
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });

在上面的代码中,我首先将conceptsLay旋转到中间,其中它基本上不可见,然后使其GONE并使其他示例查看VISIBILE并从中间到正常开始动画! 所以用户看到的是视图被翻转! 针说,首先你将它从0旋转到90,然后在secondAnimation,你将它旋转-90到0!

也是为了让它更顺畅我也添加了一些alpha动画! 希望它会有所帮助