如何在記憶遊戲中實現鰭狀​​肢？

Question

我正在一個簡單的記憶遊戲中，我從服務器獲取9個圖像，並在3X3網格視圖中顯示它們。一旦加載圖像，用戶可以看到圖像15秒。 15秒後，所有圖像應翻轉。現在15秒後，我在網格視圖下方顯示一個圖像視圖。在此圖像視圖中，我顯示了上述9個圖像中的一個隨機選取的圖像。現在用戶需要在網格視圖中選擇正確的圖像位置。如果用戶在網格視圖中選擇正確的位置，那麼我需要用正確的圖像翻轉圖像。當用戶翻轉所有圖像時，遊戲將結束。

我已經提取圖像，並在網格視圖中顯示它，但我不知道如何翻轉和翻轉圖像。 我在android中檢查翻轉動畫，但它是用於旋轉圖像。在我的情況下，圖片在翻轉時不應該可見，並且在翻轉時應該可見。在這種情況下如何實現翻轉和翻轉？

Answer 1

請允許我向您介紹Camera類。不，不是硬件相機。

Camera | Android Developers

這是graphicsCamera。鑑於標準縮放，旋轉和平移動畫僅在x-y平面中工作，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. 你可以有一個自定義的View塔牛逼覆蓋onDraw和呼叫canvas.drawBitmap(mBitmap, mMatrix, null)

3. 你可以有一個自定義Animation類中的覆蓋applyTransformation(float interpolatedTime, Transformation t)並返回一個基於矩陣更新Transformation

此外，通過翻轉，你會想要動畫第一圖像從0度到-90度，然後隱藏該圖像，並顯示第二個圖像，同時將剩餘路徑從90度動畫到0度。

最後一件事。你有一個3x3網格。爲了獲得逼真的三維翻轉效果，您需要使用不同的x和y值來實驗mCamera.setLocation()，具體取決於拼貼，以便頂部拼貼看起來像是從底部查看翻蓋，底部拼貼看起來像你正在查看從頭頂上翻轉等。