Fade Out UI element?

Help & Support
2

You can use the Tween library to fade out the opacity of the image:
https://developer.playcanvas.com/en/tutorials/tweening/

// Entity: Pass the image entity
// From: Opacity value to be changed from i.e 1
// To: Opacity value to be changed to i.e 0
// Time: Total time to complete the fade
// onComplete(optional): Function to trigger after fade out/in is complete

TweenManager.prototype.tweenOpacity = function(entity, from, to, time, onComplete) {
    var opacity = {value: from};
    entity
        .tween(opacity)
        .to({value: to}, time, pc.SineOut)
        .on('update', function() { entity.element.opacity = opacity.value; }.bind(this))
        .on('complete', function() { if(onComplete) onComplete(); }.bind(this))
        .start();
};

If you don’t like it this way, you can use dt in the update to control the opacity too.

2 Likes