關於Krpano實現全景按鈕的簡單動畫

關於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>

學會這兩個東西，就可以實現一些簡單的動畫效果了，趕緊行動吧！