[摘要]还记得如何插入动态热点吗,当然,我们学员都记得。三个因素:1、图片 2、帧大小 3、帧总数 4、帧切换时间。 这样就可以插入了。但这有个麻烦的问题是,如果我拿到一张这样的图片,帧总数是需要自己根据帧大小算一下才出来的,算错了热点播放时会跳帧现象。这次官方推出一个js的方法,您不需要知道帧总数就可以插入动态热点,js自动计算好帧总数了,图片还可以自动识别多种排列形式,使用上方便不少。
代码说明
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!-- do_crop_animation(framewidth, frameheight, framerate) - 全新动态热点动作 - 参数: - framewidth - 帧宽 - frameheight - 帧高 - framerate - 每秒显示帧数 - 图片是横向、竖向、矩阵形式均可,自动识别(详见案例文件) - 图片读取方向是从左到右,上到下 --> <action name="do_crop_animation" scope="local" args="framewidth, frameheight, framerate"> <!-- define local variables --> calc(local.xframes, (caller.imagewidth /framewidth) BOR 0); calc(local.frames, xframes * ((caller.imageheight / frameheight) BOR 0)); def(local.frame, integer, 0); <!-- set the first frame --> calc(caller.crop, '0|0|' + framewidth + '|' + frameheight); <!-- do the animation --> 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); , <!-- stop the interval when the hotspot gets removed --> clearinterval(calc('crop_anim_' + caller.name)); ); ); </action> |
1 2 3 4 |
<!--热点调用:--> <!--onloaded中调用do_crop_animation(帧宽,帧高, 帧速率)--> <hotspot name="spot4" url="circle.png" onloaded="do_crop_animation(102,102, 60)" ath="0" atv="0" enabled="false" /> |