Animation of RectTransform Objects not working in Runtime

[whtw4thewin]

Hi! I’m experimenting with animation of GameObjects that are children of a canvas, and i noticed some interesting things.
My goal is to combine tween.js animations with Unity-exported animations.
So Let’s say, i have the following structure in Editor:

Canvas
- Container
- - image1
- - image2

The idea is to have image1 and image2 to be animated inside Unity and exported using AnimatorComponent (I use the animator window to add the keyframes on the GameObjects themselves). Then, in runtime, the Container have a simple scale animation using tween.js. So far, the last one works fine, but the animation on the images are not being played.

Since I allready worked with skinned meshes and have no issues, is it posible that this is a support issue? Is there some sort of specific setup that needs to be there in order for the animation to play? Wouldn’t the usage of both at the same time create conflicts? (Specifically since they’re both updating scales).

Thank you very much in advance

Edit: Unity Editor version is 2022.3.4f1 and Needle Engine version is 3.47.6. OS: Windows 10.

[needle-assistant (Needle Engine Assistant)]

Hi whtw4thewin! I’m an AI-powered assistant here to help you. I can’t answer your question directly, but I can assist you with queries about Needle Engine, three.js, and basic Unity or Blender help. Please reply with more details, such as your OS and the versions of Needle Engine, Unity, or Blender you are using, and I’ll do my best to assist!

2 replies left - GPT 4O
thread_9tcETG35ZO6DKhyrrJ7pbQe9
Reply to this message to continue the conversation

[whtw4thewin]

Unity Editor version is 2022.3.4f1 and Needle Engine version is 3.47.6. OS: Windows 10.

[needle-assistant (Needle Engine Assistant)]

Thank you for the details, whtw4thewin! When combining tween.js animations with Unity-exported animations, there are a few considerations to ensure that both animations work harmoniously:

1. Animator Component: Ensure that the AnimatorComponent is correctly attached to both image1 and image2. Make sure the animation controller is set up correctly and that the animations are included.

2. Animation Conflicts: Since both the Unity animations and tween.js affect the scale, conflicts may arise. To avoid this, consider animating other properties instead of scale with tween.js, or selectively disable the scale animation in the Unity Animator when tween.js is active.

3. Update Order: Confirm that the update order of animations does not conflict. You might need to adjust the timing or the frames to allow both animations to play without overriding one another.

4. Debugging: Utilize the Unity console to check for any errors or warnings related to the Animator. It may provide insight into why the animations are not playing.

Feel free to explore these areas; if you have specific code snippets or further issues, please share them for more detailed assistance!

1 replies left - GPT 4O
thread_9tcETG35ZO6DKhyrrJ7pbQe9
Reply to this message to continue the conversation

[kipash]

Hey

your use case should work.

Could you try to add another container like so:

- tween container
   - anim container
       - image 1
       - image 2

Also, if you could share a screenshot of your hierarchy and the animation in unity.

[whtw4thewin]

I tried that config too, here are my results:

So, in the first try i attached the Animator component to the object that is being animated and it works just fine. In the second one, I attached it to the inmediate parent, the idea is to animate 2 images, so i thought that i could just reference its properties from the parent object directly, however looks like this approach does not work.

Final result is that Test1 works as expected, but Test2 does not work. Structure is the same for both as you can see in the captures.

[whtw4thewin]

Also this is how the testing code looks like:
tweenTest.ts

import { Behaviour, RectTransform, serializable } from "@needle-tools/engine";
import { Tween, Easing } from "@tweenjs/tween.js";
import { Object3D } from "three";

export class tweenTest extends Behaviour{
    @serializable(Object3D)
    tweenContainer: Object3D | null = null;
    
    private defaultScale: number = 1;
    private _tweenDown: Tween<{ scale: number }> | null = null;
    private _tweenUp: Tween<{ scale: number }> | null = null;
    private testRect: RectTransform | null = null;


    awake(): void {
        if(!this.tweenContainer) return;

        this.testRect = this.tweenContainer.getComponent(RectTransform);

        const button_down = document.getElementById("tweenDown_Trigger");
        if(button_down){
            button_down.addEventListener("click", ()=>{
                this.tweenDown();
            });
        }
        const button_up = document.getElementById("tweenUp_Trigger");
        if(button_up){
            button_up.addEventListener("click", ()=>{
                this.tweenUp();
            });
        }

        this._tweenDown = new Tween({scale: this.defaultScale})
            .duration(2000)
            .delay(0)
            .easing(Easing.Exponential.InOut)
            .to({scale: 0})
            this._tweenDown?.onComplete(()=>{
                // GameObject.setActive(this.displayMenu!, true);
                console.log("FrontCover tween complete");
            })
            .onUpdate((tweenObject, time)=>{
                //Interpolar de la escala a 0 usando time.
                // console.log(`Update: scale: ${JSON.stringify(value)}, time: ${time}`);
                tweenObject.scale = (1 - time) * this.defaultScale;
                this.testRect?.scale.set(tweenObject.scale, tweenObject.scale, tweenObject.scale);
            });

        this._tweenUp = new Tween({scale: 0})
            .duration(2000)
            .delay(0)
            .easing(Easing.Exponential.InOut)
            .to({scale: this.defaultScale})
            this._tweenUp?.onComplete(()=>{
                // GameObject.setActive(this.displayMenu!, true);
                console.log("FrontCover tween complete");
            })
            .onUpdate((tweenObject, time)=>{
                //Interpolar de la escala a 0 usando time.
                // console.log(`Update: scale: ${JSON.stringify(value)}, time: ${time}`);
                tweenObject.scale = time * this.defaultScale;
                this.testRect?.scale.set(tweenObject.scale, tweenObject.scale, tweenObject.scale);
            });
    }
    
    tweenDown() {
        this._tweenDown?.start();
    }
    tweenUp() {
        this._tweenUp?.start();
    }


    update(): void {
        if(this._tweenDown && this._tweenDown.isPlaying())
            this._tweenDown.update();
        if(this._tweenUp && this._tweenUp.isPlaying())
            this._tweenUp.update();
    }
}

Note: Im assigning tweenContainer through the Editor, but it is not necessary, originally i wanted to reference objects outside the one that contains this script, so i just left it here.

[kipash]

Hey don’t you see in your unity console warning such as this one by any chance?

Can not export animation, please animate all channels for “anchoredPosition”, expected channel count is 2 but got only 1

It is required to animate the whole vector and not just a single compound of it. You can track the whole object by just adding it like so:

I made a test scene and it works ok:

Let me know if this was the cause

[whtw4thewin]

mmm, there is a couple of errors, but they are the same for both elements.
First, I´m using position instead of anchoring position, (this is because recording only detects changes on position, while anchored position remains at 0).
The image on Test1 looks like this:

While the Image on Test2 looks like this:

I interpreted that by It is required to animate the whole vector... you mean all properties of position / anchored position / scale and so on.

After checking the panorama seems the same, but i found this errors on the console Log:

Maybe its a Unity thing (?)

[kipash]

Huh, could you try to rename your objects in a way that they have UNIQUE names? Looks like a bug.

[kipash]

@whtw4thewin

ma seems the same, but i found this erro

I interpreted that by It is required to animate the whole vector... you mean all properties of position / anchored position / scale and so on.

No, as you can see on my screenshot, i only animated the anchorPosition.x and that would lead to the warning. the animation needs to animate both X and Y.

You seem to have it correctly, the NullReferenceException is definitely wrong and could lead to unexpected exports.

[whtw4thewin]

Yes it worked!:

All i changed was the name of the objects (ignore the reorder, it was just to force the export with a save).

PD: Yes, by:

@whtw4thewin

I interpreted that by It is required to animate the whole vector... you mean all properties of position / anchored position / scale and so on.

I was trying to say that if you take position for example, it is required to have keyframes for x,y and z properties.

[kipash]

Could you break it again and make a bug report from that scene please?

Trying to reproduce it on my end with no luck.

[kipash]

@whtw4thewin

Yes it worked!:

The issue is likely caused by fact that the object was named tweenContainer and so was the property in your script.|

I’m reproducing the ID warn on my end. But i’m not getting any exception.

Would appreciate the report when you have the time Thanks

[whtw4thewin]

Allready submmited a bug report with the scene, hope it helps!

[kipash]

Thank you for the report.

The exception was caused by animating this property (highlighted in blue):

Removing it from the anim makes the scene to work. Could you confirm that?
I’m bit puzzled why the renaming worked for you. Perhaps you also clean the anim?

[whtw4thewin]

Ahà, found it, i can confirm that indeed, removing that property solves the issue, and also found an interesting behaviour:

The error happends when using add Property button from the Animation window or when using right clic > add key on the pos X or pos Y inspector properties while on preview mode, since Unity inserts what it looks like an empty floating number instead of a complete vector value.

These two methods will result in something like this:

It fixes itself by inserting an additional keyframe in recording mode (after translation) or by adding a keyframe from the Pos Z property on inspector.

So apparently it happends if you ignore it by accident since apparently Unity does not distinguish between position and anchored position in those two cases.

Some observations:

1. Using right clic + add keyframe on Pos X and then doing the same on Pos Y adds a full anchored position vector.
2. Inserting anchored position trough the Add property button from the animation window also inserts a fully functional keyframe.
3. Using the Add Property button to add position property results in the same error case.
4. These are the only cases where this happens, i went through all the other properties from Rect transform and there were no problems, those where the only cases where this behaviour occurs.