How to change another object's animation from button click?

Question

I created this button prefab that is using the built-in Unity Button component, an image component with Raycast Target, and an Animator component that is playing a scaling animation when pressing the button. The problem is occurring when clicking on the edge of the button graphic and holding the mouse button down.

As the animation is scaling down the button size (as well as the image component with the Raycast Target) the mouse cursor is at some point no longer hovering over the button and the animation state is going back to normal. As the button scales back to normal size automatically (and while still holding the mouse button pressed) the button is getting pressed again - getting stuck in a loop .

How can I prevent that from happening? Do I need to modify the order of my components or maybe change something in the Animator?

Answer 1

You can add timer for check animation is running. example:

 //your animation duration here: private float animationduration = 0f; bool isClickable = true; //set your timer with default 0 private float timer = 0f; private void Update() { timer += Time.deltaTime; if (timer > animationduration) { isClickable = true; } else { isClickable = false; } if (isClickable && Input.GetMouseButtonDown(0)) { clickFunction(); timer = 0f; } } void clickFunction() { //ur function in here }

then click function can't use before the animation end.

Answer 2

To sum up what was said in the comments: you want the raycast target to stay the same size while animation plays. That's why you should probably split your Popup Button into two GameObjects: one will be the actual Button (that stays the same size) and the other will be animated, and then the question is mostly "how do I change another object's animation from button click".

To do that, you should have the Button component on the actual button, Animator component on the animated object, and in the Button's onClick list you should have the call to the animated objects' Animator Component -> SetTrigger with the name of the trigger you want as an argument. Also note that the animated object shouldn't be the raycast target, but the actual button should.

You can pick what happens when animation is triggerred again before it finishes (for example when button is clicked multiple times) by setting transition parameters in the animation controller. But in this case just separating the button from the animated image should do what you want, because the raycast target will now stay the same size and the animation won't get triggered multiple times anymore.