Animating RectTransform in Timeline

Questions & Answers
1

I’ve created a plane on the canvas (empty RectTransform) with these values:

112182-emptyrecttransform.jpg
Then i’ve created an Image as a child of that plane. RectTransform values:
112183-chestrecttransform.jpg

Now i want to animate movement of that image using Timeline. So i create a new empty GameObject, add PlayableDirector to it, assign (newly created) Timeline, then I added animation track to that Timeline and assigned my Image to that track (I added animator to Image object when it asked me to).
So far so good. Then I animated change of the scale of my Image and it went perfectly (as expected).

The issue: when i try to animate change in anchored position (PosX and PosY) I set keyframe at the beginning of the animation so that PosX and PosY are equal to zero. Move few frames away and when i try to change value of PosX or PosY it just snaps back to the zero. And if i go to the Animation window and change PosX value there, I end up with the animation where every other frame my image is on zero coordinates and next frame it is where it should be. So it just flickers from supposed position to the zero coordinates and back.

What I’ve tried:

  1. Adding canvas component to the parent panel.
  2. Making parent panel fixed size.
  3. Changing pivot for both parent panel and Image.
2

So, for anybody with the same problem:

I also changed rotation of my Image and apparently that was what caused the problem. I figured that when you rotate your image, it’s bounds changes and that causes it for some reason to reset PosX and PosY values.

If you want to move and rotate ui element, simply create “image_container_panel” (another empty RectTransform) and make your image child of it. Now we want to animate rotation and translation in the separate animation tracks.
One track for translation where you animate PosX and PosY values of “image_container_panel” and another one for rotation where you animate rotation of an element (image).