王勇:Mugeda:让H5创作突破技术实现的困扰

7月19日,由HTML5梦工场主办的第四届HTML5峰会暨攻城师嘉年华(iWeb峰会)首站在上海开幕,会上疙瘩创始人兼CTO王勇发表了《让H5创作突破技术实现的困扰》主题演讲。

以下是演讲实录:

01

02

非常感谢大家坚持了一天,进来的早的同学可能没有注意到,这个工具场比旁边那个游戏场热闹多了,说明大家对本质性的东西的探求要比表面的追求热情更高。这充分的体现了我们工程师的探索精神

04

我今天的题目是让H5创作突破技术实现困扰,我是木疙瘩联合创始人兼CTO,我早年在哥伦比亚念书,并且先后在在微软、惠普、摩托罗拉、华为等公司工作。到了iPhone刚推出的时候,我们认为以iPhone为代表的庞大的智能手机应该有符合它的生态的动画内容制作平台,这是我们创立木疙瘩的初衷。

我简单介绍一下木疙瘩,我是四川人,木疙瘩在家乡是木偶的意思,木偶是最古老的动画形式,我们做的产品就是H5交互动画,所以用这个动画表达这个意思。

05

昨天下午主办方有一个交流晚宴,组织今天的嘉宾进行了一些交流,认识了不少朋友。有些是H5里面领域资深的专家,有些是刚进入这个领域不久的新人,不管他对H5理解有多少,他们都认可一点,就是H5很火爆。对技术感兴趣的人都知 道,H5 的标准10年前就开始制定,在它的发展运行当中,既有基友分家这样的狗血剧,也有苹果, Adobe和Facebook的口水战。虽然H5本身仍存在很多争议,但是我想大家之所以今天到这里共同探讨这个问题,应该至少是对这个话题很关注。昨天我认识的一位朋友,说对H5持谨慎乐观的态度。我想这种认识还是有一定的代表性的。那么, H5还是用原生?我个人在这里不想再从技术层面展开讨论,前面的嘉宾像朴灵已经进行了深入浅出的探讨。我想站在另一个角度分享一下我的看法。要讨论H5和原生关系的时候,大家可以问一个问题,你们看电视的时候还会看电影吗?其实在电视刚刚问世的时候,在美国的媒体和电影从业人员就有这样的想法,每个人在家里都有电视看了,谁还会去电影院看电影呢?这在今天已经不是一个问题,这两个领域都是巨无霸的媒体产业。这个生态跟我们现在讨论的H5和原生有一点像。比如说你吃完饭在家里坐下来,遥控器一按就可以看电视,再一按就关了,这个的特点是轻量级,实时,快捷。那为什么你要去电影院看电影呢?而且要买电影票,忍受交通到电影院,在我住的城市,在电影院买爆米花和可乐的钱,比电影票还贵,为什么还要去呢?因为你可能是出于不同的目的,你花钱是为了享受大工业时代的产品,享受电视无法带给你的视听享受,电影虽然很重,但是经典,大手笔,注重体验。所以,H5和原生,就像电视和电影,由于商家和用户存在不同的使用场景和消费需求,因此它们将会很和谐的共生共处,服务不同的市场。

06 07

H5已经发展将近10年时间,在不同时期会有不同的问题,早先的问题是入口,微信的兴起很好的解决了这个问题。然后是性能问题,很多公司通过内嵌原生渲染引擎正在努力解决这个问题,我们公司比较关注的点是H5作为内容产出和质量层面的一些问题。先来说说企业主,他们是为你们平时看到的在微信中传播的内容买单的人,有人说现在不是很多内容制作都是免费的吗?他们是这么算这笔账的,就是即便内容制作是免费的,如果安排一个员工花3到5天去做,这也是笔不小的资源开销,这是一个企业主亲口告诉我的。因此,当市面上H5内容越来越多的时候,他希望自己投入资源制作的内容,能够反映他们企业的特点和个性,而不是千篇一律模版化的东西。站在另一个角度,就是用户的角度来讲,他也面临同样的问题,那就是审美疲劳的问题,他希望有更新的东西激发他的兴趣,激发他分享的欲望。站在内容的源头,就是设计师和工程师来讲,他们的创意天马行空,像梦一样自由,但是落到纸面的时候,往往会受到技术实现的限制。因为越是简单的工具,越是有这样那样的表现形式的限制,使得形成个性化内容变得很困难。作为程序员来讲,总是从头去编写代码,费工费事,要花很大的力气。

08 09

正是基于这样的背景,木疙瘩希望建立这样一个平台,一方面帮助这些设计师快速的、高质量的在不写代码的情况下也能产生高质量的内容,同时也能够在需要的时候能够引入程序员为他们做更加精细化的操作,实现无极限的创意。这也是我们想要帮助大家解决的问题。

10

11

12

简单讲,木疙瘩是基于一个专业级HTML5交互动画制作平台,帮助完成H5交互动画内容生产、管理、协作、发布、统计的一站式方案。大家简单看一下界面,这个集成的IDE开发环境是我们的技术核心,这个产品的操控对设计师来讲效率是非常高的,他并不是基于模版化的方式,而是让设计师从一开始就能够不受约束的实现自己的创意能力。Flash设计师无需进行任何培训,马上就可以开始创作专业级H5交互内容。我们还支持通过大量的预置交互组件来不编写代码定义互动行为。同时也允许程序员使用API方式拓展平台相关的功能。这个后面还会提到。

13

这个平台是基于云计算架构,他不需要任何下载安装,在浏览器里面就可以完成所有功能。并且,为了支持企业的内容生成和管理,我们还提供了一整套企业账号管理和云端协作工作的工具,满足生产、管理、审核、发布一条龙。跟市面上其它友商相比, 我们最大的特点是对包含有这个领域最强大的动画编辑和处理能力。这里面列了我们用到的工具,包括时间线、元件、洋葱皮、图层、关键帧动画、过程动画、随机动画、遮罩动画、关联动画等等。
我们还有非常强大的造型能力,可以用十分完善的基于贝塞尔曲线的造型工具,实现矢量绘制、曲线细分、SVG渲染等复杂的造型功能。近期我们还会发布广受设计师期待的云字体功能,可以完美的在云端渲染字体,让自定义字体不再只能通过图形方式渲染,极大的节省了流量并提升了渲染质量。比如这个萌字体的例子,通过云字体渲染后,网络传输不足1K字节。

14

15

16

最后我介绍一下这个平台里面提供的非常完善的API。这个API支持从数据层、渲染层、DOM层的每一层粒度的API控制,并且通过完善的机制实现对交互动画非常细致的通讯和操控,这是木疙瘩支持无极限的创意,彻底摆脱技术困扰的重要一环。需要说明的是,木疙瘩的API设计理念是,动画内容,可视化设计,简单逻辑由设计师完成,复杂逻辑和精细操控由API支持,这个是最大化设计师和工程师产出的最优组合,也和经典的Flash的ActionScript的设计思路一脉相承。我举一个例子,这个游戏是去年中秋节的时候,香港一家高端的红酒厂商和乐视旗下乐生活联合推出的一个活动,叫金秋戳螃蟹,根据大家戳到螃蟹的总数有一些营销奖品。这个时候活动效果非常好,活动一共是三天,每天发几百个螃蟹券,第一天是10分内发完,第二天是5分钟发完,第三天是2分钟发完。这个是这个游戏的制作界面,刚才提到,可视化的部分都是由设计师完成。游戏逻辑通过API进行控制。游戏开始的时候,你可以通过螃蟹的动画元件按照需要产生小的螃蟹,这些螃蟹可以在上面定义不同的动画段,来根据剧情设定处理不同的动画播放。这些状态大概通过三四行代码就可以实现很复杂的动画控制和逻辑流程。

18

19

木疙瘩平台现在已经汇聚了上万设计师,内容送达2亿移动设备,并出现了数款数千万流量的爆品。我们近期还会陆续推出一些重量级的产品特性,敬请大家期待。

20

我就简单介绍到这里,随便打个广告,公司快速发展需要各种各样的人才加盟,职位涵盖前端工程师,平面设计师,产品经理,市场人员等,有兴趣的朋友可以跟我们联系,或者发信到hr@mugeda.com

好的谢谢大家!

PPT在线观看:http://dwz.cn/10t7zP

21