Button Transition with Animation to Update Sprite - Slight Delay

I am trying to create a transition where a button is updated with a new sprite, and the text object (child of button) is moved slightly lower when the button is pressed. Since I want to do more than swapping the sprite image, I opted for the Animation mode.

However I noticed the animation isn't sync'd when I try to 1. swap the sprite, and 2. change position of text. The sprite change happens slightly after the text position change. My suspicion is that because it's a button with a sliced image, it takes a bit longer to process.

It's obvious that these two aren't updated at the same time when the button is pressed. Any idea how I can work around this?

What I am trying to do:

 

has anyone else noticed this? or found a way to make it work?
thanks

 

For this couldn't you include the arrow in the button images?

 

i use the button in different places with different icons or dynamic text as child

although i could combine each possible combination of icon and button it would waste time and memory

i could not do the same with dynamic text tho so it would not even solve the problem

 

Got it. Yeah I am hoping to use text for all these type of buttons so they can scale up nicely too.

 

The default button animator has a small builtin delay that makes transitions "smooth" (for example, I use scaling, and it does a nice lerp instead of jumping). Find wherever that delay is and set it to 0, I'd assume, since you can't lerp between sprites.

 

thanks

http://answers.unity3d.com/questions/355576/how-to-make-a-instant-transition-with-mecanim.html

"There is a trick if you don't like sliders. Go to the top right corner of the Inspector window and select Debug from the drop down menu (next to the lock). Now you can type in values."

is this what you were talking about?

but even with zero length transitions the problem still occurs?

 

Make the transition delay something huge like a full second or two, and see if that works. If it does, you know it might be some sort of rounding error or builtin minimum. If it doesn't, then either the setting isn't saving or being applied or it's something else.

 

Thanks for the help JAKJ. The problem for me though wasn't when the animation starts, but that the variables in the animation don't seem to update at the same time when changing a sliced image in the animation (in this case, there's only one frame of animation where I use it to update the rec transform and the sprite image). I am still guessing this is because it takes a few frames to process a sliced image after it's been updated.

 

btw was the background button a sliced image?

 

If you are looking for an alternative to the animation transition, you could create a simple extended button script which overrides the DoTransition method and add an event for when the button transitions to another state, then you'll be able to hook any other script to do whatever you need in sync with the button transition... : ]

Example

Code (csharp):

1.  
2. using UnityEngine;
3. using UnityEngine.Events;
4. using UnityEngine.EventSystems;
5. using System;
6. using System.Collections;
7.  
8. namespace UnityEngine.UI
9. {
10.     public class ButtonExtended : Button {
11.    
12.         public enum VisualState
13.         {
14.             Normal,
15.             Highlighted,
16.             Pressed,
17.             Disabled
18.         }
19.    
20.         [Serializable] public class TransitionEvent : UnityEvent<VisualState, bool> {}
21.         public TransitionEvent onTransition = new TransitionEvent ();
22.    
23.         protected override void DoStateTransition (SelectionState state, bool instant)
24.         {
25.             base.DoStateTransition (state, instant);
26.        
27.             if (this.onTransition != null)
28.                 this.onTransition.Invoke ((VisualState)state, instant);
29.         }
30.     }
31. }
32.  

And the editor script

Code (csharp):

1.  
2. using System;
3. using UnityEngine;
4. using UnityEngine.UI;
5. using UnityEditor;
6. using System.Collections;
7.  
8. namespace UnityEditor.UI
9. {
10.     [CustomEditor(typeof(ButtonExtended), true)]
11.     public class ButtonExtendedEditor : ButtonEditor {
12.      
13.         public override void OnInspectorGUI()
14.         {
15.             base.OnInspectorGUI();
16.          
17.             this.serializedObject.Update();
18.             EditorGUILayout.PropertyField(this.serializedObject.FindProperty("onTransition"), new GUIContent("On Transition"), true);
19.             this.serializedObject.ApplyModifiedProperties();
20.         }
21.     }
22. }
23.  

 

yes it is sliced

i was not setting anything in my "Normal" state
it did go back to normal but i was not explicitly setting anything there

after changing to 0 length transition AND setting S*** back to normal in normal state it seems to work!

can anyone explain that?

thanks for all your help

 

Brilliant thanks! This looks like the right way to work around it. I am getting this weird error though

"The type or namespace name `ButtonEditor' could not be found. Are you missing a using directive or an assembly reference?"

Not sure why. ButtonEditor should be in the UnityEditor.UI namespace which is included in the script (for reference: http://docs.unity3d.com/460/Documentation/ScriptReference/UI.ButtonEditor.html)

 

umn shouldn't you be using the UnityEngine.UI file and the Button not ButtonEditor?

 

There were two scripts - one for the button and one for the button editor to extend it in the inspector.