• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by loyola-cdyke · Apr 13, 2018 at 09:16 PM · animationunity 5buttontriggerback

Button back not clickable after rotation animation

I'm creating a 2D app in Unity. I have a main canvas object, inside that there's a panel object, and inside that there's a UI Button object. I've created an animation that Flips the Button 180 degrees at 60 frames per second. I also have 2 animation triggers on the animation at 30 frames per second and at 60 frames per second, which call different functions in my script. When the animation is at 90 degrees (30 frames per second / the side of the button), the Sprite image on the button changes to a new image. Now, after the animation completes the 60 frames, the complete new sprite image is shown on the button. This gives the illusion that the button has 2 faces, similar to a card. However, after the animation is completed, the back of the button is not able to be highlighted or clicked. I want to be able to click the back of the button and play the rotate animation it to show the original image and the front of the button. How can I make the back of the button clickable in order to do this?

Here's my C# script code:

 using System.Collections;
 using UnityEngine;
 using UnityEngine.UI;
 
 
 public class CardFlip : MonoBehaviour
 {
     //animator reference
     private Animator anim;
     private AnimatorClipInfo[] animationClip;
 
     // public variables
     public GameObject gameObject;
     public Button startButton;
     public Sprite newImage;
 
     // Use this for initialization
     void Start()
     {
         //unpause the game on start
         Time.timeScale = 1;
 
         //get the animator component
         anim = gameObject.GetComponent<Animator>();
 
         //disable it on start to stop it from playing the default animation
         anim.enabled = false;
         animationClip = anim.GetCurrentAnimatorClipInfo(0);
     }
 
     public void StartCardFlipAnimation()
     {
         anim = gameObject.GetComponent<Animator>();
 
         // enable the animator component
         anim.enabled = true;
 
         // freeze the timescale
         Time.timeScale = 0;
 
         // print the start animation message
         Debug.Log("About to start the animation");
 
         // play the animation
         anim.Play("FlipCard");
     }
 
     public void EndCardFlipAnimation()
     {
         anim = gameObject.GetComponent<Animator>();
 
         Debug.Log("The animation is now over!");
         startButton.interactable = true;
 
         anim.enabled = false;
         Time.timeScale = 1;
     }
 
     public void ChangeCardImage()
     {
         startButton.GetComponent<Image>().sprite = newImage;
     }
 }


Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

1 Reply

· Add your reply
  • Sort: 
avatar image
0

Answer by MarioSantoso · Apr 14, 2018 at 01:35 AM

Try separating animator gameobject and button gameobject.

Animator gameobject is your card image animation. Make this as child of your button gameobject.

Button gameobject simply just your button, use sprite that match your card image size and set its alpha to zero.

This way you have a clear structure, easily animate the card without disrupting the button function.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

The best place to ask and answer questions about development with Unity.

To help users navigate the site we have posted a site navigation guide.

If you are a new user to Unity Answers, check out our FAQ for more information.

Make sure to check out our Knowledge Base for commonly asked Unity questions.

If you are a moderator, see our Moderator Guidelines page.

We are making improvements to UA, see the list of changes.



Follow this Question

Answers Answers and Comments

285 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Activating One Part of An Animation 2 Answers

Attaching multiple animation events to player 1 Answer

Delay Button Pressed Action after Animation 1 Answer

How to make animation work on UI button click ? 1 Answer

Two Animations With One Button Press 1 Answer

  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges