header_v0.7.32

3分钟,学会如何设计“iPhone7发布会快闪”H5?

1年前发布

原创文章 / 多领域 / 观点
沉沦的巨婴 原创,如需商业用途或转载请与沉沦的巨婴联系,谢谢配合。

别眨眼!iPhone7发布会快闪版秒秒闪到你!

9b3757d2498d0000012e7e9760e0.jpg


还没看过这个短片《别眨眼!iPhone7发布会快闪版秒秒闪到你!》的人,建议百度一下。


节奏把握得太好了!


这次从网页交互实现的角度,深入分析这个它的动画逻辑:


047257d226ab0000018c1baa1cd1.jpg



100秒左右的介绍,没有切入正题的导入长达25秒,目测超过20种画面处理方法。然而,其实背后最基本的变换只有以下2种:

 

1、信息的快速轮播


0cb857d2270e0000012e7eb8481c.jpg


短片最抓人的环节,就是各种黑底白字毫无预警地轮播,让人连闭眼的时间都没有。文字串上相同含义的画面,就是传说中的蒙太奇。

 

比如网站h5.fr(PC版),就把这种手法玩得出神入化:


4cb857d227b20000012e7ea971cf.jpg


鼠标移上NEWS(新闻)时,新闻摘要会快速轮播(它是个法国网站,写的什么我不懂)。交互的实现,使用iH5的时间轴控制文字出现的时间和次序就行,比如下面要让3批文字各出现0.2秒:

 

1)新建“时间轴”,把它隐藏,属性设为:

自动播放(YES)、总时长(0.6)、循环播放(YES)。

 

2)“时间轴”下,放轮换的三批文字,分别为文字添加轨迹:


d98357d22fc70000012e7eb9b27e.jpg


在“对象树”选中第1批要出现的文字,帧时间输入框填“0”,点击“Add”添加关键帧;再输入下一帧的时间“0.2”,点击“Add”。第2、3三批文字依此类推,或直接拖动时间轴的指针控制起始时间。

 

3)把文字的轨迹属性分别设为:

第1批——开始显示(YES)、结束显示(NO);

第2、3批——开始显示(NO)、结束显示(NO)。


469757d22ff90000012e7ed96da6.jpg


说白了,就是加时间轴→加字→加轨迹→加关键帧。想要这个动画开始,用个事件让时间轴显示就行。

 

这里最关键的是关键帧之间的时长,建议单个画面显示0.2-1S,画面过渡在0-2S之间,冲击力比较强。稍微控制一下内容、位置什么的,就能玩出很多花样——

 

332057d230b70000012e7e4fb191.jpg

 

2、内容的渐出与渐隐


5e6e57d232c30000018c1b54b40a.jpg


段落的文字一点点出现,一点点消失的渐出渐隐,就是利用遮罩来控制渐出、渐隐的效果。

 

为证明那些字的逐个出现、消失不需要用一个个黑块去盖住它,这里借用设计师Bara Prasilova新近的一张美图做个遮罩的演示。


056557d232e10000012e7ecedad6.jpg


“iPhone7 快闪测试”这行字逐字出现的同时,产生向左的位移。这里用到的还是时间轴,但最关键的是利用剪切功能做遮罩,步骤如下:

 

(1)新建1S的“时间轴”,下面放1个透明按钮,属性设为:

剪切(YES)。


(2)保持“透明按钮”选中,新建文本(为子对象),添加轨迹和关键帧:

这里我放了6个关键帧。


(3)依次点击选中关键帧,修改它的参数:


15f857d234d80000012e7ec5225e.jpg


比如第1帧x坐标最大、长度最小,所以文字显示最靠右、只有“i”;第6帧x坐标最小、长度最大,所以文字显示最靠左、全部字都出现。


里面的原理有二:


734657d236d70000012e7eb52d33.jpg


为什么不直接在After Effects这些特效软件中处理,现成样式那么多?

 

那是因为人家做的就是短片,如果甲方让你做个H5涉及这些动效,每改点东西还得打开AE重新渲染一次,太折腾了。


 

训练001成果检验(答案下一期公布):


用时间轴实现文字渐出效果后,怎么让它渐隐最方便?

A、让时间轴反向播放;

B、继续添加轨迹,减少透明遮罩的长度。


994e57d237fb0000012e7e7c73a1.jpg

113
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功