实现复杂线条动画,页面里有用武之地吗

移动端H5页面注意事项

2017/02/18 · HTML5 · 移动端

原文出处: Alexee   

图片资源 Base64 化在 H5 页面里有用武之地吗

2016/12/15 · HTML5 · Base64

原文出处: 凹凸实验室   

图片 1

将图片资源转至base64格式后可直接放入页面作为首屏直出,也可以放入css文件中,减少请求,以加快首屏的呈现速度。
不过图片base64化,将带来一个臃肿的html或css文件,是否会影响页面的渲染性能,浏览器又支持如何呢?

SVG 实现复杂线条动画

2016/12/29 · HTML5 · SVG, 动画

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画:《Web动画:SVG 线条动画入门》

当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多。

很多时候,我们无法人工去画出一些十分复杂动画的线条,这个时候,就要借助前端好帮手 PS 和 AI,而本文就是介绍如何导出复杂的 SVG 路径。:

图片 2

好了,假定我们现在要制作下图 GIF 这样的一个 loading 图:

图片 3

上面这个 SVG 线条动画的路径 path ,如果靠自己手工一个点一个点定位调试画出来的话,嘿嘿嘿你去试试。

图片 4

1. 单个页面内容不能过多

设计常用尺寸:7501334 / 6401134,包含了手机顶部信号栏的高度。

移动端H5活动页面常常需要能够分享到各种社交App中,常用的有微信、QQ等。

使用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不止有顶部导航,底部也有操作栏(safari浏览器也一样),这些都会占用设计稿显示区域,因此在 设计环节 就需要考虑内容的多少,页面底部要预留一定的空白,这样在微信或qq中才不会被遮住。

如下图(QQ内置浏览器):页面设计尺寸为 7501334,顶部占用 150px,底部占用 110px,共占用了 260px,因此设计稿内容应控制在 1334-260=1074px 的高度内。编写代码时,使用 Chrome 浏览器模拟设备大小,将该尺寸(**7501074**)存下来,用于实时查看移动端页面效果。

如果页面已经写好了,就只能按照上面的尺寸进行内容的调整了,缩小元素间距,缩放图片大小等。
分享下我的失败尝试:

  1. 如果对整个页面进行缩放(使用 meta 标签),按照设计稿的比例,在高度满足的情况下宽度会偏小,两边会有白底;
  2. 就算使用 rem 作为相关间距的单位,也没有办法找到一个合适的比例在两种高度(微信/QQ)下切换,因此统一调成适配 QQ 的,这样就算在微信下有多余的空白,固定底部的引导下滑箭头也能使其不会过于突兀。

图片 5

750*1334 页面示例

如何统计?

通过Navigation Timing记录的关键时间点来统计页面完成所用的时间,并通过Chrome开发工具来跟踪细节

JavaScript

var timing = window.performance.timing timing.domLoading //浏览器开始解析 HTML 文档第一批收到的字节 timing.domInteractive // 浏览器完成解析并且所有 HTML 和 DOM 构建完毕timing.domContentLoadedEventStart //DOM 解析完成后,网页内资源加载开始的时间 timing.domContentLoadedEventEnd //DOM 解析完成后,网页内资源加载完成的时间(如 JS 脚本加载执行完毕) timing.domComplete //网页上所有资源(图片等) 下载完成,且准备就绪的时间

1
2
3
4
5
var timing = window.performance.timing
timing.domLoading //浏览器开始解析 HTML 文档第一批收到的字节
timing.domInteractive // 浏览器完成解析并且所有 HTML 和 DOM 构建完毕timing.domContentLoadedEventStart //DOM 解析完成后,网页内资源加载开始的时间
timing.domContentLoadedEventEnd //DOM 解析完成后,网页内资源加载完成的时间(如 JS 脚本加载执行完毕)
timing.domComplete //网页上所有资源(图片等) 下载完成,且准备就绪的时间

以上定义来自chrome官方文档,在其它环境下也许会有差异,从测试结果看,下面的build时间在android+微信环境中一直是0,对此可能是因为渲染机制差别,此处不做深入测试。除osx+chrome之外环境的数据仅作参考。

JavaScript

build = timing.domComplete - timing.domContentLoadedEventStart //间隔记录网页内资源加载和呈现时间。 complete = timing.domComplete - timing.domLoading //页面接收到数据开始到呈现完毕的总时间。

1
2
build = timing.domComplete - timing.domContentLoadedEventStart //间隔记录网页内资源加载和呈现时间。
complete = timing.domComplete - timing.domLoading //页面接收到数据开始到呈现完毕的总时间。

使用 PS 导出路径

估计靠手工能画出来,也没了大半条命。好,轮到工具上场,看看我们的原图在 PS 下长什么样子(支持透明通道的 PNG、GIF 为佳):

图片 6

好,选中选框工具,按下 CTRL 选中图层, 再选择建立工作路径:

图片 7

这个时候会弹出一个设定容差大小的选择,可以用不同大小的容差多试几次,直到得到一个自己满意的路径。

图片 8

容差是什么?可以理解为一种精确度,在选取颜色时所设置的选取范围,容差越大,选取的范围也越大,其数值是在0-255之间。

好,这个时候,路径算是建立完成了,可以把图层的透明度设置为 0 ,就能清晰的看到路径长啥样:

图片 9

港真,长得挺帅的。图片 10

好,到了 PS 中的最后一步,点击文件选项,导出路径到 illustrator ,看图,照着操作就好:

图片 11

2. 标题简短

移动端浏览器导航条宽度有限,简短的标题可以使其展示完整。

场景1,内嵌至css文件中

在 illustrator 中生成 SVG 文件

打开 AI ,打开刚刚用 PS 导出的 *.ai 文件。

没有 AI ?身为前端居然连 AI 也没装( ̄△ ̄;) 额,其实我也是因为 SVG 才上手的,赶紧下一个吧,我的版本是 Adobe illustrator CC 2014。

可能你看到的是一片空白,别慌,使用选择工具选一个矩形,就能选中路径啦。

图片 12

如果你是 PS 钢笔工具小能手,还可以继续对路径进行修改,直到自己满意为止。

OK,接下来就是调整画布大小,最好是路径左上角和画布左上角对齐,然后选中存储为 SVG 文件。

图片 13

好,其实 AI 也没做什么,路径是使用 PS 生成的,为什么不直接用 PS 生成 *.svg 文件呢?因为我用的版本 PS 还没支持直接存储为 SVG 格式。然后其实也可以直接在 AI 上绘制路径,这个就看设计师或者你对哪个工具更熟悉了。

3. 二维码图片使用 img 标签引入

二维码图片不要写为元素背景,不然长按没有办法触发扫描功能。应使用 img 标签引入,如下:

JavaScript

![](images/qrcode.png)

1
![](images/qrcode.png)

1、原生引入图片链接做背景图

一张大小为50kbjpg格式图片,应用到9×15=135个dom做背景图,模拟雪碧图的模式,多个节点引用同一张图片做背景,(示例)如图。
图片 14
测试环境:Mac OS X EI Capitan 10.xx + Chrome 48.xx
其它辅助测试机器: iPhone 6 plus iOS 9.xx; 魅族Note Android 4.xx

实际使用过程中,其它版本和机型的Android手机还有待测试

关闭缓存状态下,build:150ms | complete: 200ms(总时间受网络状态等因素影响,数据做比较用)
图片 15

开启缓存状态下,build: 7ms | complete: 59ms(包括以下稳定状态下多次测试的平均值,截图为最接近平均值的状态,默认数据来自Mac+Chrome[48.XX版本])

图片 16

测试环境 build(单位:ms) complete(单位:ms)
OS X+Chrome 7 59
iOS+微信 45 90
OS X+Safari 50 100
Android+微信 0 120

获取 SVG 的 path 路径

OK,最后把刚刚保存的 *.svg 路径的文件用浏览器打开,一片空白是正常的,右键查看网页源代码:

图片 17

大功告成,这里面, 路径就是我们需要的路径了!

图片 18

好,把我们要的 `` 整个拿出来,运用上一篇文章的线条动画知识,给它赋予简单的动画效果就好:

See the Pen GNbwYV by Chokcoco (@Chokcoco) on CodePen.

4. 二维码图片记得扫描测试

有时候扫描二维码之后,会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,如下图所示:

图片 19

QQ内的温馨提醒

这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如 App 的下载页面等。因此二维码的扫描测试不能少。

举个例子,如果二维码扫描结果是应用的下载地址的话,可以使用应用宝的微下载地址来生成二维码,这是不会被“温馨提醒”的。

2、引入base64格式图片做背景图

将上面50kb大小的jpg图片转换为base64格式,加在css文件中。

关闭缓存状态下,build:80ms | complete: 280ms

图片 20
开启缓存状态下,build: 160ms | complete: 210ms

图片 21

测试环境 build(单位:ms) complete(单位:ms)
OS X+chrome 160 210
iOS+微信 35 100
OS X+Safari 9 90
Android+微信 12 150

使用 javascript 计算 path 路径长度

还有一个问题,线条动画需要知道整个 path 路径的长度,简单的线条我们还可以利用加减法算出整个图形的长度。那么复杂路径的长度怎么计算?

利用一段简单的 js 可以完成:

<svg> <path d="..."/> </svg>

1
2
3
<svg>
  <path d="..."/>
</svg>

var obj = document.querySelector("path"); var length = obj.getTotalLength(); console.log(length); // 377.0433

1
2
3
4
var obj = document.querySelector("path");
var length = obj.getTotalLength();
 
console.log(length); // 377.0433

好了,有了复杂图形的路径,我们就可以制作出很多酷炫 SVG 动画效果了。撒花。可以多上 codePen 上搜索 SVG,学习下大神们的一些 SVG 动画。

算是正式踏入 SVG 的坑,接下来还会有一系列 SVG 的文章,将会更深入的讨论 SVG。

我在我的 Github 上,使用 SVG 实现了一些图形 — SVG奇思妙想,Demo可以戳这里。

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:实现复杂线条动画,页面里有用武之地吗

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