更新于 2020.11.19 krpano 1.20.9
官方下载包路径
你电脑的路径\krpano-1.20.9\viewer\examples\blending-demo
提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明
在线演示
原理
所谓场景过渡效果,就是切换scene时,两个scene之间的过渡效果,具体可看上面的演示。
loadscene(scenename, vars*, flags*, blend*)
过渡效果起作用的就是上面loadscene动作的第四个参数blend。当我们使用官方默认皮肤时,可以在tour.xml的下面代码的高亮部分中找到
点击代码窗口最右侧按钮,在新窗口打开后复制代码
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 37 38 39 40 41 42 43 44 45 46 47 |
<skin_settings maps="false" maps_type="bing" maps_bing_api_key="" maps_zoombuttons="false" gyro="true" webvr="true" littleplanetintro="false" title="true" thumbs="true" thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160" thumbs_opened="false" thumbs_text="false" thumbs_dragging="true" thumbs_onhoverscrolling="false" thumbs_scrollbuttons="false" thumbs_scrollindicator="false" thumbs_loop="false" tooltips_buttons="false" tooltips_thumbs="false" tooltips_hotspots="false" tooltips_mapspots="false" deeplinking="false" loadscene_flags="MERGE" loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)" loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)" loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)" loadingtext="loading..." layout_width="100%" layout_maxwidth="814" controlbar_width="-24" controlbar_height="40" controlbar_offset="20" controlbar_offset_closed="-40" controlbar_overlap.no-fractionalscaling="10" controlbar_overlap.fractionalscaling="0" design_skin_images="vtourskin.png" design_bgcolor="0x2D3E50" design_bgalpha="0.8" design_bgborder="0" design_bgroundedge="1" design_bgshadow="0 4 10 0x000000 0.3" design_thumbborder_bgborder="3 0xFFFFFF 1.0" design_thumbborder_padding="2" design_thumbborder_bgroundedge="0" design_text_css="color:#FFFFFF; font-family:Arial;" design_text_shadow="1" /> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 |
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)" loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)" loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)" |
在主xml的scene外加入以下代码:
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 |
<blendmodes name="no blending" description="无过渡效果" blend="NOBLEND" /> <blendmodes name="simple crossblending" description="简单淡入淡出" blend="BLEND(1.0, easeInCubic)" /> <blendmodes name="zoom blend" description="缩放过渡" blend="ZOOMBLEND(2.0, 2.0, easeInOutSine)" /> <blendmodes name="black-out" description="黑场过渡" blend="COLORBLEND(2.0, 0x000000, easeOutSine)" /> <blendmodes name="white-flash" description="白场过渡" blend="LIGHTBLEND(1.0, 0xFFFFFF, 2.0, linear)" /> <blendmodes name="right-to-left" description="从右至左" blend="SLIDEBLEND(1.0, 0.0, 0.2, linear)" /> <blendmodes name="top-to-bottom" description="从上至下" blend="SLIDEBLEND(1.0, 90.0, 0.01, linear)" /> <blendmodes name="diagonal" description="对角线" blend="SLIDEBLEND(1.0, 135.0, 0.4, linear)" /> <blendmodes name="circle open" description="圆形展开" blend="OPENBLEND(1.0, 0.0, 0.2, 0.0, linear)" /> <blendmodes name="vertical open" description="垂直展开" blend="OPENBLEND(0.7, 1.0, 0.1, 0.0, linear)" /> <blendmodes name="horizontal open" description="水平展开" blend="OPENBLEND(1.0, -1.0, 0.3, 0.0, linear)" /> <blendmodes name="elliptic + zoom" description="椭圆缩放" blend="OPENBLEND(1.0, -0.5, 0.3, 0.8, linear)" /> |
1 |
loadscene(scenename, null, MERGE, get(blendmodes[black-out].blend)); |
blend参数说明
blend (可选)
混合淡入到下一个全景 – 转场动画。
可用的混合模式:
NOBLEND
无混合,直接切换到下一个全景(默认)。
BLEND(time, tweentype)
混合 / 淡入淡出当前全景与下一个全景。
参数:
- time – 以秒为单位的混合时间 (默认=2.0)。
- tweentype – 混合曲线/运行形态,混合动画的类型。(默认=easeInCubic) – 查看 tweentypes。
(仅WebGL)COLORBLEND(time, color, tweentype)
混合至某种颜色,然后从该颜色转到下一个全景。
参数:
- time – 以秒为单位的混合时间 (默认=2.0)。
- color – 转场时两个全景之间的颜色,十六进制颜色值 (默认=0x000000 = 黑色)。
- tweentype – 混合曲线/运行形态,混合动画的类型。(默认=easeInOutSine) – 查看 tweentypes。
(仅WebGL)LIGHTBLEND(time, color, colorscale, tweentype)
添加或减去某种颜色,然后交叉淡化到下一个全景。
参数:
- time – 以秒为单位的混合时间 (默认=2.0)。
- color – 添加的颜色,十六进制颜色 (默认=0xFFFFFF = 白色)。
- colorscale – 颜色的比例系数,使用负数表示减去 (默认=2.0)。
- tweentype – 混合曲线/运行形态,混合动画的类型。(默认=easeInCubic) – 查看 tweentypes。
(仅WebGL)SLIDEBLEND(time, angle, smooth, tweentype)
在当前和下一个全景之间的幻灯片动画。
参数:
- time – 以秒为单位的混合时间 (默认=2.0)。
- angle – 幻灯片切换的角度 (默认=0.0)。
- smooth – 转场线条的平滑/模糊程度 (0.0到 1.0, 默认=0.2)。
- tweentype – 混合曲线/运行形态,混合动画的类型。(默认=linear) – 查看 tweentypes。
(仅WebGL)OPENBLEND(time, shape, smooth, zoom, tweentype)
在当前和下一个全景之间的展开动画。
参数:
- time – 以秒为单位的混合时间 (默认=2.0)。
- shape – 定义展开形状 (-1.0 到 +1.0) – 0.0=圆圈展开, -1.0=垂直展开, +1.0=水平展开 (默认=0.0)。
- smooth – 转场线条的平滑/模糊程度 (0.0 到 1.0, 默认=0.2)。
- zoom – 对旧全景的放大。 (0.0 到 1.0, 默认=0.0).。
- tweentype – 混合曲线/运行形态,混合动画的类型。(默认=linear) – 查看 tweentypes。
(Flash或仅WebGL)ZOOMBLEND(time, zoom, tweentype)
放大到当前视域,交叉淡化到下一个全景。
参数:
- time – 以秒为单位的混合时间 (默认=2.0)。
- zoom – 缩放因子 (默认=2.0).
- tweentype – 混合曲线/运行形态,混合动画的类型。(默认=easeInOutSine) – 查看 tweentypes。
注意- 如果所选择的混合模式无法支持(例如选择了‘仅WebGL’模式,但支持CSS3D和Flash),则自动使用默认混合模式。