Egret实现场景加载淡出淡入效果
假定有场景A和B,当从场景A切换到B时,我希望他有一个淡出淡入的效果,该如何实现呢?
- 本篇文章的代码仅供参考,你可以自行修改以达到你想要的效果
博主使用tween(缓动动画)来实现,官方教程
准备工作
你需要一张纯黑的图片,并把它加入你的资源文件中
切出场景(场景A)
A场景切出的代码
1 | //new一个Bitmap对象 |
alpha是图片的透明度,设置为0是完全透明,设置为1是不透明,alpha的值默认为1,使用tween使纯黑图片的alpha从0缓动到1即可实现简单的淡出效果
切入场景(场景B)
B场景切入的代码
1 | //new一个Bitmap对象 |
注意事项
在场景B加载完成后,一定要把图片从场景中移除,你可以在缓动完成后调用的函数中移除图片,例如
1 | loaded(image:egret.Bitmap){ |
注意,tween缓动动画是异步执行的,请不要在tween.to({alpha:0},500).call(this.loaded)的后一行移除图片,否则你将看不到你想要的效果
缓动完成后调用的函数则需要这样写,其中bind的作用是将image作为参数传递
1 | //把图片的alpha从1缓动到0,时间为500毫秒 |
构建项目
1 | egret build |