恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
H5速成2丨3分钟学会iPhone7快闪!
0.0°
2017-02-15 原创文章 经验/观点 举报 3648 108 163 12

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

Image title


作者声明:本系列训练旨在培养设计师对网页制作的交互逻辑,H5的页面实现用的是H5页面制作工具iH5。属性具体参数代表什么,可通过以下使用手册中的“对象使用方法”(www.ih5.cn/general-user/video-teaching/manual)查看。

 

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


节奏把握得太好了。


这次从网页交互实现的角度,深扒这个视频的动画逻辑:

Image title

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

 

1、信息的快速轮播


Image title

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


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

Image title

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

 

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

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

Image title


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

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

 

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

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

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

Image title

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

 

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

Image title

2、内容的渐出与渐隐

Image title


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

 

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

Image title

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

 

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

剪切(YES)。


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

这里我放了6个关键帧。

Image title

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

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


里面的原理有二:

Image title

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

 

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


 

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


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

A、让时间轴反向播放;

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

更新:2017-02-15

收藏

108人已收藏

Seedheart

好玩是一切的宗旨。

  • 19

    作品

  • 615

    粉丝

  • 4

    关注

  • 他从瑞典回来后,用了10年让设计师用上H5
  • 腾讯这个H5的套路太深!大部分人没看懂
  • 100个免费可商用字体,你总有一天用到它
  • H5页面制作软件,中国和美国差多少?
相关标签
设计教程UDC

    猜你喜欢

      2017-02-15 原创文章 经验/观点 举报 3648 108 163 12

      H5速成2丨3分钟学会iPhone7快闪!

      0.0°

      你确定要举报H5速成2丨3分钟学会iPhone7快闪!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年09月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      163
      108
      12

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录