如何在记忆游戏中实现翻转？

Question

我正在开发一个简单的记忆游戏，我从服务器获取 9 张图像，并在 3X3 网格视图中显示它们。加载图像后，用户可以看到图像 15 秒。 15 秒后，所有图像都应翻转。现在 15 秒后，我在网格视图下方显示一个图像视图。在这个图像视图中，我展示了从上述 9 个图像中随机选取的一个图像。现在用户需要在网格视图中选择图像的正确位置。如果用户在网格视图中选择正确的位置，那么我需要用正确的图像翻转图像。当用户翻转所有图像时，游戏将结束。

我已获取图像并将其显示在网格视图中，但我不知道如何翻转和翻转图像。 我在 android 中检查了翻转动画，但它用于旋转图像。 在我的情况下，图像在翻转时不可见，而在翻转时应该可见。在这种情况下如何实现翻转和翻转？

Answer 1

请允许我向您介绍Camera 课程。不，不是硬件摄像头。

Camera | Android Developers

这是graphics Camera。标准的缩放、旋转和平移动画都只能在 xy 平面上工作，Camera 引入了一个 z 轴，它为图像提供透视，并允许您在三个维度而不是两个维度上进行变换.

您将对rotateY() 方法最感兴趣。这种方法可以帮助您创建翻转卡片或瓷砖的动画。

以下是我使用Camera 类进行磁贴翻转的方法：

    private Matrix mMatrix;

    private Camera mCamera;

    // val is animation value between -1.0 and 1.0
    private void updateImageMatrix(float val) {

        // turn the animation value into an angle from 
        // 0 to -90, then +90 to 0 degrees
        float degrees = 90.0F * (Math.signum(val) - val);

        mCamera.save();               // save initial state
        mCamera.rotateY(degrees);     // this does the flip
        mCamera.getMatrix(mMatrix);   // write the transform into the matrix
        mCamera.restore();            // now we can reuse the Camera without re-constructing

        float centerX = imageWidth / 2.0F;
        float centerY = imageHeight / 2.0F;

        // Y-axis is at the left edge, so to get rotation
        // around the center, we have to move the image over
        // first, then move it back after we rotate
        mRotateMatrix.preTranslate(- centerX, - centerY);
        mRotateMatrix.postTranslate(centerX, centerY);
        // this could probably be eliminated by initializing mCamera with
        // mCamera.setLocation(centerX, centerY, mCamera.getLocationZ())

        // the image probably isn't exactly the same size as the
        // view, so we have to handle scaling the image to the view
        mRotateMatrix.preScale(mScaleFactor, mScaleFactor);
    }

现在您有了一个矩阵来进行转换，您可以通过多种方式使用它：

1. 您可以将ImageView 设置为图像矩阵

2. 您可以拥有一个覆盖onDraw 的自定义View 并调用canvas.drawBitmap(mBitmap, mMatrix, null)

3. 您可以拥有一个自定义 Animation 类，该类覆盖 applyTransformation(float interpolatedTime, Transformation t) 并根据矩阵返回更新后的 Transformation

此外，通过翻转，您需要将第一张图像从 0 度设置为 -90 度，然后隐藏该图像，并显示第二张图像，同时将其余部分从 90 度设置为 0 度。

最后一件事。你有一个 3x3 的网格。要获得逼真的 3-D 翻转效果，您将需要根据瓷砖使用不同的 x 和 y 值来试验mCamera.setLocation()，以便顶部瓷砖看起来像是从下方查看翻转，底部瓷砖将看起来您正在从头顶观看翻转等。