轨迹移动,网页无图再不是梦想

H5 动画:轨迹移动

2017/11/10 · HTML5 · 动画

原文出处: 凹凸实验室   

 

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

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

网页无图再不是梦想

2015/08/22 · HTML5 · 1 评论 · 网页开发

原文出处: 百码山庄   

一直以来,网页开发对优化方面做的工作从未停止。网页无图也是为了减少页面资源请求而提出的一种畅想。无可厚非在网页开发的历程中在网页无图方面我们已经取得了不朽的成就:从一开始零零碎碎的小图标资源,到后来小图标合并成一个图片出现雪碧图,再到后来Webfont的出现不仅可以取代雪碧图,而且彻底解决了图标管理难,变色实现麻烦的问题。今天我要跟大家介绍一个小工具,也是可以帮助实现网页无图这一终极目标。理论上来讲,它可以将任何一张图片转换成一个不带图片,不带背景图的干干净净的html标签。但是这有前提:你的计算机得有足够的资源去支撑。

刨根问底HTTP和WebSocket协议

2016/08/17 · 基础技术 · 1 评论 · HTTP, websocket

原文出处: TheAlchemist   

图片 1

那天和boss聊天,不经意间提到了Meteor,然后聊到了WebSocket,然后就有了以下对话,不得不说,看问题的方式不同,看到的东西也会大不相同。
A:Meteor是一个很新的开发框架,我觉得它设计得十分巧妙。
B:怎么个巧妙之处?
A:它的前后端全部使用JS,做到了真正的前后端统一;前端浏览器里存有一份后台开放出来的数据库的拷贝,快;使用WebSocket协议来做数据传输协议,来同步前后端的数据库,实现了真正的实时同步。
B:哦?WebSocket是什么东西?真实时?那底层是不是还是轮训?和HTTP的长连接有什么不同?
A:(开始心虚)它是一个新的基于TCP的应用层协议,只需要一次连接,以后的数据不需要重新建立连接,可以直接发送,它是基于TCP的,属于和HTTP相同的地位(呃,开始胡诌了),底层不是轮训,和长连接的区别……这个就不清楚了。
B:它的传输过程大致是什么样子的呢?
A:首先握手连接(又是胡诌),好像可以基于HTTP建立连接(之前用过Socket.io,即兴胡诌),建立了连接之后就可以传输数据了,还包括断掉之后重连等机制。
B:看起来和HTTP长连接做的事情差不多嘛,好像就是一种基于HTTP和Socket的协议啊。
A:呃……(我还是回去看看书吧)

有时候看事情确实太流于表面,了解到了每个事物的大致轮廓,但不求甚解,和朋友聊天说出来也鲜有人会刨根问底,导致了很多基础知识并不牢靠,于是回来大致把HTTP和WebSocket协议的RFC文档(RFC2616 和 RFC6455),刚好对HTTP的传输过程一直有点模糊,这里把两个协议的异同总结一下。

直线移动

图片 2

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

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); }
}

缘起

那是一个工作日的早上,我向往常一样准时到达了工作岗位上,启动电脑,打开浏览器我偶然发现了一篇名曰《18个你可能不相信是用CSS制作出来的东西》的文章,出于职业敏感,也出于好奇我就点进去看了一看,发现其中有一个很有意思的作品:,它仅仅用一个div标签就完成了这幅作品,于是我们几个同事好奇使然,开始分析它的实现,渐渐有了下面即将介绍的工具的影子。

协议基础

仔细去看这两个协议,其实都非常简单,但任何一个事情想做到完美都会慢慢地变得异常复杂,各种细节。这里只会简单地描述两个协议的结构,并不会深入到很深的细节之处,对于理解http已经足够了。

曲线移动

图片 3

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

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

图片 4

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

渐入主题

既然可以使用一个标签制作出一副精美的像素图,那么是否就意味着可以用一个标签还原任一一张图片?唯一不能还原的是图片的精细度问题。然而,如果可以精细到每一个像素点,那么高精度的还原整张图也完全可行,只是这必将消耗非常多的计算机资源。这一设想便是催生这个小工具的催化剂,于是我便开始构思起来。

HTTP

HTTP的地址格式如下:

JavaScript

http_URL = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]] 协议和host不分大小写

1
2
http_URL = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]]
协议和host不分大小写

路径移动

图片 5

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

  • 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>

效果:

图片 6

  • 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,可以导出这样结构的数据

图片 7

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

图片 8

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

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

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

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

1 赞 1 收藏 评论

图片 9

案例分析

通过使用开发者工具分析以上案例的源码,我发现其实它的实现并不难。我们知道在CSS3中新增了一个设置盒子阴影的box-shadow属性,而这个属性可以同时设置任意多个不同颜色和扩散度的阴影块,而案例正是完美的诠释了这个新属性。

既然如此,那么我们现在来做个试验,我们在任一一张图上覆盖上一个个大小相同的小方格子,我们就可以将任何一张图片分隔成一个个的小方格,我们只要知道这些小方格的大小、顺序和位置,我们就可以重组这张图片,如下对比图所示:

图片 10

但是,有个问题:box-shadow的引用颜色是单色的,而每个盒子范围内的图案是复杂的,我们如何去处理这个问题?

因为box-shadow只能设置颜色,所以这个问题的结果只有一个,找出一个能代表这个格子的颜色,那么选取哪一个颜色值就因人而异了,可以选格子四角的任意一个、可选中心点,可选格子内的任意一个点,我选择的是格子的左上角这个点。我们不难发现,如果我们尽可能的缩小格子,小到只剩下一个像素大小,我们就可以完整的还原一张图片了。

HTTP消息

一个HTTP消息可能是request或者response消息,两种类型的消息都是由开始行(start-line),零个或多个header域,一个表示header域结束的空行(也就是,一个以CRLF为前缀的空行),一个可能为空的消息主体(message-body)。一个合格的HTTP客户端不应该在消息头或者尾添加多余的CRLF,服务端也会忽略这些字符。

header的值不包括任何前导或后续的LWS(线性空白),线性空白可能会出现在域值(filed-value)的第一个非空白字符之前或最后一个非空白字符之后。前导或后续的LWS可能会被移除而不会改变域值的语意。任何出现在filed-content之间的LWS可能会被一个SP(空格)代替。header域的顺序不重要,但建议把常用的header放在前边(协议里这么说的)。

技术实现

首先,我们考虑如何根据图片去取到每个格子的颜色值?这个问题并不难,HTML5为我们提供了Canvas标签,而通过Canvas我们可以使用getImageData方法获取到画布中任一一个点的颜色信息以及透明度信息。

然后,我们来考虑如何设计我们的小工具。第一步,根据不同的图片可能会适合不同的格子大小,所以我会保留一个size选项用于设置盒子的大小;第二步,格子与格子之间是否保留间隙,可能根据用户习惯会有不同,所以我提供space选项来设置间隙大小;第三步,格子实际就是一个盒子的其中一个阴影,而阴影的形状是可以根据盒子本身发生变化的,所以我提供radius属性来配置格子圆角大小;最后,既然我们得到的将是一个html标签,那么标签是可以带有各种属性的(比如:id、class等),所以我提供一个attrs属性(一个json对象),来设置生成的html元素的属性。好了,万事俱备,只欠代码实现了!

最后,我们梳理逻辑,封装代码,完成了最基础的版本。效果如下演示:

图片 11

为了方便大家看到更真实的效果,这里给大家提供在线DEMO

Request消息

RFC2616中这样定义HTTP Request 消息:

JavaScript

Request = Request-Line *(( general-header | request-header(跟本次请求相关的一些header) | entity-header ) CRLF)(跟本次请求相关的一些header) CRLF [ message-body ]

1
2
3
4
5
6
Request = Request-Line
          *(( general-header
            | request-header(跟本次请求相关的一些header)
            | entity-header ) CRLF)(跟本次请求相关的一些header)
          CRLF
          [ message-body ]

一个HTTP的request消息以一个请求行开始,从第二行开始是header,接下来是一个空行,表示header结束,最后是消息体。

请求行的定义如下:

JavaScript

//请求行的定义 Request-Line = Method SP Request-URL SP HTTP-Version CRLF //方法的定义 Method = "OPTIONS" | "GET" | "HEAD" |"POST" |"PUT" |"DELETE" |"TRACE" |"CONNECT" | extension-method //资源地址的定义 Request-URI ="*" | absoluteURI | abs_path | authotity(CONNECT)

1
2
3
4
5
6
7
8
//请求行的定义
Request-Line = Method SP Request-URL SP HTTP-Version CRLF
 
//方法的定义
Method = "OPTIONS" | "GET" | "HEAD"  |"POST" |"PUT" |"DELETE" |"TRACE" |"CONNECT"  | extension-method
 
//资源地址的定义
Request-URI   ="*" | absoluteURI | abs_path | authotity(CONNECT)

Request消息中使用的header可以是general-header或者request-header,request-header(后边会讲解)。其中有一个比较特殊的就是Host,Host会与reuqest Uri一起来作为Request消息的接收者判断请求资源的条件,方法如下:

  1. 如果Request-URI是绝对地址(absoluteURI),这时请求里的主机存在于Request-URI里。任何出现在请求里Host头域值应当被忽略。
  2. 假如Request-URI不是绝对地址(absoluteURI),并且请求包括一个Host头域,则主机由该Host头域值决定。
  3. 假如由规则1或规则2定义的主机是一个无效的主机,则应当以一个400(错误请求)错误消息返回。

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:轨迹移动,网页无图再不是梦想

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。