移花接木(26)- 场景过渡效果

更新于 2017.9.21 krpano 1.19-pr13

官方下载包路径

你电脑的路径\krpano-1.19-pr13\viewer\examples\blending-demo

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

 

1.19在线演示

 

原理

所谓场景过渡效果,就是切换scene时,两个scene之间的过渡效果,具体可看上面的演示。

loadscene(scenename, vars*, flags*, blend*)

过渡效果起作用的就是上面loadscene动作的第四个参数blend。当我们使用官方默认皮肤时,可以在tour.xml的下面代码的高亮部分中找到

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

这三个loadscene_blend分别控制的是正常情况下和使用上一个下一个场景功能时的场景过渡效果,你可以直接修改这三个设置。

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

如果我们想为某个特殊的loadscene动作加上不一样的过渡效果,请按照以下步骤进行。

在主xml的scene外加入以下代码:

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

例如我们需要从右至左类似翻页式的过渡,那么loadscene可以这样写。
scenename要写你要进入的scene的name。最后一个参数就是获取blendmodes中的属性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),则自动使用默认混合模式。