Problem with UI Button and Animation / Animator

Getting Started
1

Good Day,

I have made a UI button and attached the anchors to one corner of the canvas so when I have a different size screen it will maintain its general position (This works fine). Below are some pics of how it works for different size screens –

3033968--227021--upload_2017-4-15_9-23-46.png
3033968--227021--upload_2017-4-15_9-23-46.png929×426 31.5 KB

However, I am trying to add animation to the buttons using the Animator. So this is what I did in the inspector. Please note the animation were done as sequential sprites. This is how my INSPECTOR looked. I had to add Sprite Renderer to get the animation to show.

3033968--227022--upload_2017-4-15_9-24-27.png
3033968--227022--upload_2017-4-15_9-24-27.png385×772 77.8 KB

However this is what if looks like now when I used different screen sizes

3033968--227023--upload_2017-4-15_9-24-42.png
3033968--227023--upload_2017-4-15_9-24-42.png925×447 43.8 KB

Why doesn’t the sprite stay inside the Button Area? Shouldn’t the anomation be where the button is? Does anyone know to resolve this issue? I need the animation to stay inside the button area (the greyish square)
Thanks

2

You added a SpriteRenderer — at that point, it is no longer a button, it is a sprite. (Or rather, it is a button and a sprite.) These compute their on-screen positions in completely different ways.

You need to instead use an Image or RawImage object within the button in the scene hierarchy. You should be able to animate that with the Animator as well (Animator can update pretty much any public properties; in this case you’d be updating the .sprite property of the Image component).