图片 18

您该知情的片段事宜,线条动漫入门

SVG 新司机开车指南

2017/04/10 · HTML5 ·
SVG

原文出处: Tw93   

H5推广:你该知道的一些事儿

2017/03/11 · HTML5 · 2
评论 ·
HTML5

原文出处: 携程设计委员会   

SVG 线条动画入门

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

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

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

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

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

TL,TR

SVG其相关特性远比想象中要强,本文首先介绍下SVG的相关定义、特点和Demo,接下来会介绍它的相关语法和动画,最后告诉大家如何使用和优化SVG。

确保大家一小时内可以开车上路….. 来不及解释了,快上车…..

图片 1

1. H5已死?

经过几年H5的混战,大家对H5的感觉越来越习以为常,曾经名噪一时的套路当下也难故伎重演。于是“H5已死”的论调一时间甚嚣尘上。

如今到了2017年,H5究竟死不死?在这里先和大家分享一份2017年初H5在线创作平台MAKA发布的《2016年度H5数据报告》[1]。

报告中指出,2016年带商业转化功能的H5从2015年的15%左右攀升至45.5%,翻了三倍之多;2015年的H5以纯内容展示为主,通过H5的趣味性传播带来品牌曝光,而2016年的H5正从单一的展示传播转变为更实际的商业用途。

在H5商业转化方面,最常用功能是报名表单(15.6%)、地图功能(4.3%)、接力功能(2.7%)、投票功能(1.1%)、抽奖功能(0.6%)。

图片 2

同时,在MAKA上,H5平均页面浏览量1208,高于去年的954,同比增26.6%。这个数据和微信30%月活跃用户增长速度相近似。
从以上数据来看,“H5已死”的论调可能还为时过早。

举个栗子

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

图片 3

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

图片 4

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

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

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

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

图片 5

好吧,还是一步一步解释,上面进度条的主要 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. 2016:H5的活法

既然H5还没死,那么现在的H5的传播数据到底怎样呢?我们继续看MAKA的这份报告。

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 标签。

定义

SVG(Scalable Vector
Graphics)是可缩放矢量图形的缩写,基于可扩展标记语言XML来描述二维矢量图形的一种图形格式,由W3C制定,是一个开放标准。

1- 受众地域分布

从数据来看,受众多数来自一线城市,北上广深四个城市是H5访问的主要来源地,这与H5想要接触的目标人群是一致的。其中北京遥遥领先,重庆、成都紧随北上广深。

图片 6

SVG 基本形状

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

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

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

图片 7

特点

现在我们可以使用PNG、JPG来展示静态的图片,使用CSS3、JS或者挫一点的GIF来表示动画,厉害一点我们可以使用Canvas来绘图,那么为什么还要使用SVG呢?

  • 和PNG、GIF比较起来,文件体积更小,且可压缩性强;
  • 由于采用XML描述,可以轻易的被读取和修改,描述性更强;
  • 在放大或改变尺寸的情况下其图形质量不会有所损失,与分辨率无关,是可伸缩的;
  • SVG是面向未来 (W3C 标准)的,同时浏览器兼容性好;
  • 使用CSS 和 JS能很方便的进行控制,同时可以很轻易地描述路径动画;
  • 和Canvas相比
    • Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本来绘制图形,Canvas提供的功能比较原始,适合像素处理,动态渲染和大数据量绘制的应用场景;
    • SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line
      …),还有完整的动画,事件机制,本身可以独立使用,也可以嵌入到HTML中,SVG很早就成为了国际标准,功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景;

2- H5访问时间

用户访问高峰集中在午休11:00-14:00和晚上20:00-23:00,与微信公众号的阅读时间分布曲线相近似。具体的推广时间需要结合具体场景,而H5发布的最佳时机由此可见一斑。

图片 8

SVG 线条动画

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

图片 9

上面,我们给两个 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 全都不认识? 图片 10

莫慌,其实很多和 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 制作很多不错的交互场景:

Demo

使用SVG可以做出什么比较好玩的东西呢?

图片 11

上周团队(😂😂臭不要脸插个很硬的广告,阿里飞猪前端团队在招人啦,详细:飞猪寻觅前端同学)有一个小的hackthon,就是通过代码来画这个Loading
GIF,然后就边学边用SVG写了一个相同的loadng,体积从之前GIF的33KB变成了864B的SVG,详细见下面:

See the Pen Fliggy Loading by Tw93
(@tw93) on CodePen.

另外一些有趣的SVG可以查看30 Awesome SVG Animation For Your
Inspiration这里。

3- H5渠道排行

从MAKA平台H5的阅读来源分析,59.6%的用户通过朋友圈进入H5,与2015年相比下降了6个百分点,这个转变可能与微信限制诱导分享有关。此消彼长,从微信公众号浏览量增加7.9%,公众号来源逐渐成为成为一次传播的主要战场。

图片 12

SVG 线条动画实现按钮交互

图片 13

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

二、坐标定位

学习SVG语法之前,我们可以来了解下SVG的坐标定位,这种坐标系统和我们小时候学习的绘图坐标是相反的,但是在HTML中都是用如下方式定位。即以页面的左上角为(0,0)坐标点,坐标以像素为单位,x轴正方向是向右,y轴正方向是向下

图片 14

4- H5阅读页数分析

通过对访问量最高的1000个H5分析,发现高访问量的H5页数多集中在6-10页,其中9页最多,占比高达21.0%。用户向来是非常挑剔的,太过复杂或者异常的操作会导致用户流失。早在2015年就有分析指出[2],H5层级越深流失率也越大。既要保证传播的内容,也要减少用户流失,6-10页的H5是比较合适的。

图片 15

SVG 线条动画实现圆形进度条

See the Pen
svg线条动画实现圆形进度条 by
Chokcoco (@Chokcoco) on
CodePen.

三、元素

5- 最受欢迎的H5形式

H5小游戏曾在朋友圈风靡一时。而2016年刷屏的H5小游戏就没有那么多了,这与微信对诱导分享H5严控有直接关系。1000个高访问量的H5中,以故事营销为主题的H5作品最受用户亲睐,其中包括品牌故事、人生哲学等鸡汤软文的形式展现。内容仍是王道,好的内容更容易被用户接受。

图片 16

多 SVG 图形线条动画配合

之前我司一个 h5
里面应用过的,多SVG 图形线条动画配合,可以制作一些比较酷炫的动画,很有科技感。

图片 17

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

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

下篇文章将会详述非规则图形,如何使用 PS + AI 生成 path 路径,实现 SVG
动画,放个 Demo,敬请期待。

图片 18

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

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

打赏作者

基础形状

SVG中提供了很多基础元素可以用来绘制基础的形状,譬如矩形、圆形、椭圆、多边形、折线、线条、路径等,同时可以将这些基础形状组合绘制出复杂的图像。

图片 19

以上基础形状的展示效果可以通过这些代码表示出来,详细见下:

See the Pen SVG Basic_Shapes by
Tw93 (@tw93) on CodePen.

3. 运营目标与受众需求

在设计一个H5之前,首先要明确的是我们的运营目标和受众需求。运营目标会依据最终目的有所不同,针对的受众也有可能因为运营目标不同而发生变化。成功的运营应当是通过满足受众的某种需求,最终实现运营目的。过多倾向于用户,会导致PV上升而CV低迷;过多倾向于运营推广而忽略受众需求,会失去流量最终也达不到目标。

图片 20

举一个反例,曾一度刷爆朋友圈的著名H5《吴亦凡要入伍》,其通过视频展示的方式很有创意,吴亦凡的帅气形象也深得很多粉丝的心。然而这真的是一支成功的H5吗?如果没有特别注意,很容易误认为这个H5主要是为腾讯新闻做宣传。因为除了腾讯新闻的标题以外,H5的宣传目标“全民突击”游戏名只出现在了结束页的左上角,以及吴亦凡视频的口头描述中。虽然满足了受众(粉丝们)欣赏偶像的需求,可是宣传推广“全民突击”的运营需求却没有真正完成。

图片 21

长按下方二维码打开H5

图片 22

总的来说一款H5产品是需要仔细打磨的,但大部分失败的制作者期望高、投入少、时间急还不动脑,想靠一款粗糙的H5产品来引爆朋友圈。这种思维在当下H5产品竞争中毫无可取之处,唯有真正从产品与用户两个角度出发才能尽量避免产品的失败。

 

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

任选一种支付方式

图片 23
图片 24

1 赞 10 收藏
评论

发表评论

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

标签:,
网站地图xml地图