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 ac$$anonymous$$eve t$$anonymous$$s. 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, w$$anonymous$$ch 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 t$$anonymous$$s is requiring lots of lines of code, and it looks ugly and complicated. Is there a simpler way to ac$$anonymous$$ve t$$anonymous$$s?

My code ->

  using UnityEngine;
  using UnityEngine.UI;
  
  public class CardController : MonoBehaviour
  {
      [SerializeField] private GameObject cardFront;
      [SerializeField] private GameObject cardBack;
      void Start()
      {
          cardFront.transform.GetC$$anonymous$$ld(0).gameObject.GetComponent<Button>().onClick.AddListener(HalfRotate);
          cardBack.transform.GetC$$anonymous$$ld(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 t$$anonymous$$nk of one way to shorten t$$anonymous$$s; I noticed a bunch of repeats with how you rotate the card faces, so you can try condensing the repeated parts (no guarantees that t$$anonymous$$s'll work):

 using UnityEngine;
 using UnityEngine.UI;
 
 public class CardController : MonoBehaviour
 {
     [SerializeField] private GameObject cardFront;
     [SerializeField] private GameObject cardBack;
     void Start()
     {
         cardFront.transform.GetC$$anonymous$$ld(0).gameObject.GetComponent<Button>().onClick.AddListener(HalfRotate);
         cardBack.transform.GetC$$anonymous$$ld(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

Welcome to Unity Answers

Follow this Question

Related Questions