Egret社区

分享自己写的转场动画

2020-7-17 18:31
5383
本帖最后由 白开水 于 2020-7-20 12:19 编辑

最近公司项目因为场景切换之间没有任何过渡动画,于是希望加个转场动画,但是因为白鹭本身并没有场景的概念,官方api或者论坛都没能看到已实现的转场动画现成案例,于是我自己实现了一个简单的场景切换动画,抛砖引玉。

第一步,添加场景进入退出接口,添加动画类型枚举
  1. interface ChangeSceneAnim {
  2.     fadeInI();
  3.     fadeOutI(call: Function);
  4. }
  5. enum AnimType {
  6.     None,
  7.     Fade,
  8.     Hole,
  9.     Door,
  10.     Translocation
  11. }
复制代码
第二步,如果每个scene都继承自basescene,就在basescene里实现changeSceneAnim接口,否则每个scene都需要实现
  1. class BaseScene extends egret.Sprite implements ChangeSceneAnim
复制代码


第三步,具体动画实现代码
  1. public drawBmpXY(name: string, x: number, y: number, hcenter: boolean = false, vcenter: boolean = false, scale: number = 1) {
  2.         let bmp = this.createBitmapByName(name);
  3.         this.addChild(bmp);
  4.         bmp.x = x;
  5.         bmp.y = y;
  6.         bmp.scaleX = scale;
  7.         bmp.scaleY = scale;
  8.         if (hcenter) {
  9.             bmp.anchorOffsetX = bmp.width / 2;
  10.         }
  11.         if (vcenter) {
  12.             bmp.anchorOffsetY = bmp.height / 2;
  13.         }
  14.         return bmp;
  15.     }
  16. public fadeIn() {
  17.         if (this.sceneAnim)
  18.             this.sceneAnim.fadeInI();
  19.     }
  20.     public fadeOut(call: any) {
  21.         if (this.sceneAnim) {
  22.             this.sceneAnim.fadeOutI(call);
  23.         } else {
  24.             call.call();
  25.         }
  26.     }
  27.     public fadeInAnim(type?:AnimType) {
  28.         const that = this;
  29.         switch(type){
  30.             case AnimType.Fade:{
  31.                 var bg = this.drawBmpXY("black@2x_png", 0, 0);
  32.                 bg.width = this.stageW;
  33.                 bg.height = this.stageH;
  34.                 egret.Tween.get(bg).to({alpha:0},500).call(()=>{
  35.                     that.removeChild(bg);
  36.                 });
  37.             }
  38.             break;
  39.             case AnimType.Hole:{
  40.                 var posList = [];
  41.                 for(var i=1;i<this.numChildren;i++){
  42.                     var c = this.getChildAt(i);
  43.                     posList.push({"x":c.x,"y":c.y});
  44.                     c.scaleX=c.scaleY=0;
  45.                     c.x = this.stageW/2;
  46.                     c.y = this.stageH/2;
  47.                 }
  48.                 var bg = this.drawBmpXY("findhead@2x_png", this.stageW/2, this.stageH/2);
  49.                 this.setChildIndex(bg,1);
  50.                 bg.anchorOffsetX=bg.width/2;
  51.                 bg.anchorOffsetY=bg.height/2;
  52.                 bg.scaleX=bg.scaleY=0;
  53.                 egret.Tween.get(bg).to({scaleX:1,scaleY:1},500).call(()=>{
  54.                     for(var i=2;i<that.numChildren;i++){
  55.                         var c = this.getChildAt(i);
  56.                         var p = posList[i-2];
  57.                         egret.Tween.get(c).to({scaleX:1,scaleY:1,x:p.x,y:p.y},500);
  58.                     }
  59.                 }).wait(500).to({scaleX:0,scaleY:0},500).call(()=>{
  60.                     that.removeChild(bg);
  61.                 });
  62.             }
  63.             break;
  64.             case AnimType.Door:{
  65.                  var left = this.drawBmpXY("door_left@2x_png", this.stageW/2, 0);
  66.                 left.x = 0;
  67.                 var right = this.drawBmpXY("door_right@2x_png", this.stageW/2, 0);
  68.                 egret.Tween.get(left).to({x:-left.width},500);
  69.                 egret.Tween.get(right).to({x:this.stageW},500).call(()=>{
  70.                     that.removeChild(left);
  71.                     that.removeChild(right);
  72.                 });
  73.             }
  74.             break;
  75.             default:
  76.             break;
  77.         }
  78.         
  79.     }
  80.     public fadeOutAnim(call: Function,type?:AnimType) {
  81.         const that = this;
  82.         switch(type){
  83.             case AnimType.Fade:{
  84.                 var bg = this.drawBmpXY("black@2x_png", 0, 0);
  85.                 bg.width = this.stageW;
  86.                 bg.height = this.stageH;
  87.                 bg.alpha = 0;
  88.                 egret.Tween.get(bg).to({alpha:1},500).call(()=>{
  89.                     that.removeChild(bg);
  90.                     if(call){
  91.                         call();
  92.                     }
  93.                 });
  94.             }
  95.             break;
  96.             case AnimType.Hole:{
  97.                 var bg = this.drawBmpXY("findhead@2x_png", this.stageW/2, this.stageH/2);
  98.                 this.setChildIndex(bg,1);
  99.                 bg.anchorOffsetX=bg.width/2;
  100.                 bg.anchorOffsetY=bg.height/2;
  101.                 bg.scaleX=bg.scaleY=0;
  102.                 egret.Tween.get(bg).to({scaleX:1,scaleY:1},500).call(()=>{
  103.                     for(var i=2;i<that.numChildren;i++){
  104.                         var c = this.getChildAt(i);
  105.                         egret.Tween.get(c).to({scaleX:0,scaleY:0,x:this.stageW/2,y:this.stageH/2},500);
  106.                     }
  107.                 }).wait(500).to({scaleX:0,scaleY:0},500).call(()=>{
  108.                     that.removeChild(bg);
  109.                     if(call){
  110.                         call();
  111.                     }
  112.                 });
  113.             }
  114.             break;
  115.             case AnimType.Door:{
  116.                 var left = this.drawBmpXY("door_left@2x_png", this.stageW/2, 0);
  117.                 left.x = -left.width;
  118.                 var right = this.drawBmpXY("door_right@2x_png", this.stageW/2, 0);
  119.                 right.x = this.stageW;
  120.                 egret.Tween.get(left).to({x:0},500);
  121.                 egret.Tween.get(right).to({x:right.width},500).call(()=>{
  122.                     that.removeChild(left);
  123.                     that.removeChild(right);
  124.                     if(call){
  125.                         call();
  126.                     }
  127.                 });
  128.             }
  129.             break;
  130.             default:{
  131.                 if(call){
  132.                     call();
  133.                 }
  134.             }
  135.             break;
  136.         }
  137.         
  138.     }
  139.     // 开启转场动画
  140.     public enableSceneAnim(type:AnimType){
  141.         this.sceneAnim = this;
  142.         this.animType = type;
  143.     }
  144.     public fadeInI(){
  145.         this.fadeInAnim(this.animType);
  146.     }
  147.     public fadeOutI(call){
  148.         this.fadeOutAnim(call,this.animType);
  149.     }
复制代码



第四步,调用

  1. public changeScene(scene:BaseScene){
  2.         var newScene:any = ()=>{
  3.             if(scene){
  4.                 scene.initStage(this._stage);
  5.                 scene.init();
  6.                 scene.enableSceneAnim(AnimType.Fade);
  7.             }
  8.             this._nowScene = scene;
  9.             if(this._nowScene){
  10.                 this._stage.addChild(this._nowScene);
  11.                 this._nowScene.fadeIn();
  12.             }
  13.         }
  14.         if(this._nowScene){
  15.             this._nowScene.fadeOut(()=>{
  16.                 if(this._nowScene.parent){
  17.                     this._stage.removeChild(this._nowScene);
  18.                 }
  19.                 this._nowScene.destroy();
  20.                 newScene.call();
  21.             });
  22.         } else {
  23.             newScene.call();
  24.         }
  25.     }
复制代码


分享到 :
1 人收藏

3 个回复

倒序浏览
Hjx  炉火纯青 | 2020-7-21 15:33:51
有效果图就更加好了

点评

+1  发表于 2020-7-24 17:53
njj  登堂入室 | 2020-7-22 22:55:05
学习学习
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部