Egret实现场景加载淡出淡入效果

假定有场景A和B,当从场景A切换到B时,我希望他有一个淡出淡入的效果,该如何实现呢?

  • 本篇文章的代码仅供参考,你可以自行修改以达到你想要的效果

博主使用tween(缓动动画)来实现,官方教程

准备工作

你需要一张纯黑的图片,并把它加入你的资源文件中

切出场景(场景A)

A场景切出的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
//new一个Bitmap对象
let image:egret.Bitmap = new egret.Bitmap(RES.getRes("black_jpg")); //这里的black_jpg是准备好的黑色图片
//把图片设置为透明
image.alpha = 0;
//把图片加入场景
this.addChild(image);
//让图片铺满屏幕
this.width = this.stage.stageWidth;
this.height = this.stage.stageHeight;
//获取缓动对象
let tween = egret.Tween.get(image);
//把图片的alpha从0缓动到1,时间为500毫秒
tween.to({alpha:1},500).call(this.changeScene); //changeScene是缓动结束后调用的函数

alpha是图片的透明度,设置为0是完全透明,设置为1是不透明,alpha的值默认为1,使用tween使纯黑图片的alpha从0缓动到1即可实现简单的淡出效果

切入场景(场景B)

B场景切入的代码

1
2
3
4
5
6
7
8
9
10
11
//new一个Bitmap对象
let image:egret.Bitmap = new egret.Bitmap(RES.getRes("black_jpg")); //这里的black_jpg是准备好的黑色图片
//把图片加入场景
this.addChild(image);
//让图片铺满屏幕
this.width = this.stage.stageWidth;
this.height = this.stage.stageHeight;
//获取缓动对象
let tween = egret.Tween.get(image);
//把图片的alpha从1缓动到0,时间为500毫秒
tween.to({alpha:0},500).call(this.loaded); //loaded是缓动结束后调用的函数

注意事项

在场景B加载完成后,一定要把图片从场景中移除,你可以在缓动完成后调用的函数中移除图片,例如

1
2
3
loaded(image:egret.Bitmap){
this.removeChild(image);
}

注意,tween缓动动画是异步执行的,请不要在tween.to({alpha:0},500).call(this.loaded)的后一行移除图片,否则你将看不到你想要的效果
缓动完成后调用的函数则需要这样写,其中bind的作用是将image作为参数传递

1
2
//把图片的alpha从1缓动到0,时间为500毫秒
tween.to({alpha:0},500).call(this.loaded.bind(image));

构建项目

1
egret build