热点动画原理: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));
);
);
</action>
在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>
网友评论