整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

无需代码,Hype可以把设计变成动画,让你的创意动起

无需代码,Hype可以把设计变成动画,让你的创意动起来

前,你需要掌握复杂的软件才能制作HTML5动画,现在无需代码,Hype可以把设计变成动画,像设计幻灯片一样轻松,赶快让你的创意动起来!


Hype 4 Pro for Mac(HTML5动画制作软件)

立即下载

Mac上一款非常好用的HTML5动画制作软件Hype 4 Pro,其长处是可以在网页上做出悦目的动画效果,无需 Flash 插件。macdown提供Hype mac版,有需要的朋友欢迎下载体验!

2020-07-1313.58 MB简体中文


你会从一个空白的“场景”开始,它可以是一个网页、一章电子书,或是一个横幅广告。

在 App 中添加文字、图片、多媒体素材以及插画后,你就可以将它们重新排列组合,也可以让它们平滑地变成别的形状。制作过程中的技术问题,《Hype》都会为你代劳。

而你要做的,就是尽情创作。例如,你可以为网站制作动态的介绍页面;也可以设计一个小测验,答对问题会有彩纸飘落的效果;你还可以在你用《iBooks Author》设计的电子童书中添加互动元素。当然,《Hype》能做的还远远不止这些。下方为你罗列具体功能,看完你会惊讶,竟如此强大~

1、快速动画设计:

? 简单易用的、基于关键帧的动画系统

? 记录模式可监测您的每次移动,从而根据需要自动创建关键帧

? 创作贝塞尔路径的自然运动曲线

? 轻松在矢量形状之间变换形状(即便有不同数量的路径点也能做到)

? 为组织和工作流制作场景

? 利用多个同时时间线的功能来运行动画

2、添加互动性:

? 操作句柄启动和时间线控制,场景切换,或是运行自定义的 JavaScript

? 可视化地构建操作句柄来响应轻触、点按和动画事件

3、创作绝妙的内容:

? 基于 WebKit 的“所见即所得”式场景编辑

? 智能导引、排列和缩放工具

? 轻松集成视频和音频,得到出色的多媒体文稿

? 最前卫的效果:模糊、图像滤镜、背景幕滤镜、缩放、倾斜、倒影和 3D 变换

? 添加 Google 字体或使用自己的 Web 字体

? 设置辅助功能备用文本、角色和标签页索引

? 支持 Retina 分辨率的图像

4、完美契合移动设备:

? Hype 的 HTML5 输出可在移动设备上高效运行

? 具有可调布局系统,可缩放内容以适合屏幕大小

? 轻松添加扫动、触摸和翻页操作

? 将拖动事件绑定到时间线位置,实现丰富的交互效果

? 在 iPhone 和 iPad 上,利用免费的 Hype Reflect 伙伴 iOS 应用程序预览您的项目

? Hype Reflect 的镜像模式可在您编辑的时候实时显示出编辑的效果

5、可编码进行扩展:

? 编辑任何元素的 InnerHTML

? 集成的 JavaScript 编辑器用于编写由用户操作触发的功能

? 使用 API 控制场景、时间线以及更多内容

6、导出为 HTML:

? 输出最新的 HTML5、CSS3 样式和 JavaScript

? 内容可在包括从 IE 6 到最新版的 Chrome 在内的所有浏览器上运行

? 自包含目录包括您文稿的所有资源和代码

? 通过复制和粘贴 HTML 的 3 行添加到现有页面中

7、特别适合广告:

? 最小文稿仅 24 KB(自托管、经压缩)或在使用官方 CDN 时仅为 1.5 KB

? 导出脚本插件扩展 Hype 以支持常见的广告系统

? 高级导出对要交付的产品进行微调

8、Hype 还可以导出:

? iBooks Author 小组件

? 视频

? 动画 GIF 和 PNG

HTML5动画很难制作吗?在以前也许,但是有了这款《Hype》,无需代码,就可以把设计变成动画,让你的创意动起来。

起点学院】产品经理实战训练营,北京、上海、广州、深圳、成都、杭州同时开课啦!

推荐语:@Akane_Lee :这篇是最简单的过场设定、最偷吃步骤、不需要技术,只要会写简报 PTT 或是 Keynote 就做的出来,所以连 Planner 和 PM 也保证上手无问题 >>>

动态效果、转场动画对UI的戏份越来越重…其实一直都很重只是大多用在游戏上,功能型 App 运用这种技巧最近越吃越凶,且制作真正能装在手机、拿在手上操作的拟真 Prototype 对不会写 Code 的设计师来说有难度。我找到好用的方式可以解决这个问题:Hype3+Frameless。

会选 Hype3 的原因在《Note:Prototype 制作软件》有提过,就不多说,直接从范例开始吧。

(好像得搭梯子才可以访问,木有梯子同学可参见:《Sketch神助攻!无代码做动效神器Hype3入门教程》)

Hype3

场景设定

示范: iPhone 内建的音乐 App

1.打开 Hype3 ,官网下载的试用版可以用很久,还有简中接口,先抓下来玩看看,喜欢再买。(这套定价也很便宜!)

2. 既然是 iPhone 的 Prototype,来改一下场景尺寸。我用的是 640x1136px,画质比较细。

3. 因为画面是长型的,所以我把时间轴和图层从下方挪到右边去。

汇入图档

4. 手机截图,直接扔进 Hype3 里。

(表示做自己的东西实可以直接拿 Mockup 的 jpg 或 png 图直接上!)

设定动作范围

5. 来做「动作触发的范围」,在图上先拉个矩形。

6. 右边选单设定无填色、无笔划。

7. 下方 Tab Bar 第 2 颗的位置就有一块透明的区域,也就是「动作触发的范围」。

8. 设定动作,虽然手机上不会有光标,但我还是喜欢把可触发的区域光标换成手指,在 Browser 预览时可以快速确认自己Link设对了没有。

9. 记得,所有场景、图层什么的,要重新命名成有意义的名字,当页数和组件一多时才不容易出错。

10. 像 Keynote 一样,可以一次做了好几个组件,选起来好拷贝到其他场景贴上。

(图层前后会影响操作和组件显示,如果有时候发现某个地方怎么点都没效果、或是看不到,检查下图层顺序。)

过场方式

11. 点着个 BTN、播放中的页面是由右往左推进。

12. 所以记得把过场动效改成「推动」(由右往左)。

13. 秒数我习惯设 0.3s,依个人感觉不同,请自己试看看。

14. 这个 Btn 点下去、会由下往上出现歌曲列表页。记得设定「推动」(由下往上)。

15. 点了「完成」后,页面会由上往下。

(当很多页面都有一样的回前页、Tab 的Link要处理时,可以先做完一页,剩下 Copy、Past 就好。)

汇出 HTML 档

选 HTML5、活页夹,档名命名好。

会出现一个 HTML 档和一个文件夹。把这两个档传到服务器上,就可以用手机开网址测试了。

如果想预览自己做的如何,工具栏上有个 Chrome 或 Safari 的 icon,按下去就是了。不过它不是实时的,每次修改存盘就要再点一次这 icon 重新产生预览,直接点 Browser 重新整理看到的会是修改前的样子。

原型专用浏览器 —— Frameless

这是个连「状态栏」都没有,真正全屏幕的浏览器。免费!

输入你的Prototype网址,就可以像真的 App 一样,用手机做测试了。

祝顺利!

作者: @Akane_Lee

来源:优设网

原文地址:blog.akanelee.me

5制作软件Hype的矢量形状工具支持直线、曲线、铅笔工具的手绘线以及多边形的创建。

图1:Hype的矢量形状工具创建的形状

此外,矩形、圆角矩形和椭圆形可以转换为矢量形状。

图2:矩形、圆角矩形和椭圆形

使用Hype矢量形状工具创建这些由直线或曲线连接的形状,可以轻松为这些形状设置动画,并定义边框和填充颜色等属性(如图1所示)。可以使用这款H5制作软件的动画系统轻松对构成矢量形状的点、曲线和直线进行动画处理。添加和删?除锚点,调整曲线和点的位置,并平滑过渡这些基于SVG格式的动画,而无需代码。

在这里给大家介绍一下什么是SVG格式:这是一种图像文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。

图3:SVG格式

这是基于XML,由World Wide Web Consortium(W3C)联盟进行开发的。严格来说这应该是一种开放标准的矢量图形语言,有利于你设计高分辨率的Web图形页面。用户可以直接用代码来描绘SVG图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看。

Hype提供了用于创建SVG对象的用户界面,将该格式集成到了功能强大的动画系统中。用户可以直接在Hype的场景中修改点和曲线,调整位置,调整大小和缩放形状。

图3:创建SVG对象的用户界面

接下来给大家介绍一下矢量形状基础:

矢量形状由锚点和控制点组成。锚点定义形状的顶点,控制点修改曲线。每个矢量形状都有一条路径。路径有可选的边框(在SVG格式中称为笔触)和可选的边框宽度。形状可以是开放的,也可以是封闭的。封闭的形状可构成三角形、长方形、圆形等图形,而开放的形状则代表起点终点不连接的曲线或直线。

图5:矢量形状的组成部分

那么我们该如何创建矢量形状呢?

第一步,依次单击“元素”>“矢量形状”,此时您的光标将变为钢笔工具。

图6:矢量形状

第二步,单击并拖动鼠标将开始创建一条线,再次单击将创建另外一个点。完成形状的描绘后,想要退出矢量模式,按esc、enter或在“矢量形状“检查器中单击“完成”即可。

图7:完成矢量形状的绘制

您可以选择在矢量创建过程中设置颜色和边框宽度之类的属性,也可以在元素检查器中进行相关设置。

图8:矢量形状和元素检查器

以上就是小编对于这款H5制作软件矢量形状工具的详细介绍,对此感兴趣的小伙伴们可以进行尝试。