egret笔记之gui内设置动画效果

标签：

EgretWing->设计->窗口->动画

可以打开动画编辑面版。

首先需要针对当前UI界面设置各种状态。我们简单的设置

【close】：代表当前UI界面处于不可见状态。

【open】：代表当前UI界面处于可见状态。

在动画面版，选择需要增加动画的组件，添加动画效果：

动画效果设置完毕后，创建对于的ts文件。

  public getCurrentSkinState():string
    {
        if(this.parent) {
            // 可见
            return "open";
        }else{
           //  不可见
            return "close";}
    }

重写getCurrentSkinState方法，修改返回的状态值。如果不重写，你会发现动画根本不会有任何效果。

因为源码是这样的：

/**
* 返回组件当前的皮肤状态名称,子类覆盖此方法定义各种状态名
* @method egret.gui.SkinnableComponent#getCurrentSkinState
* @returns {string}
*/
public getCurrentSkinState():string {
return this.enabled?"normal":"disabled"
}

所以这个地方需要特殊注意！！！！！

如果状态特别多，可以考虑自己新建变量，自行来修改控制。

仔细想想，状态的区分实际更像是界面切换的标识。

比如：在一个UI皮肤里面，我们管理3个场景，（胜利UI，失败UI，暂停UI）。这时我们通过state（win,pause,fail）3个状态来对应。

当然你也可以分3个UI皮肤来分别实现3个UI。这样的话，就不好做出特别好的动画效果了。

[

可能有人会问，在close状态下不是所有组件都是不可见的或者不存在的么？为什么之前要在所有状态下编辑面板，而不是在open状态下编辑？ 因为在close状态下，整个面板是没有被添加到舞台的不在显示列表，所以当我们看到这个面板时，这个面板一定是open状态。所以在所有状态下编辑也未尝不可。可能有人又会问，是不是弄反了，close状态才应该是这样的，open状态下才应该显示所有的组件？ 上面说到了close状态是看不见的，怎么设置都行。关键是open状态，当状态从close变为open时，刚开始那些元素确实是在屏幕外或者看不到的，是随着动画的进行才开始出现的。所以这里是模拟的动画开始时候open状态下的预览。

]

参考文章：

http://bbs.egret-labs.org/forum.php?mod=viewthread&tid=6503

egret笔记之gui内设置动画效果

标签：

原文地址：http://my.oschina.net/oahcfly/blog/472137