Simple way to create a flashcard-like flipping animation for UI?

Question

I plan to use flashcards to ask questions to players. the question should be on the front of the card, and answer on the back.

Currently, Im using itween to achieve this. There are 2 panels superimposed on one another. The panel serving as the back of the card is rotated 180 deg. Using itween, im rotating both the panels, which gives a card rotating effect.

Also, halfway through the animation, im also doing backPanel.transform.SetAsFirstSibling(), so that the z-index issues are removed.

However, all this is requiring lots of lines of code, and it looks ugly and complicated. Is there a simpler way to achive this?

My code ->

  using UnityEngine;
  using UnityEngine.UI;
  
  public class CardController : MonoBehaviour
  {
      [SerializeField] private GameObject cardFront;
      [SerializeField] private GameObject cardBack;
      void Start()
      {
          cardFront.transform.GetChild(0).gameObject.GetComponent<Button>().onClick.AddListener(HalfRotate);
          cardBack.transform.GetChild(0).gameObject.GetComponent<Button>().onClick.AddListener(HalfReverseRotate);
      }
  
      void HalfRotate()
      {
          iTween.RotateTo(cardFront, iTween.Hash(
                  "rotation", new Vector3(0, 90, 0),
                  "time", 0.1f,
                  "easetype", iTween.EaseType.linear,
                  "onComplete", "FullRotate",
                  "onCompleteTarget", gameObject
                  ));
          iTween.RotateTo(cardBack, iTween.Hash(
              "rotation", new Vector3(0, 270, 0),
              "time", 0.1f,
              "easetype", iTween.EaseType.linear
              ));
      }
  
      void FullRotate()
      {
          cardFront.transform.SetAsFirstSibling();
          iTween.RotateTo(cardFront, iTween.Hash(
                  "rotation", new Vector3(0, 180, 0),
                  "time", 0.1f,
                  "easetype", iTween.EaseType.linear
                  ));
          iTween.RotateTo(cardBack, iTween.Hash(
                  "rotation", new Vector3(0, 360, 0),
                  "time", 0.1f,
                  "easetype", iTween.EaseType.linear
                  ));
      }
  
      void HalfReverseRotate()
      {
          iTween.RotateTo(cardFront, iTween.Hash(
                  "rotation", new Vector3(0, 90, 0),
                  "time", 0.1f,
                  "easetype", iTween.EaseType.linear,
                  "onComplete", "FullReverseRotate",
                  "onCompleteTarget", gameObject
                  ));
          iTween.RotateTo(cardBack, iTween.Hash(
              "rotation", new Vector3(0, 270, 0),
              "time", 0.1f,
              "easetype", iTween.EaseType.linear
              ));
      }
  
      void FullReverseRotate()
      {
          cardBack.transform.SetAsFirstSibling();
          iTween.RotateTo(cardFront, iTween.Hash(
                  "rotation", new Vector3(0, 0, 0),
                  "time", 0.1f,
                  "easetype", iTween.EaseType.linear
                  ));
          iTween.RotateTo(cardBack, iTween.Hash(
                  "rotation", new Vector3(0, 180, 0),
                  "time", 0.1f,
                  "easetype", iTween.EaseType.linear
                  ));
      }
  }

Answer 1

I can think of one way to shorten this; I noticed a bunch of repeats with how you rotate the card faces, so you can try condensing the repeated parts (no guarantees that this'll work):

 using UnityEngine;
 using UnityEngine.UI;
 
 public class CardController : MonoBehaviour
 {
     [SerializeField] private GameObject cardFront;
     [SerializeField] private GameObject cardBack;
     void Start()
     {
         cardFront.transform.GetChild(0).gameObject.GetComponent<Button>().onClick.AddListener(HalfRotate);
         cardBack.transform.GetChild(0).gameObject.GetComponent<Button>().onClick.AddListener(HalfReverseRotate);
     }
 
     void RotateFront(float degrees, string onComplete)
     {
         iTween.RotateTo(cardFront, iTween.Hash(
             "rotation", new Vector3(0, degrees, 0),
             "time", 0.1f,
             "easetype", iTween.EaseType.linear,
             "onComplete", onComplete,
             "onCompleteTarget", gameObject
             ));
     }
 
     void RotateFront(float degrees)
     {
         iTween.RotateTo(cardFront, iTween.Hash(
             "rotation", new Vector3(0, degrees, 0),
             "time", 0.1f,
             "easetype", iTween.EaseType.linear
             ));
     }
 
     void RotateBack(float degrees)
     {
         iTween.RotateTo(cardBack, iTween.Hash(
             "rotation", new Vector3(0, degrees, 0),
             "time", 0.1f,
             "easetype", iTween.EaseType.linear
             ));
     }
 
     void HalfRotate()
     {
         FullRotateFront(90);
         RotateBack(270);
     }
 
     void FullRotate()
     {
         cardFront.transform.SetAsFirstSibling();
         RotateFront(180);
         RotateBack(360);
     }
 
     void HalfReverseRotate()
     {
         RotateFront(90, "FullReverseRotate");
         RotateBack(270);
     }
 
     void FullReverseRotate()
     {
         cardBack.transform.SetAsFirstSibling();
         RotateFront(0);
         RotateBack(180);
     }
 }

Simple way to create a flashcard-like flipping animation for UI?

1 Reply

Your answer

Follow this Question

Related Questions