Simple state switching to mouse over & pressed requires 2 animation clips with some parts duplicated?

I have a simple demo like this. There is a gameObject (like a Quad) in the scene. It should have 2 states:

1. MouseOver
2. MouseOver and pressed at the same time.

The state MouseOver should highlight its border (square border). If the user presses the mouse while it’s in the MouseOver state, its background should change (of course the square border should be still present). I wonder if there is some way to add the second effect (showing the background) to the current state (MouseOver) to build the MouseOver & Pressed state? Currently I have to prepare 2 different animation clips, the first for MouseOver and the second for MouseOver & pressed. You can see that the second animation clip “contains” the first meaning I have to duplicate some steps to add the animation curve (like in the MouseOver animation clip) beside adding the extra curve for showing the background.

I want some kind of reusability and inheritance of animation clip/effects. It would be much more flexible and easier to maintain. (like the way you can do with WPF animations). In other words, I want to avoid the duplication between the 2 animation clips. At least we should have some easy way to copy some curve from this clip to another clip without having to rebuild the curves manually.

Thanks for your help.

More clarification:

Think about the process of creating the 2 animation clips (for the 2 states):

For mouseover state:

  • Add the only simple animation curve to show some child gameObject. This child renders the border. (So hovering over the main gameObject will show its border).

For mouseover & pressed state:

  • Duplicate the step of creating the exact animation curve done above.
  • Add one more simple animation curve to show the background. (So hovering and pressing the main gameObject will show both its border and its background).

In this case the example is just simple, so the duplication can be done easily. However in many complex situations, the duplication is large while the difference between states is just tiny but you still need to create separate animation clips with all the duplicated steps being done manually. I would like to avoid or eliminate the duplicated steps as much as possible. If that’s not possible, there should be at least some easy way to copy the animation curves so that the duplication can be done easily and exactly.

I hope now you understand my problem.

What you are looking for is Transitions, especially for UI’s. Have a look at this 1, it explains them very well, how to create them, so you can use them for different UI objects.

Creating effects for for 3D objects, is slightly more tedious if they have different meshes. If you just need to give the user feedback as to what their mouse is on, then you can simple implement a colour change of the renderer’s material, in OnMouseEnter() method. That method is called whenever the mouse enters a collider or GUI. If colour change is not possible, you can change transform, but remember to change the rigid body’s position if it’s physics object.Or if you want something fancy, enable/disable a particle emitter component.

The second state you are looking for is OnMouseDown(), which is called when mouse is on the collider, and pressed.