How to make an animated button

Hi, I am a unity beginner. I'm wondering how can the animation play as a UI button. I want to make an animated button The animation showed successfully on the Scene, but when I play the Game, that animation disappeared

many thanks!

reference :

 

A bit of off-topic but how you've managed to make a side scroll like this?

 

I created a ScrollController on Hiraerchy with below details.

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using UnityEngine.UI;
4.  
5. public class Scroll : MonoBehaviour
6. {
7.     public RectTransform panel;
8.     public Button[] bttn;
9.     public RectTransform center;
10.  
11.     private float[] distance;
12.     private bool dragging = false;
13.     private int bttnDistance;
14.     private int minButtonNum;
15.  
16.     void Start()
17.     {
18.         int bttnLenght = bttn.Length;
19.         distance = new float [bttnLenght];
20.  
21.         bttnDistance = (int)Mathf.Abs (bttn [1].GetComponent<RectTransform> ().anchoredPosition.x - bttn [0].GetComponent<RectTransform> ().anchoredPosition.x);
22.         print (bttnDistance);
23.     }
24.  
25.     void Update()
26.     {
27.         for (int i = 0; i < bttn.Length; i++)
28.         {
29.             distance [i] = Mathf.Abs (center.transform.position.x - bttn[i].transform.position.x);
30.         }
31.  
32.         float minDistance = Mathf.Min (distance);
33.  
34.         for (int a = 0; a < bttn.Length; a++)
35.         {
36.             if (minDistance == distance [a])
37.             {
38.                 minButtonNum = a;
39.             }
40.         }
41.         if (!dragging)
42.         {
43.             LerpToBttn (minButtonNum * +bttnDistance);
44.         }
45.     }
46.  
47.     void LerpToBttn(int position)
48.     {
49.         float newX = Mathf.Lerp (panel.anchoredPosition.x, position, Time.deltaTime * 0.1f);
50.             Vector2 newPosition = new Vector2 (newX, panel.anchoredPosition.y);
51.  
52.             panel.anchoredPosition = newPosition;
53.     }
54.         public void StartDrag()
55.         {
56.         dragging = true;
57.  
58.          }
59.    
60.     public void EndDrag()
61.     {
62.         dragging = false;
63.     }
64.  
65. }

 

Is your crab/lobster looking thing actually in view of the camera when not playing an animation?