How to apply tween on UI node?

Cocos Creator
#1

Hello

I tried to apply rotation on UI element but it does not working as expected

rightRotCord: Quat = new Quat(0, 0, 0, 15);

// rotation
            tween(this.node.rotation)
                .to(this.tweenLaneChangeDuration, this.rightRotCord, {
                    onUpdate: (target: Quat, ratio: number) => {
                        this.node.rotation = target;
                    }
                })
                .delay(this.tweenLaneChangeDuration)
                .start();
#2

you must read manual at first, there is no need to guess how API works. All API described in manual.

#3

need to add a .union() to it because if you add more than one item, you have to put them all together using a union call. :slight_smile:

#4

Thanks my problem is solved…
I was using .by which was creating issue (my bad i misunderstood)…

Posting sample code which i used…

    leftRotCord: Quat = Quat.fromEuler(new Quat(), 0, 0, -10);
    middleRotCord: Quat = Quat.fromEuler(new Quat(), 0, 0, 0);
    rightRotCord: Quat = Quat.fromEuler(new Quat(), 0, 0, 10);

    // in turn left function
    // rotation left
            tween(this.node.rotation)
                .to(this.tweenLaneChangeDuration / 3, this.leftRotCord, {
                    onUpdate: (target: Quat, ratio: number) => {
                        this.node.rotation = target;
                    }
                })
                .to(this.tweenLaneChangeDuration / 3, this.middleRotCord, {
                    onUpdate: (target: Quat, ratio: number) => {
                        this.node.rotation = target;
                    }
                })
                .delay(this.tweenLaneChangeDuration / 3)
                .start();

    // in turn right function
    // rotation right
            tween(this.node.rotation)
                .to(this.tweenLaneChangeDuration / 3, this.rightRotCord, {
                    onUpdate: (target: Quat, ratio: number) => {
                        this.node.rotation = target;
                    }
                })
                .to(this.tweenLaneChangeDuration / 3, this.middleRotCord, {
                    onUpdate: (target: Quat, ratio: number) => {
                        this.node.rotation = target;
                    }
                })
                .delay(this.tweenLaneChangeDuration / 3)
                .start();
#5

No problem, I talk about it in the video that is coming soon on Tween. Make sure to add union after the .to so they don’t break.