提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
别眨眼!iPhone7发布会快闪版秒秒闪到你!
作者声明:本系列训练旨在培养设计师对网页制作的交互逻辑,H5的页面实现用的是H5页面制作工具iH5。属性具体参数代表什么,可通过以下使用手册中的“对象使用方法”(www.ih5.cn/general-user/video-teaching/manual)查看。
还没看过这个短片《别眨眼!iPhone7发布会快闪版秒秒闪到你!》的人,建议百度一下。
节奏把握得太好了。
这次从网页交互实现的角度,深扒这个视频的动画逻辑:
100秒左右的介绍,没有切入正题的导入长达25秒,目测超过20种画面处理方法。然而,其实背后最基本的变换只有以下2种:
1、信息的快速轮播
视频最抓人的环节,就是各种黑底白字毫无预警地轮播,让人连闭眼的时间都没有。文字串上相同含义的视频短片,就是传说中的蒙太奇。
比如网站h5.fr(PC版),就把这种手法玩得出神入化:
鼠标移上NEWS(新闻)时,新闻摘要会快速轮播(它是个法国网站,写的什么我不懂)。交互的实现,使用时间轴控制文字出现的时间和次序就行,比如下面要让3批文字各出现0.2秒:
(1)新建“时间轴”,把它隐藏,属性设为:
自动播放(YES)、总时长(0.6)、循环播放(YES)。
(2)“时间轴”下,放轮换的三批文字,分别为文字添加轨迹:
在“对象树”选中第1批要出现的文字,帧时间输入框填“0”,点击“Add”添加关键帧;再输入下一帧的时间“0.2”,点击“Add”。第2、3三批文字依此类推,或直接拖动时间轴的指针控制起始时间。
(3)把文字的轨迹属性分别设为:
第1批——开始显示(YES)、结束显示(NO);
第2、3批——开始显示(NO)、结束显示(NO)。
说白了,就是加时间轴→加字→加轨迹→加关键帧。想要这个动画开始,用个事件让时间轴显示就行。
这里最关键的是关键帧之间的时长,建议单个画面显示0.2-1S,画面过渡在0-2S之间,冲击力比较强。稍微控制一下内容、位置什么的,就能玩出很多花样——
2、内容的渐出与渐隐
段落的文字一点点出现,一点点消失的渐出渐隐,就是利用遮罩来控制渐出、渐隐的效果。
为证明那些字的逐个出现、消失不需要用一个个黑块去盖住它,这里借用设计师Bara Prasilova新近的一张美图做个遮罩的演示。
“iPhone7 快闪测试”这行字逐字出现的同时,产生向左的位移。这里用到的还是时间轴,但最关键的是利用剪切功能做遮罩,步骤如下:
(1)新建1S的“时间轴”,下面放1个透明按钮,属性设为:
剪切(YES)。
(2)保持“透明按钮”选中,新建文本(为子对象),添加轨迹和关键帧:
这里我放了6个关键帧。
(3)依次点击选中关键帧,修改它的参数:
比如第1帧x坐标最大、长度最小,所以文字显示最靠右、只有“i”;第6帧x坐标最小、长度最大,所以文字显示最靠左、全部字都出现。
里面的原理有二:
干嘛不直接在After Effects这些特效软件中处理,现成样式那么多?
那是因为人家做的就是视频,如果甲方让你做个H5涉及这些动效,每改点东西还得打开AE重新渲染一次,折腾死你。
训练001成果检验(答案下一期公布):
用时间轴实现文字渐出效果后,怎么让它渐隐最方便?
A、让时间轴反向播放;
B、继续添加轨迹,减少透明遮罩的长度。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册