图片 14

关于启用,指尖大冒险

H5 动画:轨迹移动

2017/11/10 · HTML5 ·
动画

原文出处:
凹凸实验室   

 

动画,是指由许多帧静止的画面,以一定的速度(如每秒16张)连续播放时,肉眼因视觉残象产生错觉,而误以为画面活动的作品。

在 Web
开发中,经常需要实现各种动画效果,例如:移动、变形、透明度变化等,今天我们主要来讨论各种移动的实现。

关于启用 HTTPS 的一些经验分享(二)

2015/12/24 · 基础技术 ·
HTTP,
HTTPS

原文出处:
imququ(@屈光宇)   

文章目录

  • SSL 版本选择
  • 加密套件选择
  • SNI 扩展
  • 证书选择

几天前,一位朋友问我:都说推荐用 Qualys SSL
Labs 这个工具测试 SSL
安全性,为什么有些安全实力很强的大厂家评分也很低?我认为这个问题应该从两方面来看:1)国内用户终端情况复杂,很多时候降低
SSL 安全配置是为了兼容更多用户;2)确实有一些大厂家的 SSL
配置很不专业,尤其是配置了一些明显不该使用的 CipherSuite。

我之前写的《关于启用 HTTPS
的一些经验分享(一)》,主要介绍 HTTPS
如何与一些新出的安全规范配合使用,面向的是现代浏览器。而今天这篇文章,更多的是介绍启用
HTTPS 过程中在老旧浏览器下可能遇到的问题,以及如何取舍。

H5 游戏开发:指尖大冒险

2017/11/29 · HTML5 ·
游戏

原文出处:
凹凸实验室   

在今年八月中旬,《指尖大冒险》SNS
游戏诞生,其具体的玩法是通过点击屏幕左右区域来控制机器人的前进方向进行跳跃,而阶梯是无穷尽的,若遇到障碍物或者是踩空、或者机器人脚下的阶砖陨落,那么游戏失败。

笔者对游戏进行了简化改造,可通过扫下面二维码进行体验。

 

图片 1

《指尖大冒险》SNS 游戏简化版

该游戏可以被划分为三个层次,分别为景物层、阶梯层、背景层,如下图所示。

 

图片 2

《指尖大冒险》游戏的层次划分

整个游戏主要围绕着这三个层次进行开发:

  • 景物层:负责两侧树叶装饰的渲染,实现其无限循环滑动的动画效果。
  • 阶梯层:负责阶梯和机器人的渲染,实现阶梯的随机生成与自动掉落阶砖、机器人的操控。
  • 背景层:负责背景底色的渲染,对用户点击事件监听与响应,把景物层和阶梯层联动起来。

而本文主要来讲讲以下几点核心的技术内容:

  1. 无限循环滑动的实现
  2. 随机生成阶梯的实现
  3. 自动掉落阶砖的实现

下面,本文逐一进行剖析其开发思路与难点。

直线移动

图片 3

通常可以直接由各个点的位置,以及到点的时间与整个动画持续时间的比值,写出类似下面的代码并可实现动画。

JavaScript

.cray { animation: move 2s alternate infinite; } @keyframes move { 0% {
transform: translate(0, 0); } 30% { transform: translate(100px, 0); }
60% { transform: translate(100px, 100px); } 100% { transform:
translate(200px, 0); } }

1
2
3
4
5
6
7
8
9
.cray {
  animation: move 2s alternate infinite;
}
@keyframes move {
  0% { transform: translate(0, 0); }
  30% { transform: translate(100px, 0); }
  60% { transform: translate(100px, 100px); }
  100% { transform: translate(200px, 0); }
}

SSL 版本选择

TLS(Transport Layer Security,传输层安全)的前身是 SSL(Secure Sockets
Layer,安全套接字层),它最初的几个版本(SSL 1.0、SSL 2.0、SSL
3.0)由网景公司开发,从 3.1 开始被 IETF 标准化并改名,发展至今已经有 TLS
1.0、TLS 1.1、TLS 1.2 三个版本。TLS 1.3 改动会比较大,目前还在草案阶段。

SSL 1.0 从未公开过,而 SSL 2.0 和 SSL 3.0
都存在安全问题,不推荐使用。Nginx 从 1.9.1 开始默认只支持 TLS
的三个版本,以下是 Nginx
官方文档中对
ssl_protocols 配置的说明:

Syntax: ssl_protocols [SSLv2] [SSLv3] [TLSv1] [TLSv1.1]
[TLSv1.2];
Default: ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
Context: http, server
Enables the specified protocols. The TLSv1.1 and TLSv1.2 parameters
work only when the OpenSSL library of version 1.0.1 or higher is used.

但不幸的是,IE 6 只支持 SSLv2 和
SSLv3(来源),也就是说
HTTPS 网站要支持 IE 6,就必须启用 SSLv3。仅这一项就会导致 SSL Labs
给出的评分降为 C。

一、无限循环滑动的实现

景物层负责两侧树叶装饰的渲染,树叶分为左右两部分,紧贴游戏容器的两侧。

在用户点击屏幕操控机器人时,两侧树叶会随着机器人前进的动作反向滑动,来营造出游戏运动的效果。并且,由于该游戏是无穷尽的,因此,需要对两侧树叶实现循环向下滑动的动画效果。

 

图片 4

循环场景图设计要求

对于循环滑动的实现,首先要求设计提供可前后无缝衔接的场景图,并且建议其场景图高度或宽度大于游戏容器的高度或宽度,以减少重复绘制的次数。

然后按照以下步骤,我们就可以实现循环滑动:

  • 重复绘制两次场景图,分别在定位游戏容器底部与在相对偏移量为贴图高度的上方位置。
  • 在循环的过程中,两次贴图以相同的偏移量向下滑动。
  • 当贴图遇到刚滑出游戏容器的循环节点时,则对贴图位置进行重置。

 

图片 5

无限循环滑动的实现

用伪代码描述如下:

JavaScript

// 设置循环节点 transThreshold = stageHeight; //
获取滑动后的新位置,transY是滑动偏移量 lastPosY1 = leafCon1.y + transY;
lastPosY2 = leafCon2.y + transY; // 分别进行滑动 if leafCon1.y >=
transThreshold // 若遇到其循环节点,leafCon1重置位置 then leafCon1.y =
lastPosY2 – leafHeight; else leafCon1.y = lastPosY1; if leafCon2.y >=
transThreshold // 若遇到其循环节点,leafCon2重置位置 then leafCon2.y =
lastPosY1 – leafHeight; else leafCon2.y = lastPosY2;

1
2
3
4
5
6
7
8
9
10
11
12
// 设置循环节点
transThreshold = stageHeight;
// 获取滑动后的新位置,transY是滑动偏移量
lastPosY1 = leafCon1.y + transY;  
lastPosY2 = leafCon2.y + transY;
// 分别进行滑动
if leafCon1.y >= transThreshold // 若遇到其循环节点,leafCon1重置位置
  then leafCon1.y = lastPosY2 – leafHeight;
  else leafCon1.y = lastPosY1;
if leafCon2.y >= transThreshold // 若遇到其循环节点,leafCon2重置位置
  then leafCon2.y = lastPosY1 – leafHeight;
  else leafCon2.y = lastPosY2;

在实际实现的过程中,再对位置变化过程加入动画进行润色,无限循环滑动的动画效果就出来了。

曲线移动

图片 6

在 CSS 中可以通过 transform-origin 配合 rotate
实现曲线移动,不过这种 曲线 都是圆的一部分且不太好控制。

这种移动我们可以把它拆分成两个方向的运动叠加,如

图片 7

更详细的说明可以参考这篇文章
《curved-path-animations-in-css》。

加密套件选择

加密套件(CipherSuite),是在 SSL
握手中需要协商的很重要的一个参数。客户端会在 Client Hello
中带上它所支持的 CipherSuite 列表,服务端会从中选定一个并通过
Server Hello 返回。如果客户端支持的 CipherSuite 列表与服务端配置的
CipherSuite 列表没有交集,会导致无法完成协商,握手失败。

CipherSuite
包含多种技术,例如认证算法(Authentication)、加密算法(Encryption)、消息认证码算法(Message
Authentication Code,简称为 MAC)、密钥交换算法(Key
Exchange)和密钥衍生算法(Key Derivation Function)。

SSL 的 CipherSuite 协商机制具有良好的扩展性,每个 CipherSuite 都需要在
IANA 注册,并被分配两个字节的标志。全部 CipherSuite 可以在 IANA 的 TLS
Cipher Suite
Registry
页面查看。

OpenSSL 库支持的全部 CipherSuite 可以通过以下命令查看:

openssl ciphers -V | column -t 0xCC,0x14 – ECDHE-ECDSA-CHACHA20-POLY1305
TLSv1.2 Kx=ECDH Au=ECDSA Enc=ChaCha20-Poly1305 Mac=AEAD … …

1
2
3
openssl ciphers -V | column -t
0xCC,0x14  –  ECDHE-ECDSA-CHACHA20-POLY1305  TLSv1.2  Kx=ECDH        Au=ECDSA   Enc=ChaCha20-Poly1305  Mac=AEAD
… …

0xCC,0x14 是 CipherSuite 的编号,在 SSL
握手中会用到。ECDHE-ECDSA-CHACHA20-POLY1305
是它的名称,之后几部分分别表示:用于 TLSv1.2,使用 ECDH 做密钥交换,使用
ECDSA 做认证,使用 ChaCha20-Poly1305 做对称加密,由于 ChaCha20-Poly1305
是一种 AEAD 模式,不需要 MAC 算法,所以 MAC 列显示为 AEAD。

要了解 CipherSuite 的更多内容,可以阅读这篇长文《TLS 协议分析 与
现代加密通信协议设计》。总之,在配置
CipherSuite 时,请务必参考权威文档,如:Mozilla
的推荐配置、CloudFlare
使用的配置。

以上 Mozilla 文档中的「Old backward compatibility」配置,以及 CloudFlare
的配置,都可以很好的兼容老旧浏览器,包括 Windows XP / IE6。

之前见到某个大厂家居然支持包含 EXPORT
CipherSuite,这些套件在上世纪由于美国出口限制而被弱化过,已被攻破,实在没有理由再使用。

二、随机生成阶梯的实现

随机生成阶梯是游戏的最核心部分。根据游戏的需求,阶梯由「无障碍物的阶砖」和「有障碍物的阶砖」的组成,并且阶梯的生成是随机性。

路径移动

图片 8

这也是曲线移动,但是想像上面那样,这个很难拆分成几个方向的运动叠加。这样的移动路径可以尝试以下几个方法:

  • SVG Animation

这样的路径可以比较好的用 SVG path 来描述,然后使用 SVG Animation
做跟随动画,并可以达到预期的轨迹效果。

主要代码(在线示例):

JavaScript

<svg width=”420px” height=”260px” viewBox=”0 0 420 260″ version=”1.1″
xmlns=””
xmlns:xlink=”; <g stroke=”#979797″
stroke-width=”1″ fill=”none”> <path id=”motionPath”
d=”M370.378234,219.713623 C355.497359,218.517659 …” ></path>
</g> <g id=”cray” transform=”translate(0, -24)”
stroke=”#979797″> <image id=”cray-img”
xlink:href=”” x=”0″
y=”0″ width=”100px”/> </g> <animateMotion
xlink:href=”#cray” dur=”5s” begin=”0s” fill=”freeze”
repeatCount=”indefinite” rotate=”auto-reverse” > <mpath
xlink:href=”#motionPath” /> </animateMotion> </svg>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<svg width="420px" height="260px" viewBox="0 0 420 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g stroke="#979797" stroke-width="1" fill="none">
    <path id="motionPath" d="M370.378234,219.713623 C355.497359,218.517659 …" ></path>
  </g>
  <g id="cray" transform="translate(0, -24)" stroke="#979797">
   <image id="cray-img" xlink:href="http://7xt5iu.com1.z0.glb.clouddn.com/img/cray.png" x="0" y="0" width="100px"/>
  </g>
  <animateMotion
    xlink:href="#cray"
    dur="5s"
    begin="0s"
    fill="freeze"
    repeatCount="indefinite"
    rotate="auto-reverse"
  >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>

效果:

图片 9

  • JavaScript

使用 JavaScript
可以直接操作元素进行运动,理论上可以实现任何动画,只是实现一些复杂的动画成本比较高,好在有各种已经开发好了的工具库可以供我们使用。例如,使用
Greensock 的 TweenMax 和 MorphSVGPlugin(收费),通过 MorphSVGPlugin
提供的 pathDataToBezier 方法将 SVG path 转成曲线数组,然后给 TweenMax
使用:

JavaScript

var hill = document.getElementById(‘hill’) var path =
MorphSVGPlugin.pathDataToBezier(“#motionPath”); TweenMax.to(hill, 5, {
bezier:{ values:path, type:”cubic”, autoRotate: 180 },
ease:Linear.easeNone, repeat: -1 })

1
2
3
4
5
6
7
8
9
10
11
var hill = document.getElementById(‘hill’)
var path = MorphSVGPlugin.pathDataToBezier("#motionPath");
TweenMax.to(hill, 5, {
  bezier:{
    values:path,
    type:"cubic",
    autoRotate: 180
  },
  ease:Linear.easeNone,
  repeat: -1
})

在线示例

  • CSS

实现动画,其实就是在相应的时间点做相应的“变化”。再回头看直线移动的实现方式,其实如果能给出足够多点的位置和该点的时间与持续时间的比值,那其实曲线也可以直接用
CSS 来实现。

很多时候设计师使用 AE
来设计动画,当我们拿到设计稿后,可以给动画增加关键帧,然后借助一些工具把关键帧的信息导出来,这里介绍一个
keyframes-cli,可以导出这样结构的数据

图片 10

从属性名字可以判断出来 X_POSITIONY_POSITIONxy
的位置信息,而 key_values 里的 data 就是我们需要的点位置
该点的时间与持续时间的比值 可以根据 start_frame 得出,
写个脚本把这些数据处理下,可得到类似下面的 CSS 代码

图片 11

设置的关键帧越多,动画会越流畅,但 CSS 也会增多。

注意:不是 AE 关键帧里所有的信息都可以导出来,还跟 AE
里使用的过渡属性有关,这里有介绍。

最后,总结一下,移动动画就是用一种合适的方式把时间和位置的变化关系展示出来。除了上面方法,肯定还有很多其他的方法和帮助工具,欢迎留言交流讨论。

感谢您的阅读,本文由 凹凸实验室
版权所有。如若转载,请注明出处:凹凸实验室()

1 赞 1 收藏
评论

图片 12

SNI 扩展

我们知道,在 Nginx 中可以通过指定不同的 server_name
来配置多个站点。HTTP/1.1 协议请求头中的 Host
字段可以标识出当前请求属于哪个站点。但是对于 HTTPS 网站来说,要想发送
HTTP 数据,必须等待 SSL
握手完成,而在握手阶段服务端就必须提供网站证书。对于在同一个 IP 部署不同
HTTPS 站点,并且还使用了不同证书的情况下,服务端怎么知道该发送哪个证书?

Server Name Indication,简称为 SNI,是 TLS
的一个扩展,为解决这个问题应运而生。有了 SNI,服务端可以通过
Client Hello 中的 SNI 扩展拿到用户要访问网站的 Server
Name,进而发送与之匹配的证书,顺利完成 SSL 握手。

Nginx 在很早之前就支持了 SNI,可以通过 nginx -V
来验证。以下是我的验证结果:

./nginx -V nginx version: nginx/1.9.9 built by gcc 4.8.4 (Ubuntu
4.8.4-2ubuntu1~14.04) built with OpenSSL 1.0.2e-dev xx XXX xxxx TLS SNI
support enabled configure arguments: –with-openssl=../openssl
–with-http_ssl_module –with-http_v2_module

1
2
3
4
5
6
./nginx -V
nginx version: nginx/1.9.9
built by gcc 4.8.4 (Ubuntu 4.8.4-2ubuntu1~14.04)
built with OpenSSL 1.0.2e-dev xx XXX xxxx
TLS SNI support enabled
configure arguments: –with-openssl=../openssl –with-http_ssl_module –with-http_v2_module

然而,并不是所有浏览器都支持 SNI,以下是常见浏览器支持 SNI 的最低版本:

浏览器 最低版本
Chrome Vista+ 全支持;XP 需要 Chrome 6+;OSX 10.5.7+ 且 Chrome 5+
Firefox 2.0+
Internet Explorer 7+ (需要 Vista+)
Safari 3+ (需要 OS X 10.5.6+)
Mobile Safari iOS 4.0+
Android Webview 3.0+

如果要避免在不支持 SNI 的浏览器中出现证书错误,只能将使用不同证书的
HTTPS 站点部署在不同 IP 上,最简单的做法是分开部署到不同机器上。

无障碍阶砖的规律

其中,无障碍阶砖组成一条畅通无阻的路径,虽然整个路径的走向是随机性的,但是每个阶砖之间是相对规律的。

因为,在游戏设定里,用户只能通过点击屏幕的左侧或者右侧区域来操控机器人的走向,那么下一个无障碍阶砖必然在当前阶砖的左上方或者右上方。

 

图片 13

无障碍路径的生成规律

用 0、1
分别代表左上方和右上方,那么我们就可以建立一个无障碍阶砖集合对应的数组(下面简称无障碍数组),用于记录无障碍阶砖的方向。

而这个数组就是包含 0、1
的随机数数组。例如,如果生成如下阶梯中的无障碍路径,那么对应的随机数数组为
[0, 0, 1, 1, 0, 0, 0, 1, 1, 1]。

 

图片 14

无障碍路径对应的 0、1 随机数

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:, ,
网站地图xml地图