整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
源：众成翻译 译者：betsey
游戏的灵感
在使用过一段时间的SVG动画之后，我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台，例如Greensock，和原生的CSS动画简直是绝配。于是我便打算深入地研究一下，看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样，好的游戏拥有许多细致的动画细节。有一天夜里，我的脑海中突然闪现了一个游戏的灵感，我马上起来，画了一些草图，之后给我的哥哥看--他是一个专业的网页设计师。我们立即开始着手设计，讨论了所有的细节动画后（试着画出来并且配以音效），我便开始进行游戏开发。
如何玩: 来回弹跳的球是可以改变颜色的。你必须随时观察球当前的颜色，并且在球和柱子相接触的一瞬间，确保两者的颜色是一样的。点击柱子可以改变它的颜色，单击变红，双击变黄，三击则变为紫色。
这里是游戏的完整版: http://codepen.io/gregh/full/yVLOyO
创作的过程
在开发这款游戏的过程中，我不断地遇到问题并重构代码。其中的一个最主要的问题就是，如何能让游戏在所有的设备和所有尺寸的显示器上都看起来不错。我使用我的Macbook Pro 开发，游戏的画面很棒。但是当到了 27" iMac screen 上时，整个画面就看起来特别小，当然在iPhone又会显得特别大。我真心地希望可以有一把适配所有设备的“万能钥匙”。经过了许多次的尝试之后，我清楚地意识到，传统的使用媒体查询的技术来做响应式设计是行不通的。
这篇文章并不是一个教程，因此我将不会逐行的解释我的代码。但是，我会展示给你一些十分酷的东西，你可以通过在CodePen上或者是在浏览器的调试工具里面修改参数进行测试。同样，我也会在相应的地方写出一些参考资料。在CodePen上，我尽可能多的写出代码注释，赶快去看看代码吧！
十分强大的GSAP让我理所当然地选择了它，而我选择在CodePen上面写码的原因是它内置了一个Babel编译器，这样我就可以在上面书写ES6的语法，你不知道Class和箭头函数有多好用！ 关于ES6的特性介绍，你可以点击这里: https://github.com/DrkSephy/es6-cheatsheet
使用GreenSock制作动画
我下面假设你熟悉GSAP用法,但如果你不熟悉的话，你可以看下这个“讨厌番茄”的人的关于GSAP的教程。https://ihatetomatoes.net/get-greensock-101/
背景动画
几乎所有你能在背景上看到的东西都是用SVG制作的。每个波浪是一个独立的<div>,每一层的山峰也是一个<div>,甚至云也是<div>。当你在制作一个复杂的动画时，有一点是需要注意的。你完全可以使用一整个SVG当做背景，然后为这个SVG的子元素和路径来制作动画。Greensock允许我们这样做，你需要做的仅仅是为这些SVG的元素（比如说path，group等等）分配一些ID，然后用过ID选择到他们。但这样做的问题在于，在移动设备上，这些动画跑不动。所以你最好是把这些背景元素放在独立的<div>里面，然后为这些<div>添加动画，我实际上就是使用这些SVG的作为背景。
通过类似于上面的代码，我们就得到了一些简单的补间动画。这些动画可以将背景水平地移动54个像素（也就是背景的宽度），在这里我们想要背景匀速地移动，所以我们不需要缓动动画。当我们为每个背景设置不同的移动速度的时候，他们就有表现出了视觉差的效果，看上去很酷吧！
看到画面上漂浮着一些白色的小圆点了没？我创造了这些圆点并为他们设置了随机的位置和尺寸，接着我让他们做圆周运动。
这样他们就缓慢地进行圆周运动，但看上去却像随机运动一样。
柱子动画
每一个柱子里都有一些会动的小元素，这些小元素仅仅是由HTML和CSS制作出来的。使用SASS可以节省很多时间和代码量（通常情况下是这样的）。我通过创建形状的mixins来为这些柱子里面的小东西添加效果。如果我们看下bublble这个效果的代码，我们就会发现每个圆圈都使用了绝对定位并使用到了这个mixin。在CSS中创造三角形需要很多的代码，所以mixin就派上了大用场。
让我们看看红色的柱子，柱子里面包含着很多的气泡：
所以现在，如果想要在柱子里面创造一些气泡的话，我只需要调用这些mixin，设置气泡的大小，然后让把他们放在柱子的特定的位置上就好了：
当你需要通过边框来制作一些小的三角形的时候，你需要用大概20行的css代码来生成，所以使用mixin实在是太有必要了。
气泡的动画
我使用交错动画来做这个效果。这个动画可以操控柱子里面所有的气泡元素，并且可以让每个气泡有一个小小的延时，让他们不会同时开始运动。点击这个链接，你可以了解更多的关于交错动画的知识:http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/
三角形的动画
在黄色的柱子里面，我使用到了旋转的效果。但是你可能注意到，有些旋转是围绕着X轴的，有些是围绕着Y轴进行运动的。我们在这里使用到了 cycle属性。
方块的动画
在制作方块的动画的时候，我们也使用到了相同的技术。因此，有一半的方块是从左向右移动的，而另外一般则做反方向的运动。
分数的动画
让我们点击重新开始，再看下这个动画吧.
我想要分数的动画有一种“Q弹”的感觉，于是我就写了几行代码来形成这个效果。
为了做出这种“触电”（或者说是“Q弹”）的效果，我们需要制作正确的缓动动画。如果你想要看看你可以使用什么样的缓动方程，看下 Greensock 缓动观察器:http://greensock.com/ease-visualizer 选择 Elastic 并调整配置参数，你就可以实时地看运动效果。
弹性盒子
这款游戏的第一个创新性就是使用了“弹性盒子”，如果要是不了解弹性盒子的话，你可以阅读下这篇优秀的文章： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 或者看下 Laracasts上的相关系列。一旦你开始使用了弹性盒子，你就再也离不开它。下面我们看下我的的主菜单界面和游戏界面吧。
开始游戏的容器CSS样式如下：
“flex-direction: column”表示在容器内部弹性元素的排列方向。 设置为Column，则元素从上到下依次排列。而默认的（row）则将元素从左到右排列。弹性盒子可以这只空白区域，我们可以设定我们是在元素的前面、后面或者周围放置这些空白区域。动手试下，感受下弹性盒子是多么好玩吧！因为我们设置成了“space-between”，所以 Top 被放在了顶部， How to Play被放在了底部，而Logo Holder则放在了中间，空白区域被填充在了这些元素之间。 Align-items: center, 定于交叉轴（这个游戏中代表水平轴）上元素的对齐方式，center表示居中对齐。其中 How to Play也是一个弹性盒子，它的代码如下:
它也是一个flex元素，我们如果去设定他的flex-direction, 它将使用默认值（row），将其中的三个弹性元素水平的排列。第一个和第三个元素的“flex”参数为1，因此他们将占据所有的空白空间，flex是一个相当高端的特性。同样的，你也可以通过在How to Play上设置 justify-content: space-around来达到同样的目的.我使用flex: 1 的原因是，我想让中间的一列排在屏幕的最中央。
下面我们看下游戏界面。这个界面也是一个弹性布局。界面有一个柱子容器和一个球的容器。我不想让球是绝对定位的，因为我通过css让球刚好坐在柱子上，这样即使我改变柱子的高度，我也不需要改动其他代码就可以让球恰好落到柱子上。因此我将容器的flex-direction设置为 column,正如我所愿，球容器刚好紧挨着柱子的顶部。justify-content: space-between让球的容器永远靠着屏幕的顶部，而柱子容器永远靠着屏幕的底部。 现在我们给球的容器如下的样式:
球的容器也是弹性布局，我们将flex方向设为column（这样Y轴成为了主轴，元素从上到下排列）。之后我们通过 justify-content: flex-end将球推到了容器的底部，因此，我们便得到了两个紧密排列的容器，并且第一个容器的内部元素被推到了该容器的最下面，这样我们便做到了让球坐在了柱子上的效果。
试想下，如果我们不使用弹性布局会怎么做？我们也许会使用到floats, width: 33.33333% ，position: absolute 和 bottom: 0，我的天啊！ Flexbox让整个界面变得如此整洁有条理，写码简直爽翻了.
让游戏界面可缩放
做这个游戏，最重要的事情是让画面变得可缩放。看下这款游戏在不同尺寸的屏幕上达到了完美的效果！如同我说的，我仅仅是使用了 CSS transform， 这样做具有它独特的挑战性。假如游戏的默认大小是 1200x800px.吗，如果你的屏幕大小和这个不一样的话，你需要通过调节系数让游戏的容器变得大一些或者小一些，也就是做个计算"screenHeight/800\".当然，如果设备的高度大于宽度的时候（当我们的平板或者手机处于垂直模式的时候）我们也需要相应地缩放我们的屏幕，下面是计算缩放比例的代码 :
显然仅仅是这样做不能让视觉体验变得完美，所以我们需要在缩小我们的游戏界面的同时让它垂直水平居中。
因此，我们需要让整个游戏的容器以相同的尺寸放大，这样当缩放界面的时候，容器可以100%的占据屏幕的尺寸。如果我们将界面缩小到原始尺寸的一半的时候，我们需要让它的容器放大到原来的两倍大小，这样容器便可以充满整个屏幕。相反如果屏幕很大的时候，我们需要将界面变为原来的1.2倍，那么容器将相应的从原始尺寸缩小到 screenSize/1.2
后记
我希望你能喜欢这个游戏和我写的这篇文章，我也希望通过这篇文章，你可以收获一些新的东西并作出十分精彩的作品
我将持续不断地完善我的游戏，并相应地更新文章，增加新的玩法或者尝试些新的技术哦！
本文由众成翻译（zcfy.cc）的译者翻译完成，抢先阅读更多优质英文技术文章，欢迎访问众成翻译。
机现在是互联网的最大入口。根据《中国互联网报告》[1]，手机网民已经超过8亿，人均每天上网三个多小时。
毫不奇怪，手机应用软件（mobile application，简称 mobile App）的开发工程师供不应求，一直是 IT 招聘的热门。
如果你开始学习手机 App 开发，就一定会听到 H5 这个词。它是目前的主流开发技术之一，容易上手，开发周期短、成本低、兼容传统 Web 开发。但是，很少有文章详细介绍，H5 到底是什么技术，有什么原理，跟其他技术的差异在哪里。
本文就是 H5 的入门教程，今天是第一篇，介绍基本概念。内容尽量通俗，不过本来也没有太复杂的东西。我希望这篇文章可以帮助新手入门，也可以供熟练开发者回顾和整理知识点。
感谢国内最大的在线教育平台之一“腾讯课堂”[2]赞助这个系列教程。他们现在启动了“腾讯课堂101计划”[3]，推广优质课程资源。希望提高前端技术水平的朋友，可以留意一下本文结尾的课程“一元钱”课程信息。
表面上看，手机 App 都是同样的东西，就是手机上的应用程序，点击图标就能运行，但是它们的底层技术不一样。按照开发技术，App 可以分成三大类。
•原生应用（native application，简称 native App）•Web 应用（web application，简称 Web App）•混合应用（hybrid application，简称 hybrid App）
这三类 App 的技术模型都不一样，各有优缺点。企业一般会选择其中一种作为主要技术栈，构建自己的手机 App。
H5 这个词，可以理解成就是混合 App 模型，只不过它特指混合 App 的前端部分。因为混合 App 的前端就是 HTML5 网页，所以简称 H5。这个词是国内独有的，基本上都是前端程序员在用，国外不用这个词，就直接叫混合 App。
真正理解 H5 开发，需要先搞清楚什么是原生 App、什么是 Web App，因为混合 App 是在它们的基础上诞生的。
原生 App 是专门为特定手机平台开发的应用程序，无法在其他平台运行。一个手机软件如果要同时支持苹果手机和安卓手机，就需要为它们各写一个原生 App。
历史上，原生 App 最早出现，跟智能手机系统一起诞生。2007年6月 iPhone 诞生，2008年9月安卓诞生，就同时发布了自家平台的原生 App 开发方法。
原生 App 使用与手机操作系统相同的语言。iOS 的原生 App 使用 Objective-C 语言或 Swift 语言，安卓使用 Java 语言或 Kotlin 语言。由于跟底层系统的语言和技术模型一致，所以原生 App 的性能和用户体验都很好。
原生 App 的优点主要是两个：（1）较好的性能和体验；（2）可以使用系统的所有硬件和软件 API，比如 GPS、摄像头、麦克风、加速计、通知推送等等，能充分发挥系统的潜力。
原生 App 的缺点主要是成本，每个手机平台都要建立一个独立的开发团队，大公司一般都有 iOS 和安卓两个开发团队。如果出现第三个平台（以前的 Windows Phone，也许将来的华为鸿蒙 OS），就要组建第三个团队，成本就更高。
第二个缺点是，原生 App 使用底层操作系统的语言，都是很重的编译型语言，开发和调试成本相对较高，时间周期长。
第三个缺点是，原生 App 必须下载安装才能使用，只要升级版本，就必须重新下载安装。用户往往不愿意更新版本，厂商被迫不得不长期支持很久以前的旧版本。
Web App 是使用网页做的应用程序，必须在浏览器中使用。比如，你在浏览器中收发邮件，就是在使用 Web App。
Web App 主要使用网页技术，即 HTML、JavaScript 和 CSS。2008年，w3c 组织发布了 HTML 第5版，简称 HTML 5，该版本大大增强了网页的功能，使得网页可以当作应用程序使用，而不仅仅是展示文字和图片，这就是 Web App 的由来。
Web App 的优点是：（1）不需要下载安装，打开浏览器就能使用，而且总是使用最新版本；（2）对于开发者来说，Web App 写起来比较快，调试容易，不需要应用商店的批准就能发布。
Web App 的主要缺点有两个。首先，浏览器提供的 API（即 Web API）很有限（目前只有相机、GPS、电池等少数几个），大部分系统硬件都不能通过网页访问，也无法直接读取硬盘文件，所以 Web App 无法充分利用平台的硬件。
第二个缺点是，网页通过浏览器渲染，性能不如原生 App，不适合做性能要求较高的页面。
Web App 需要打开浏览器才能使用，这意味着，用户必须记住如何导航到它，要么直接输入网址，要么翻找书签。这使得进入 Web App，远不如原生 App 方便。这点很致命，事实表明，用户偏好原生 App。
谷歌曾经调查了原生 App 和 Web App 各一千个，发现 Web App 可以覆盖更多的用户（1100万 vs 400万），但是原生 App 的用户使用时间（188分钟）远超 Web App（9分钟）。
另一项调查发现，用户87％的时间用在原生 App，13％的时间用在 Web App。由于这个原因，企业很少开发 Web App，都把原生 App 当作首选。
但是，Web App 也不是毫无竞争力。根据调查，普通用户每月平均使用27个原生 App，但访问了100多个手机网站。这意味着，用户的 App 使用时间都被头部 App 占据了，小公司的 App 使用频率非常低，获客成本极高，最终变成僵尸 App。因此，小公司开发 Web App 更划算，不仅成本低，而且可以服务更多的用户，以及更好地宣传自己（可以被搜索引擎收入）。
为了推广 Web App，谷歌公司的 Chrome 浏览器团队做了很多努力。他们认为，Web App 足以满足大多数 App 的需求，但是三大缺陷阻碍它的推广。
1.不能从手机的首屏直接进入。2.缺乏手机状态栏和锁屏时的通知推送能力。3.不支持脱机访问（即断网也能使用）。
为了解决这些问题，Chrome 团队开发了新技术“渐进式 Web App”（Progressive Web App，缩写 PWA）。它可以把网站缓存在手机里面，供离线时使用，还能在手机首屏生成图标，直接点击进入，并且有通知推送能力，也不带有浏览器的地址栏和状态栏，跟原生 App 的使用体验非常接近。
但是，PWA 需要浏览器访问一次网站，才能在首屏生成图标，并且目前 iOS 系统的支持还不够理想，所以还只是一项探索性质的技术，迄今为止缺乏足够的成功案例。
混合 App （hybrid App）顾名思义就是原生 App 与 Web App 的结合。它的壳是原生 App，但是里面放的是网页。可以理解成，混合 App 里面隐藏了一个浏览器，用户看到的实际上是这个隐藏浏览器渲染出来的网页。
混合 App 的原生外壳称为“容器”，内部隐藏的浏览器，通常使用系统提供的网页渲染控件（即 WebView 控件），也可以自己内置一个浏览器内核。结构上，混合 App 从上到下分成三层：HTML5 网页层、网页引擎层（本质上是一个隔离的浏览器实例）、容器层。
混合 App 里面的网页不同于普通网页，可以调用底层系统所有的 API。奥秘就在于外层容器提供了 API Bridge，充当底层 API 的中介，允许内部的网页调用底层。
所谓 API Bridge 就是容器在底层接口和网页之间，建立一座桥梁，让双方通信。容器一旦接到网页的请求，就根据请求去调用底层系统的 API，然后再返回结果给网页。API Bridge 往往以 JavaScript 语言提供，方便网页调用，这时又称为 JSbridge。
不同容器的 API Bridge 是不一样的。为某个容器写的网页，不能放在另一个容器使用，也无法在浏览器使用，除非网页脚本做了兼容处理。
容器提供的 API Bridge 必须跟着平台更新。比如，iOS 发了新版本，有了新的硬件 API，容器也必须跟着推出新版的 API Bridge。如果容器没有跟上，开发者为了使用新的硬件，就只能想办法自己来写缺失的 API Bridge。
混合 App 同时具有原生 App 和 Web App的优点，又可以避免它们的一些缺点。具体来说，可以总结为三点。
（1）跨平台
Web 技术是跨平台的，开发者只写一次页面，就能支持多个平台。也就是说，混合 App 只需要一个团队就够了，开发成本较低。
（2）灵活性
混合 App 的灵活性大，很容易集成多种功能。一方面，混合 App 很容易加载外部的 H5 页面，实现 App 的插件结构；另一方面，Web 页面可以方便地调用外部的 Web 服务。
（3）开发方便
Web 页面的调试和构建，远比原生控件简单省时。页面的更新也容易，只要在服务器上发布新版本，触发容器内更新就可以了。另外，Web 开发人员也比较容易招聘，传统的前端程序员可以承担开发任务。
混合 App 的主要缺点是，由于存在网页引擎的中间层，所以性能比较欠缺，不仅不如原生 App，而且由于 WebView 不是全功能浏览器，可能比 Web App 都要慢一些。
另一个缺点是，由于页面跨平台，就无法使用只有特定平台提供的功能，导致体验不如纯的原生 App。举例来说，早期的时候，安卓有物理的后退按钮，iPhone 没有，页面设计不得不考虑这一点。
上图是 iOS 页面。
上面是安卓页面，左上角的后退按钮，跟系统的后退按钮重复了。
最后，再来谈谈微信小程序。
所谓小程序，可以看作是针对特定容器的 H5 开发。微信本身是一个容器，开放自己的接口（JSbridge），外部开发者使用规定的语法，编写页面，容器可以动态加载这些页面。
小程序对于微信官方的好处是，扩展了功能和应用场景，吸引外部开发者加入，繁荣了生态。对于外部开发者的好处是，有了流量入口，可以直接调用微信的各种功能（比如支付）。
今天对于 H5 相关概念的介绍，就到这里为止，下一篇文章将介绍 H5 相关开发工具和框架。
（正文完）
当今时代，IT 教育蓬勃发展，各种课程层出不穷，知识唾手可得。你可能经常领取到海量的前端开发资料包，往往收藏起来就再也没看过。
Vue.js 就是这种情况，作为前端的主流框架之一，国内有着广泛应用，市场招聘需求大。前端培训机构几乎一定有它的课程，而且都是重点推广，每个学员都会拿到一大堆学习资料。
怎样才能做出有特色的 Vue.js 教程呢？北京的京程一灯现在就推出了一个专项课程 《你不知道的Vue.js 性能优化》。他们是腾讯课堂前端培训 TOP 机构之一，专注培养年薪40万的高级前端工程师，目前和腾讯课堂联合运营，毕业生平均薪水可以达到25.5K。
为了与市场上其他课程区隔，保证输出优质内容，让学员真正有收获，本次专题课深度讲解 Vue.js 性能优化，以及 Vue3.0 那些值得关注的新特性。高级前端岗位面试中，性能优化是一个必问的知识点，本课程通过对 Vue 面试核心知识点的拆解，带你解锁 Vue.js 性能优化，目标是帮助学员拿到大厂 offer。下面是课程部分内容。
1.Vue首屏优化实践。2.核心优化方案和工程化剖析3.面试常问的 Vue 双向数据深度解析4.深度对比 Vue2 & 3 的双向数据绑定
购课之后，还将赠送价值196元的《Webpack 从入门到精通》全系列教程。
[1]《中国互联网报告》:https://www.ifanr.com/1254954
[2]“腾讯课堂”:https://ke.qq.com/
[3]“腾讯课堂101计划”:https://edu.qq.com/a/20190119/005414.htm
两年来HTML5在移动互联网领域颇为风生水起，更有“年年都是HTML5元年”的戏谑话语。不可否认，HTML5带来了颠覆性的变革，已成应用开发的必然趋势，但其前景究竟如何？何时才是真正爆发点？在日前举行的HTML5游戏生态大会上，专注于HTML5游戏开发的共同探讨HTML5游戏开发者们最关心的问题。
2015年HTML5市场现状：如何解决付费痛点？
从游戏、应用到广告，HTML5用户越来越广泛，甚至很多都取代了原生的解决方案。即连即玩、病毒传播、高用户黏性，HTML5游戏在保证品质、玩法和表现力不输超级App和原生游戏的同时，能够极大地增加用户驻留时间，加强应用商店的用户黏性。
数据显示，截至目前，HTML5游戏已有1.2亿左右的用户规模，而今年还将突破1.71亿。原生游戏和HTML5游戏比是5:3，两种游戏之间的重叠度达到60%，HTML5游戏在从轻度向中重度发展，RPG游戏比重在不断升高。
另外，尽管HTML5游戏有着易传播的优势，但是付费率却一直是痛点。对此，《围住神经猫》制作人秦川从技术角度总结了HTML5的三个变现方向：企业定制、品牌推广、品牌宣传；以HTML5为交接点，打通线上线下O2O；道具、内容付费。
HTML5游戏开发的那些坑
即使开发HTML5游戏，也面临着各种机型适配的难题。秦川表示，目前手机性能参差不齐，重度游戏只能在少数机器上正常运行，而HTML5在原生基础上性能又再差一层，适配到Android手机上便会出现各种各样的问题。而开发《愚公移山》的比悦科技CEO 陈陈则讲道：“对于一个开发者，首先需要思考的是怎么做才能进入这个市场，第二钱在哪儿？第三，怎么把钱赚过来。其实开发游戏和做游戏时两个层面，开发是研发本身应该做的事情，但做游戏，必须要了解整个游戏行业多年积累下来的东西，如何让用户喜欢游戏。”
而让开发者头疼的问题还有用户留存，冗长的入口是用户留存的关键点，每一步都会流失大量用户。如果将入口从三级提升到二级再提升到一级，HTML5游戏用户留存率会有很大的提高。除此之外，支付流程也给了用户留存致命一击，主要表现在支付流程不顺畅与安全问题。
HTML5游戏内容还是渠道为王？
与App手游相比，HTML5游戏更加依赖渠道，但却难以寻找到新的出路。从朋友圈的分享、工具类App的游戏频道到浏览器的推荐，已经形成规范运营和实际收入的渠道依然还是少数。
谈到内容与渠道问题，白鹭引擎联合创始人张翔表示，整个HTML5生态还是以内容为王，无论是端还是引擎，都只是提供基础工具，只有产生好的内容，整个产业才能跑起来。爱贝云计费王闯则表示，现在用户了解游戏的来源大多来自渠道，很多CP更愿意从渠道获取资源。但内容同样重要，如果产品本身有问题，不吸引人，渠道肯定不会给资源，所以，对于开发者而言，踏实做好产品才是重中之重。
*请认真填写需求信息，我们会在24小时内与您取得联系。
