krpano全景漫游(1.20.11版本)-添加热点动画以及文字

最新推荐文章于 2023-09-27 18:05:56 发布

where are go

最新推荐文章于 2023-09-27 18:05:56 发布

阅读量702

点赞数

文章标签：动画 html 前端

原文链接：https://www.jianshu.com/p/c25677a0f247

版权

热点动画原理:krpano官方不推荐使用gif动画,所以我们在项目中一般用雪碧图,配合简单的动态代码,让图片动起来

1.在votourskin.xml文件中加以下代码

    <action name="do_crop_animation" scope="local" args="framewidth, frameheight, framerate">

calc(local.xframes, (caller.imagewidth /framewidth) BOR 0);
calc(local.frames, xframes * ((caller.imageheight / frameheight) BOR 0));
def(local.frame, integer, 0);
calc(caller.crop, '0|0|' + framewidth + '|' + frameheight);
<!-- 动画部分 -->
setinterval(calc('crop_anim_' + caller.name), calc(1.0 / framerate),
    if(caller.loaded,
        inc(frame);
        if(frame GE frames, if(caller.onlastframe !== null, callwith(caller, onlastframe() ) ); set(frame,0); );
        mod(xpos, frame, xframes);
        div(ypos, frame, xframes);
        Math.floor(ypos);
        mul(xpos, framewidth);
        mul(ypos, frameheight);
        calc(caller.crop, xpos + '|' + ypos + '|' + framewidth + '|' + frameheight);
      ,
        <!-- 当热点移除时停止动画 -->
        clearinterval(calc('crop_anim_' + caller.name));
    );
);

在tour.html文件中热点代码中做修改(此时已经有了热点动画)

之前系统图片的url去掉,换成你自己的雪碧图,注意路径不要错误.
add_all_the_time_tooltip():热点文字使用
do_crop_animation:热点动画,此处要主要雪碧图每一帧的宽高(宽,高,帧数)
loadscene点击触发加载的函数,这里可以设置热点跳转的动画,不然可能会没动画的
text:热点的名字

<hotspot name="spot1" url="./skin/animatedhotspot_black.png"  onloaded="add_all_the_time_tooltip();do_crop_animation(64,64, 60)"  ath="44.428" atv="7.840" onclick="loadscene(get(linkedscene),null, MERGE, BLEND(1))"  linkedscene="scene_183625ppmpfmot2ggxoku1" text="学校"/>

用于设置热点名字的action,在votourskin.xml文件中

<action name="add_all_the_time_tooltip">
        txtadd(tooltipname, 'tooltip_', get(name));
        addplugin(get(tooltipname));
        txtadd(plugin[get(tooltipname)].parent, 'hotspot[', get(name), ']');
        set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
        set(plugin[get(tooltipname)].align,top);
        set(plugin[get(tooltipname)].edge,bottom);
        set(plugin[get(tooltipname)].x,0);
        set(plugin[get(tooltipname)].y,0);
        set(plugin[get(tooltipname)].autowidth,true);
        set(plugin[get(tooltipname)].autoheight,true);
        set(plugin[get(tooltipname)].vcenter,true);
        set(plugin[get(tooltipname)].background,true);
        set(plugin[get(tooltipname)].backgroundcolor,0x000000);
        set(plugin[get(tooltipname)].roundedge,5);
        set(plugin[get(tooltipname)].backgroundalpha,0.65);
        set(plugin[get(tooltipname)].padding,5);
        set(plugin[get(tooltipname)].border,false);
        set(plugin[get(tooltipname)].glow,0);
        set(plugin[get(tooltipname)].glowcolor,0xFFFFFF);
        set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei;  font-size:24px;');
        if(device.mobile,set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei; font-weight:bold; font-size:24px;');
            );
        set(plugin[get(tooltipname)].textshadow,0);
        set(plugin[get(tooltipname)].textshadowrange,6.0);
        set(plugin[get(tooltipname)].textshadowangle,90);
        if(text == '' OR text === null,
        copy(plugin[get(tooltipname)].html,scene[get(linkedscene)].title),
        copy(plugin[get(tooltipname)].html,text)
        );    
        set(plugin[get(tooltipname)].enabled,false);    
</action>