当前位置:千赢国际官网 > 千赢网页手机版登入 > 移动端H5页面注意事项,线条动画入门

移动端H5页面注意事项,线条动画入门

文章作者:千赢网页手机版登入 上传时间:2019-11-15

图标字体 VS 雪碧图——图标字体应用实践

2017/04/05 · HTML5 · 1 评论 · 图标字体

原文出处: 人人网FED博客   

本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊、无法动态变化如hover时候反色。而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点。

移动端H5页面注意事项

2017/02/18 · HTML5 · 移动端

原文出处: Alexee   

SVG 线条动画入门

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

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

通常我们说的 Web 动画,包含了三大类。

  • CSS3 动画
  • javascript 动画(canvas)
  • html 动画(SVG)

个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。

雪碧图

雪碧图实例:淘宝PC端

图片 1

将多张小图放至一张大图

使用的时候,通过background-position调整显示的位置,如下图所示:

图片 2

雪碧图的使用方法

使用雪碧图唯一的优点,可以说就是减少浏览器的请求次数。因为浏览器同一时间能够加载的资源数是一定的,IE 8是6个,Chrome是6个,Firefox是8个。为了验证,写了以下html结构:(这部份虽然有点跑题,但是很要必要深究一下)

图片 3

验证Chrome同时加载个数的html–很多张很大的图片

然后在Chrome的开发者工具里面的Timeline可以看到Chrome确实是6个6个加载的,每次最多加载6个:

图片 4

Chrome同时最多加载资源数为6个

雪碧图的制作方法可以用node的一个的包css-sprite,十分地方便。只要将图标做好,放到相应的文件夹里面,写好配置文件运行,就能够生成相应的图片和css,无需自己手动去调整位置等css属性。详见css-sprite

然而,使用雪碧图存在不可避免的缺点

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 页面示例

举个栗子

SVG 线条动画,在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条:

图片 6

把里面的进度条单独拿出来,也就是需要实现这样一个效果:

图片 7

脑洞大开一下,使用 CSS3 如何实现这样一个进度条呢。

CSS3 是可以做到的,就是很麻烦。但是如果采用 SVG 的话,迎刃而解。

See the Pen 不规则进度条 by Chokcoco (@Chokcoco) on CodePen.

我们假定你在阅读本文的时候有了一定的 SVG 基础,上面代码看看就懂了,好了,本文到此结束。

图片 8

好吧,还是一步一步解释,上面进度条的主要 SVG 代码如下:

<svg version="1.1" xmlns="" xmlns:xlink="" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400"> <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/> <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/> </svg>

1
2
3
4
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
  <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
  <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>

雪碧图的缺点

2. 标题简短

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

SVG 为何

可缩放矢量图形,即SVG,是W3C XML的分枝语言之一,用于标记可缩放的矢量图形。(摘自MDN)

上面代码中,先谈谈 svg 标签:

  • version: 表示 `` 的版本,目前只有 1.0,1.1 两种
  • xmlnshttp://www.w3.org/2000/svg 固定值
  • xmlns:xlinkhttp://www.w3.org/1999/xlink 固定值
  • xml:spacepreserve 固定值,上述三个值固定,表示命名空间,当数据单独存在svg文件内时,这3个值不能省略
  • class:就是我们熟悉的 class
  • width | height: 定义 svg 画布的大小
  • viewbox: 定义了画布上可以显示的区域,当 viewBox 的大小和 svg 不同时,viewBox 在屏幕上的显示会缩放至 svg 同等大小(暂时可以不用理解)

有了 svg 标签,我们就可以愉快的在内部添加 SVG 图形了,上面,我在 svg 中定义了两个 polyline 标签。

高清屏会失真

在2x的设备像素比的屏幕上例如mac,如果要达到和文字一样的清晰度,图片的宽度需要实际显示大小的两倍,否则看起来会比较模糊:读者可以对比左边文字和右边图片里文字的清晰度

图片 9

右边图片里的文字比左边字体的文字模糊

特别是现在手机绝大部份是高清屏了,例如iphone 6 plus的分辨率达到了1920 * 1080,所以为了高清屏,使用雪碧图可能要准备多种规格的图片。

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

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

JavaScript

![](images/qrcode.png)

1
![](images/qrcode.png)

SVG 基本形状

polyline:是SVG的一个基本形状,用来创建一系列直线连接多个点。

其实,polyline 是一个比较不常用的形状,比较常用的是pathrectcircle 等。这里我使用polyline 的原因是需要使用 stroke-linejoin 和 stroke-linecap 属性,在线段连接处创建圆滑过渡角。

SVG 中定义了一些基本形状,在继续下文之前,建议点进去先了解一些基本图形的标签及写法:

图片 10

雪碧图不方便变化

雪碧图是一张静态的图片,当他生成的那天就注定了他要以什么样的方式展示,因此我不能动态地改变他的颜色,无法让他变大(可能会失真),无法像文字一样加一个阴影效果等等。例如下面的菜单,hover或者选中的时候反色:

图片 11
图片 12

选中或者hover时反色

或者是某一天UI要换颜色、某一天老总挂了,为表哀悼,为个公司的网站要换个灰色调。使用雪碧图时,所有的图标都得重新制作。

使用图标字体可以完美解决上面的问题

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

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

图片 13

QQ内的温馨提醒

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

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

SVG 线条动画

好,终于到本文的重点了。

图片 14

上面,我们给两个 polyline 都设置了 class,SVG 图形的一个好处就是部分属性样式可以使用 CSS 的方式书写,更重要的是可以配合 CSS 动画一起使用。

上面,主要的 CSS 代码:

.g-rect-path{ fill: none; stroke-width:10; stroke:#d3dce6; stroke-linejoin:round; stroke-linecap:round; } .g-rect-fill{ fill: none; stroke-width:10; stroke:#ff7700; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray: 0, 1370; stroke-dashoffset: 0; animation: lineMove 2s ease-out infinite; } @keyframes lineMove { 0%{ stroke-dasharray: 0, 1350; } 100%{ stroke-dasharray: 1350, 1350; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.g-rect-path{
    fill: none;
    stroke-width:10;
    stroke:#d3dce6;
    stroke-linejoin:round;
    stroke-linecap:round;
}
 
.g-rect-fill{
    fill: none;
    stroke-width:10;
    stroke:#ff7700;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;
    animation: lineMove 2s ease-out infinite;
}
 
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

这尼玛是什么 CSS?怎么除了 animation 全都不认识? 图片 15

莫慌,其实很多和 CSS 对比一下非常好理解,只是换了个名字:

  • fill:类比 css 中的 background-color,给 svg 图形填充颜色;
  • stroke-width:类比 css 中的 border-width,给 svg 图形设定边框宽度;
  • stroke:类比 css 中的 border-color,给 svg 图形设定边框颜色;
  • stroke-linejoin | stroke-linecap:上文稍微提到过,设定线段连接处的样式;
  • stroke-dasharray:值是一组数组,没数量上限,每个数字交替表示划线与间隔的宽度;
  • stroke-dashoffset:则是虚线的偏移量

重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。

属性 stroke-dasharray 可控制用来描边的点划线的图案范式。

它是一个和数列,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。因此,5,3,2等同于5,3,2,5,3,2

解释很苍白,直接看例子:

See the Pen stroke-dasharray by Chokcoco (@Chokcoco) on CodePen.

上面,填充进度条,使用了下面这个动画 :

@keyframes lineMove { 0%{ stroke-dasharray: 0, 1350; } 100%{ stroke-dasharray: 1350, 1350; } }

1
2
3
4
5
6
7
8
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

stroke-dasharray: 0, 1350;,表示线框短划线和缺口的长度分别为 0 和 1350,所以一开始整个图形都是被缺口占据,所以在视觉效果上长度为 0。

然后过渡到 stroke-dasharray: 1350, 1350,表示线框短划线和缺口的长度分别为 1350 和 1350,因为整个图形的长度就是 1350,所以整个进度条会被慢慢填充满。

掌握了这个技巧后,就可以使用 stroke-dasharray 和 stroke-dashoffset 制作很多不错的交互场景:

图标字体icon font

图标字体就是将图标作成一个字体,使用时与普通字体无异,可以设置字号大小、颜色、透明度等等,方便变化,最大优点是拥有字体的矢量无失真特点,同时可以兼容到IE 6。还有一个优点是生成的文件特别小,215个图标的生成的ttf字体文件才41KB

图片 16

一个图标字体里面的元素

5. 使用 Gulp 拼合图片

如果打算先布局,后使用自动化工具将图片拼起来,减少请求数,需要注意:在编写 CSS 的时候,图片宽高应固定,图片拼合后才能通过定位和显示区域的宽高来展示图片。

举个例子,如果布局时 width: 100%; background-position: center;,使用工具拼合图片后,该元素区域(100% 的宽度)内会将其他图片显示出来,这不是我们想要看到的。

SVG 线条动画实现按钮交互

图片 17

See the Pen svg线条动画实现按钮交互 by Chokcoco (@Chokcoco) on CodePen.

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:移动端H5页面注意事项,线条动画入门

关键词: 千赢国际官网