
上QQ阅读APP看书,第一时间看更新
3.5.3 效果展示
现在让我们一起欣赏首都北京的名胜古迹,通过动感影集观看风景组图。动感影集的画面一开始从无到有,故而适合采取灰度动画渐进展示首张照片(太和殿,如图3-48所示)。等待首张照片完全呈现后,逐步缩小它的显示区域,使得第二张照片徐徐拉开(播放天坛的裁剪动画,如图3-49所示)。

图3-48 动感影集的灰度动画效果

图3-49 动感影集的裁剪动画效果
接下来的动画特效从百叶窗动画开始,可观察到的动感影集轮播效果如图3-50~图3-53所示。图3-50展示了八达岭的百叶窗动画,图3-51展示了恭王府的马赛克动画,图3-52展示了圆明园的淡入淡出动画,图3-53展示了颐和园的平移动画。

图3-50 动感影集的百叶窗动画效果

图3-51 动感影集的马赛克动画效果

图3-52 动感影集的淡入淡出动画效果

图3-53 动感影集的平移动画效果
影集最后来个超炫的乾坤大挪移,其效果如图3-54所示,很明显这是一个包含旋转动画在内的集合动画。等到集合动画播放完毕,展示影集的最后一张照片(鸟巢)。

图3-54 动感影集中的集合动画效果
为方便演示,动感影集不支持自行选择照片,而是在代码中固定使用了几张照片。另外,各种动画的执行顺序也是固定的,不支持定制动画顺序。读者若有兴趣,可在源码的基础上加以改造,增加选择照片与定制顺序的功能,使其更贴近真实动感影集的使用习惯。