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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
H5抢先学1:受大企业青睐的H5简历长啥样?
0.0°
2017-03-29 原创文章 经验/观点 举报 2237 15 10 0

连简历都不是H5的?你还好意思说你是互联网人?

听说现在好多小伙伴都在找工作,H5君不少朋友都已经把简历更新成H5版本了,也是厉害!下面这个H5简历,是我的朋友发给我的,据说,同时有3家上市公司的设计部抢着要↓↓↓


Image title


把简历做成超级玛丽的形式,不得不佩服,简直超级有想法!我试着用Mugeda做了下,其实很容易,不用加代码,在平面完成的情况下,2个小时搞定。


前期准备:

H5工具:Mugeda

浏览器:下载Chrome浏览器,这是对H5支持最好的,方便边做边调试


下面介绍我的制作步骤:



一、原理是什么?一定要理解这个!

(1)在舞台上建3个图层,分别是拖动层、人物和元件。

Image title


(2)在元件里,把拖动屏幕后出现的动画做到里面。

Image title


(3)用拖动图层关联元件,也是说在触发拖动图层的时候,开启元件动画的播放,用拖动图层上的方框(透明度调为0)的左坐标和元件的左坐标关联。

Image title


二、具体的操作步骤?

(1)在元件里制作背景长图的动画

如果以前用过Flash的,对这个界面有木有超级熟悉,可以看到基本都是关键帧动画。而且Mugeda和Flash的界面很像,研究一会基本就没什么难。首先把背景长图动画做了。

Image title


小人的动画也在元件里做,这种像素风的人物做动作的时候,可以不那么柔和,加些跳帧会显得更活泼些,这就是动画师动画感觉层面上的事啦,多练习找感觉吧。

Image title


(2)回到舞台,设置拖动图层可拖动

回到舞台,新建一个图层,即【拖动层】,用它控制刚才做好的元件动画的播放。这个图层上绘制一个矩形,用拖动这个矩形的动作,来控制元件动画。



至于这个矩形有多长,多长都可以!如果想让动画播放的慢一点,就做长一点,如果想让动画播放的快一点,就做短一些。

Image title


给矩形命名,调整透明度为0,在【拖动/旋转】选择水平拖动。

Image title


Image title


(3)最重要的步骤,关联元件!

新建一个图层,命名为元件,把元件动画拖进来。选择元件,在属性面板里【选择关联】为启动,【关联对象】为刚才命名的矩形,开始值和结束值是矩形的坐标。

Image title


怎么样?弄清楚了原理是不是so easy!最近在找工作的设计狮小伙伴建议用H5做个简历,真心提高面试率!如果你有什么好的H5简历作品,希望在评论里和我分享哈~


我也是H5刚入门,所以讲得也不是太好。而且这个课出视频教程了,看不懂的去学视频吧,更直观一些,看视频戳这里




更新:2017-03-29

收藏

15人已收藏

H5君666

喜欢H5,平时工作就是H5。希望能跟大家分享H5的一切。

  • 10

    作品

  • 41

    粉丝

  • 0

    关注

  • 如果想系统学H5,没有比这更好的选择了
  • 【微信红包】木疙瘩训练营149元现金红包
  • “第3期木疙瘩H5训练营”,学完21天还能全额返学费,你来不
  • 问:如何在10分钟搞定H5连线题,而且是不用代码的那种?
相关标签
设计经验教程H5

    猜你喜欢

      2017-03-29 原创文章 经验/观点 举报 2237 15 10 0

      H5抢先学1:受大企业青睐的H5简历长啥样?

      0.0°

      你确定要举报H5抢先学1:受大企业青睐的H5简历长啥样?

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年02月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      15
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录