快速实现APP里的图层时间错位延迟(屌丝钢铁侠)(原创文章)

5/7/2014来源:Photoshop教程人气:2290

应多位朋友的要求,附上关于如何是做幻灯片联动的教程!第一次写关于教程的东西,如果有些生硬和不足的文件,请大家多多包含!


在开始前请观看下面我用Celluloid做的一个实例:



其实原理很简单,利用多个元素的位移距离,来产生一种视觉上的时间差!


我们随意制作一个超级简单的例子:

新建两个不同的幻灯片,不重叠,分别放置画布的左和右,幻灯片的状态相同,2个以上的状态。

在属性面板里“幻灯片1”设置为从上向下的吸附滑动,“幻灯片2”设置为从右向左的吸附滑动,在“幻灯片2”的“同步状态”里设置同步“幻灯片1”,这样一个最简单的幻灯片联动就完成了。

点击“预览”或者通过ipad里的“IPSviewer”来观看,当拖动“幻灯片2”从右向左滑动时,“幻灯片1”相应“幻灯片2”产生从右向左的吸附滑动,这样,能够很明显的感觉到两个幻灯片之间的联动效果。

具体设置如下图:


其实在视频实例里跟上一个案例差不多,只不过是增加了很多层的幻灯片一起联动罢了!



图层:

在这里,你也许会注意到为什么会出现一个“控制”的幻灯片?当我们为了增加一些更细腻的图层错误效果的时候,需要在视觉上产生不同的时间差,我们在幻灯片制作上,就会出现不同状态数的幻灯片联动,这样,能让画面更加丰富起来。而不同状态数是如何控制的呢?

简单说,幻灯片联动的方式取决于最上层的幻灯片,我们只要把最上层的幻灯片里的状态数设置为自己想要的几个滑动点,比如状态数为3,每次位移距离就是把其余一些幻灯片位移的三分之一。也许你看到我这样说,很迷糊,不妨自己来试试,做一些效果出来。

如果还不明白,请看下图:






总而言之,幻灯片联动取决于最上层的幻灯片,按照最上层的状态数控制其余下层的等分分割来产生移动距离!


至于钢铁侠身上的破损特效,是通过在Flash里制作的序列帧动画,然后镶嵌在幻灯片里实现的!如果懂ae或者flash的朋友,这些都很简单, 输出PNG序列图就可以了!


如果大家还有什么不明白的,可以下载附件里的源文件,供大家学习和参考!

补充:

此效果使用的软件为:Celluloid,软件可以去http://www.mcitech.cn/download.html下载,

支持此效果的IPS Viewer播放器appstore也更新了,可以直接去https://itunes.apple.com/cn/app/ipsviewer/id577727858?mt=8下载

安卓的IPS Viewer下载地址为:http://www.mcitech.cn/download.html