[SOLVED] How to interpolate text color?

Help & Support
1

Hello Everyone!
I want to interpolate text color like I want my text to slowly disappear (Fade). I am also using tween library to shift color or opacity but it isn’t working.
this.entity
.tween(this.entity.element.color)
.to( new pc.Color(255,255,255), 1.0,pc.SineOut)
.loop(false)
.yoyo(false)
.start();

2

Hi @Hassan_Amjad,

Here is an example script that can do that, attach it to an entity with a text element component:

var AnimateTextColor = pc.createScript('animateTextColor');

AnimateTextColor.attributes.add('targetColor', { type: 'rgba' });

// initialize code called once per entity
AnimateTextColor.prototype.initialize = function() {
  
    var currentColor = this.entity.element.color.clone();

    this.app
    .tween(currentColor)
    .to(this.targetColor, 1.0, pc.Linear)
    .loop(true)
    .yoyo(true)
    .on('update', function () {

        this.entity.element.color = currentColor;
        
    }.bind(this))
    .start();    
};

XCcM7gAeUM

2 Likes
3

I wan to change fade the (opacity = 0), The code you provided is lerping the colors.

4

You can do so in the same manner, you can animate any numeric property:

var AnimateTextOpacity = pc.createScript('animateTextOpacity');

// initialize code called once per entity
AnimateTextOpacity.prototype.initialize = function() {
 
    var data = {
        opacity: this.entity.element.opacity
    };

    this.app
    .tween(data)
    .to({
        opacity: 0.0
    }, 1.0, pc.Linear)
    .loop(true)
    .yoyo(true)
    .on('update', function () {

        this.entity.element.opacity = data.opacity;
        
    }.bind(this))
    .start();      
};

oCrS1Ez5g6

1 Like
5

Thanks a lot. It worked perfectly.

1 Like