关于Krpano实现全景按钮的简单动画

本文讲述一个简单的按钮控制图片的显示隐藏：

---

代码如下

在你的皮肤 XML 文件里插入layer标签：

<krpano>
    <layer name="skin_logo" zorder="15" keep="true" url="2.png" align="lefttop" x="10" y="10" capture="false" accuracy="1" scale="0.10"  onclick="hidden();" />
    <layer name="weixin" type="container" keep="true" width="300" height="270" align="topcenter" bgcolor="0x000000" bgalpha="0.5" y="10" />
    <action name="hidden">
        <!--tween(图层.x,坐标,时间,动画方式);-->
        tween(layer[weixin].height,0,0.5,easeOutQuint,tween(layer[weixin].height,270));
    </action>
</krpano>

除了简单的动画之外稍稍复杂的动画就需要进行条件判断了：

<krpano>
    <layer name="skin_logo" zorder="15" keep="true" url="2.png" align="lefttop" x="10" y="10" capture="false" accuracy="1" scale="0.10"  onclick="hidden();" />
    <layer name="weixin" type="container" keep="true" width="300" height="270" align="topcenter" bgcolor="0x000000" bgalpha="0.5" y="10" state="open" />
    <action name="hidden">
        <!--tween(图层.x,坐标,时间,动画方式);-->
        tween(layer[weixin].height,0,0.5,easeOutQuint,tween(layer[weixin].height,270));
        <!--if(条件，事件1，事件2);-->
        if(layer[weixin].state == 'open',
        set(layer[weixin].state,'close');
        set(layer[skin_logo1].visible,false);
        tween(layer[weixin].height,0,0.5,easeOutQuint,set(layer[weixin].visible,false));
        ,
        set(layer[weixin].state,'open');
        set(layer[weixin].visible,true);
        set(layer[skin_logo1].visible,true);
        tween(layer[weixin].height,270,0.5,easeOutQuint);
        );
    </action>
</krpano>

学会这两个东西，就可以实现一些简单的动画效果了，赶紧行动吧！