Using tween to animate opacity of image element

Help & Support
#1

Hi,

Been struggling with this for awhile now. Does anyone has a working code for tweening opacity of an image element ?

I tried the following code and attached them to my image element entity but it does not seem to work.

Any help would be appreciated thanks!

var opacity = 0;
this.entity.tween(this.entity.element.opacity).to(1,1,pc.SineOut).start();

var opacity = 0;
 this.app.tween(opacity).to(1, 1, pc.SineOut)
.on('update', (function (opacity) {
    this.entity.element.opacity = opacity;   
}).bind(this))
.start();

Tried with vec3 instead of number and it is working. Still looking for a proper solution to tween number type.

 var opacity = new pc.Vec3(0,0,0);
 this.entity.tween(opacity).to(new pc.Vec3(1,0,0), 1, pc.SineOut)
.on('update', (function () {
    this.entity.element.opacity = opacity.x;   
}))
.start();
1 Like
#2

IIRC, you can only do it with object types. You would have to wrap the tweened opacity into an object unfortunately.

1 Like
#3 
var FigureImage = pc.createScript('figureImage');


FigureImage.attributes.add('images', {
    type: 'asset', array:true
   
});

// initialize code called once per entity
FigureImage.prototype.initialize = function() {

    this.entity.element.opacity=0;
    this.opacity={value:0};
};





FigureImage.prototype.FadeIn= function() {
    
    this.opacity.value=this.entity.element.opacity;
    
    if (this.tween) {
        this.tween.stop();

    }

   
    this.tween=this.entity
        .tween(this.opacity)
     .on('update', this.onFadeIn,this)
        .to({value:1.0}, 1.0, pc.SineOut).start();
    

    
};

FigureImage.prototype.onFadeIn = function(dt) {
    
    this.entity.element.opacity=this.opacity.value;
};

FigureImage.prototype.onFadeOut = function(dt) {
    
 this.entity.element.opacity=this.opacity.value;
};

FigureImage.prototype.FadeOut= function() {
    
    this.opacity.value=this.entity.element.opacity;
    
      if (this.tween) {
        this.tween.stop();

      }

  
    this.tween=this.entity
        .tween(this.opacity)
         .on('update', this.onFadeOut,this)
        .to({value:0.0}, 1.0, pc.SineOut).start();
};
2 Likes