白鹭对包含多个图片子对象透明度更改

直接更改透明度

对包含多个子对象叠加,修改node.alpha可以自动遍历每个子对象去调节透明度。这样的修改方式简单,但是会导致子对象之间会有穿透现象,你会看到一个对象遮挡后面的图片的轮廓。尤其在龙骨动画中,你并不想让人看到被遮挡的胳膊吧---这又不是拍x光片。

使用ColorMatrix滤镜

代码我放到这里,直接调用函数输入值为0~1即可,对node调节能够更改整体的透明度,像渐隐渐现一样。

代码植入

// 透明滤镜
private colorMatrixFilter:egret.ColorMatrixFilter;
private alphaPlusVal:number = 1;
private colorMatrix = [
   1, 0, 0, 0, 0,
   0, 1, 0, 0, 0,
   0, 0, 1, 0, 0,
   0, 0, 0, 1, 0
];

public get alphaPlus():number{
   return this.alphaPlusVal;
}
public set alphaPlus(val:number){
   //let ap = Math.max(Math.min(val,1),0);
   if(this.alphaPlusVal==val){
       return; 
   }
   if(val==1){
       this.alphaPlusVal = val;
       this.filters = null;
       return;
   }
   this.alphaPlusVal=val;
   this.colorMatrix[18] = this.alphaPlusVal;
   if(!this.colorMatrixFilter){
       this.colorMatrixFilter = new egret.ColorMatrixFilter(this.colorMatrix);
   }else{
       this.colorMatrixFilter.matrix = this.colorMatrix;
   }
   this.filters = [this.colorMatrixFilter];
}

调用方法

this.alphaPlus=.5;

改良后可使用tween

egret.Tween.get(this).to({
    alphaPlus: 0
}, 300).call(() => {
})

效果

两种方法比较


使用透明度设置方式
使用滤镜方式

能明显看到用透明度方式简单粗暴,会看到角色的卤蛋,假发,胳膊身体,没有完整感.

你可能感兴趣的:(白鹭对包含多个图片子对象透明度更改)