移花接木(1)- 添加动态热点或动态图层

更新于 2017.1.10

 

1.19官方下载包路径

你电脑的路径\krpano-1.19-pr8\viewer\examples\animated-hotspots

提示:如果不了解何谓下载包路径,请查看 循序渐进(3)- krpano下载包的使用说明

 

1.19 pr8动态热点在线演示

 

VIP会员代码运行器

动态热点或图层的原理

让krpano全景里的热点(hotspot)或layer产生动态效果,例如不断变化的箭头大小或一直变幻颜色的图片,这样更容易引起浏览者的注意,效果也比较酷炫。当提到动态时,有人会想到flash文件或是gif图片,但在这里不推荐使用。因为只有Flash viewer才支持swf文件。虽然HTML5 viewer下支持gif动画,但在很多浏览器下表现不如png图片序列。我们需要使用png图片序列,并且运用简单的动态代码,让这些图片动起来。
把图片序列做在一张图(透明png)上。例如下图,我们实际上只是在切换这张图的不同区域从而产生动态效果:

QQ图片20150527092948

 

将多张png图片合并成一个png序列图的小工具PngMergeHelper

下载地址:http://pan.baidu.com/s/1c0hcy

同时提供将多个jpg图片合并在一个jpg序列的小工具JPGCombine

下载地址:http://pan.baidu.com/s/1pKxgFpx 密码:36qr

提供一个将gif分离成多个png的小工具GIF分离器

下载地址:http://pan.baidu.com/s/1minnTtm 密码:m3js

 

可以选择自己制作png动态图,也可以用已有的gif,先分离成多个png,然后合并为一个png序列图(需要在ps中进行背景透明处理)。

 

也就是说要做动态热点或动态图的话,必须有类似上面的一张序列图,如果你只使用一个箭头的单帧图片,然后在hotspot代码或layer代码的url属性写这个箭头的路径,是不会有任何的动态效果的。实际上用这个小工具还可以创造环物的照片序列png。为什么要把多个图片做成png序列。好处就是切换不同图片时不用重新加载,如果重新加载新图时,也就是更改url属性,速度再快,都会有一个明显的卡顿甚至有个黑块的闪烁,使用图片序列的话,我们只是在一开始载入了一张图片,只是通过切换图片的不同区域来制造动画效果的话,这样就避免了在动态热点演示过程中出现卡顿的情况,这同样是环物制作中需要用到png图片序列的原因。而且使用一个png图片也相对比多个png图片减少了文件的总体积。

 

更多不同样式的热点序列图:链接:http://pan.baidu.com/s/1i396ukH 密码:xwaa  720云 

PTP 2.5 热点图标包 链接:http://pan.baidu.com/s/1hshZPWS 密码:6vcv

QQ图片20160604075031

海量动态图素材:

链接:http://pan.baidu.com/s/1hs2lP5M 密码:lezl

 

1.19 pr8代码说明

1.19 pr4及之后版本优化了对png序列图的处理,你可以使用多横多纵的序列图。如下图是7横x7列的序列图(分辨率为700*700.每一帧为100*100)

explosion

或者是下面的单排序列图(可以是横排或者纵排)。

arrow

krpano 1.19 pr4之后案例的png序列图如果是多横多纵的话,其动画顺序是从左至右,从上至下

 

当要使用动态热点或动态layer时,务必要在主xml(tour.xml)空白处的scene标签的外面,放入以下动作代码do_crop_animation

点击代码窗口最右侧按钮,在新窗口打开后复制代码

正常情况下,这个action是不用特意修改的。它还内置了onlastframe,在调用的hotspot或layer中可以加入onlastframe属性,写上每次到最后一帧时要执行的动作。

如果你正确地调用了png序列图,那么你需要知道的就是该序列图上每一帧的宽度和高度,例如第一张爆炸动态图explosion.png,我们知道它是一张700×700的序列图,每一排每一列都是7个小图,可以计算得出每一个小图也就是每一帧是100×100像素。同时我们确定其帧速率为60fps。因为只需要在该动态的热点箭头hotspot的静态代码或layer中使用url和onloaded就可以了。也就是

点击代码窗口最右侧按钮,在新窗口打开后复制代码

url是我们的序列图的路径,然后只要在这个hotspot或layer的代码的onloaded事件加上do_crop_animation,注意是加上,因为onloaded事件里可能还有其它动作

 

do_crop_animation()是在png图加载完开始执行,不然的话就会闪烁。第一个参数代表的是序列图每一个小图的宽度,第二个参数是小图的高度,第三个参数是动画的帧速率,数值越大,动态越明显。在本案例中分别是100、100和60。

 

这种用法对于layer也是适用的。url是我们的序列图的路径,然后只要在layer代码的onloaded事件加上do_crop_animation

 

案例中其它热点的代码也是类似的。这里有个好玩的地方,是爆炸这个动态图用了随机坐标。也就是有个onlastframe的自定义属性。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

注意spot3这个热点的ath和atv两个球面坐标是随机的,random会随机产生一个0到1之间的数。然后由calc后面的算式来计算出第一次的坐标所在。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

什么时候会执行onlastframe呢?这在do_crop_animation已经定义了。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

当frame大于或者等于frames时,也就是执行到最后一帧时,检查是否有onlastframe,这里是有的,然后就执行onlastframe。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

也是一个随机计算坐标的action。

 

1.19 动态热点上添加始终显示的文字

第一步 显示所链接场景scene的title

如果是链接到场景的title,在该hotpsot的静态属性中添加自定义属性linkedscene,写对应链接的scene的name。如:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

显示自定义文字

如果是自定义文字,在该hotpsot的静态属性中添加text,写对应文字。如:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

无论是linkedscene还是text都是hotspot该元素的自定义属性,非krpano自有的内置的属性。它仅仅是记录了某个字符串或数值。

第二步 在热点的onloaded事件中加上add_all_the_time_tooltip()

点击代码窗口最右侧按钮,在新窗口打开后复制代码

第三步 空白处加上action

在scene标签外添加

点击代码窗口最右侧按钮,在新窗口打开后复制代码

如果有text自定义文字,则选择自定义文字作为显示内容,没有text,则获取linkedscene所链接scene的title属性作为文字内容。

通过修改align、edge、x、y的数值可以控制文字相对于热点图片的位置。

通过修改两个css可以控制文字在手机端(device.mobile)和非手机端的文字样式,

 

热点或图层在鼠标点击或鼠标悬停时进入动态模式

还有一种变化即该热点或图层不是一开始就是动态中,而是需要鼠标点击或者悬停时才进入到动态模式中,而在鼠标再次点击或移出时,热点或图层则恢复到静止状态。这样的话,我们需要有两个action,如下一个是do_crop_animation_onclick,一个是do_crop_animation_register。

在热点的onloaded事件中写do_crop_animation_register,在onclick或onover和onout中写do_crop_animation_onclick。注意不能同时用onclick或者onover。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

1.18官方下载包路径

你电脑的路径\krpano-1.18.6\examples\xml-usage\animated-hotspots

提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明

 

1.18在线演示

 

1.18方法说明

 

  • 我们用crop这个属性持续改变着需要显示的区域,从而实现动画的效果。我们直接用官方案例的这两个png图片。我们把这两个图片hotspot_ani_black_64x64x20.png以及hotspot_ani_white_64x64x20.png复制到项目文件夹。打开刚才路径中的anihotspots.xml文件,将以下代码复制到自己的tour.xml,记住放在scene标签的外面

点击代码窗口最右侧按钮,在新窗口打开后复制代码

  • 下一个步骤在scene标签里加入hotspot代码,你可以运用tour_editor.html来获取热点的坐标,也就是ath,atv。但记住style属性一定要与上一个代码中的style的name一致,也就是hotspot_ani_black或者hotspot_ani_white,至于onclick的内容,我这里留空,你可以添加任意的action,例如打开一张图片或者进入另一个场景等等。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

720云原创的热点图有两种,一个是128*3200,对应的style中的代码是:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

一个是128*1280,对应的style中的代码是

点击代码窗口最右侧按钮,在新窗口打开后复制代码

那到底在这个过程中发生了什么事情?首先我们来看几个hotspot的代码,这里面调用了两种不同的style,因此要有对应的style的名字,一个是带black的,一个是带white的,它们既然用了这两个style,就必然要有对应的这两个name的style,也就是两个不同的style的元素。在这两个style元素里,首先定义了序列图的路径,也就是url。然后就是crop,这个crop实际上就是序列图中的“第一帧”,关于crop的用法请看下面的说明。framewidthframeheight分别要指明这一帧画面的宽度和高度(这一行的四个属性都是自定义属性),后面两个则指明第一个图是0(这肯定是0),然后你有多少个图在序列中,你就减去1后,填入那个数字,例如在本例中是20帧组成一个序列图,因此就是填19。像720原创热点有25帧的,就是填24,有10帧的就是填9。当这些图成功载入之后,我们就要让它动起来。因此使用了onloaded,onloaded就是当该热点加载完毕后执行的动作,也就是文件都加载在内存了,但这时候还没有显示在窗口,你可以在这时候执行的动作hotspot_animate。这个动作很简单,就是不断通过改变crop的数值,来使得下一帧显现出来,速度是0.3秒一张。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

1.18动态热点上添加始终显示的文字

在默认热点上始终显示场景的title,我们有一个教程:在默认热点上方始终显示文字

现在我们要做的是如何在动态热点上添加始终显示文字,首先我们用tour_editor添加热点,教程如下:循序渐进(8)- 加入中文信息、设置起始视角和热点

我们会看到在tour.xml的scene标签里多了热点的代码,如下:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

我们如果有多个热点,可以全部添加完,然后用ctrl+H替换style的数值

点击代码窗口最右侧按钮,在新窗口打开后复制代码

然后我们找到动态热点的style

点击代码窗口最右侧按钮,在新窗口打开后复制代码

将onloaded的部分改为:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

同时,不要忘了在xml的空白位置添加对应的add_all_the_time_tooltip动作。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

 

crop属性的用法

不管是1.19还是1.18的方法,都是对png图片序列进行crop数值的切换,因为我们需要了解crop。下面是一个普通的png图片。通过crop的设置,我们将图片的不同区域提取出来。

crop-example-buttons

 

crop原意为切割,通常是这样的:

我们如果没用crop属性的话,那就是会如上图显示的形式。当我们用了crop以后,krpano就会根据crop的数值对这个图片开始进行切割。那怎么确定切割那一块呢?首先是动刀子的起始坐标,也就是前面的两个数字,它们分别是开始切割的x和y的数值。图的原点在左上角为(0,0)。往右就是x坐标值增大,往下y坐标值增大。因此(10,45)在下面黑点处。

QQ图片20150602144841

 

找到下刀的地方,接下来就是切割出一个矩形,我们只需要知道这个矩形的宽度和高度。也就是200和100。

QQ图片20150602144949

这样我们就得到我们想要的按钮。

下面说明一下如果在photoshop中获取crop的四个数值。

  • 首先在窗口菜单中打开信息窗口。

QQ图片20151129091024

 

  • 在信息窗口中点击+号,选择单位为像素

QQ图片20151129091055

 

  • 鼠标放在蓝点中位置,看到信息窗口中X和Y分别显示为10和45。

QQ图片20151129091128

  •  使用矩形选择工具,拉出一个矩形框,看到右侧W和H分别显示200和100。

QQ图片20151129091305

除了crop以外,还有onovercrop以及ondowncrop两种属性,也就是实现了在鼠标悬停和按下时的crop属性设置。其值的设置是相同的。

 

 

在 “移花接木(1)- 添加动态热点或动态图层” 上有 2 条评论

发表评论