• 首页Portal
  • 官网
  • 最新
  • 易企秀学院
  • 分类
关闭
回复
跨年活动邀请函 看一眼就想参加| 手把手教你做H5 分享 分享 收藏收藏 12 点赞点赞 17
  • 易企秀   2016-12-05 11:22:00
  •   [复制链接]
  • 23484    123

  • 开始之前
    先来欣赏一下今天要教大家制作的样例
    跨年狂欢青春活泼邀请函
    这是跨年聚会的邀请函。

    下面以本场景的一个商品展示页为例,讲解其中几个关键点的 “诀窍”:
    1.第二页动画展现
    开篇第一个画面是白云四方散开露出卡通2016字样;
    5-2.png

    第二个画面是屏幕右下角闪出“贱贱”的7;
    5-3.png

    第三个画面是屏幕右下角的7向左侧闪出屏幕;
    5-4.png

    第四个画面是从左向右进入屏幕的7挤走6,将数字变成2017。
    5-5.png
    2.动画制作解析
    四散的白云就是使用了向上、向下、向左、向右移出的动画,所以在此不详细介绍了。
    在白云散开之后设计的动画是这样的——“7”从右下侧进入画面中>向左下侧移出>再从左上侧移入画面>挤走“6”>画面定格为“2017”。
    下面开始实施动画设置。
    (1).白云散开之后画面中只存在“2016”这个元素,那么第一动画就是“7”的移入——点击“7”这个组件,计算好白云散开的时间,设置“7”移入的动画时间和移出时间;
    5-6.png

    (2)将“7”这组件复制一遍得到第二“7”,并设置动画。估算第一个“7”的移入、移出动画加上白云散开的时间,
    所以设置第二个“7”的移入延迟为5秒,设置完成;
    5-7.png

    5-8.png

    (3)因为要达到的效果是“7”挤走“6”,所以“6”的动画设计非常重要。儿动画设置的关键其实
    也就是对动画时间的估算。最终经过反复试验和估算得到最终“6”的动画时间设置是这样的。
    5-9.png
    最后将所有组件摆到适当的位置,这酷炫的一页就完成了!

    小结:
    关键点一:对各种动画时间的估算;
    关键点二:反复试验。
    最关键的就是这步。点击发布
    5-10.png
    然后看着酷炫的特效得意吧!

    回帖福利:
    想要什么样的样例?留言给小编
    秀秀按你需求上样例
    回帖+1金币  +1金币   +1金币

    5-7.png
    参与人数 1经验值 +1 金币 +1 收起 理由
    蓝夕890413 + 1 + 1 很给力!

    查看全部评分

  • 最新评论
  • 添加评论
  • eqs107091254451
    什么啊,没学会

    点评

    需要多做哦~  详情 回复 发表于 2017-1-16 16:38
    发表于 2016-12-5 12:21:01 点赞 点赞 2 回复 回复
  • 没羽箭
    太厉害了,正在研究学习中

    点评

    欢迎学习  详情 回复 发表于 2017-1-16 16:39
    发表于 2016-12-6 10:32:55 点赞 点赞 1 回复 回复
  • 叶舞风敲
    受教了,准备试试
    发表于 2018-3-21 22:38:50 点赞 点赞 回复 回复
  • 564022533
    https://h5.scene.eqh5.cn/s/d6b3VigP 企业宣传 稳重大气 可套用
    发表于 2017-12-26 14:19:06 点赞 点赞 回复 回复
  • ex1121911182313
    这个挺实用的,就是对延迟时间的运用就可以做到了,自己马上做一个试试
    发表于 2017-12-25 14:43:52 点赞 点赞 回复 回复
  • ex1121420561718
    果真牛叉。感受到高手的味道~~
    发表于 2017-11-13 21:41:57 点赞 点赞 回复 回复
  • ex1051713454614
    有空研究一下
    发表于 2017-11-13 17:51:50 点赞 点赞 回复 回复
  • ex1101511550613
    很厉害的感觉
    发表于 2017-10-26 14:29:11 点赞 点赞 回复 回复
  • eqs108171633561
    学习了,试试
    发表于 2017-9-19 20:45:56 点赞 点赞 回复 回复
  • ex1120620011915
    棒棒的 666
    发表于 2017-8-1 22:16:14 点赞 点赞 回复 回复
  • jz326537216
    哈哈,贱贱的7
    发表于 2017-7-4 15:32:18 点赞 点赞 回复 回复
    快速回复 返回顶部 !pub_help!