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();
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
3 Likes
I wan to change fade the (opacity = 0), The code you provided is lerping the colors.
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
Thanks a lot. It worked perfectly.
1 Like