SVG动画研究

小溪里

2019-05-16

目录

  • SVG简介
  • SVG基本形状
  • CSS动画优化
  • SVG动画技巧
  • 我还想说

SVG 简介

概念

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

特点

  • SVG 易读取或修改
  • SVG 与 JPEG 和 GIF 相比,尺寸更小,可压缩性更强
  • SVG 是矢量的,可被高质量打印
  • SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

关注点

  • 矢量
  • 文件小
  • 多色支持,可以随时变色
  • 动画可与CSS、JS配合
  • 兼容IE9

行业用法

  • 矢量图
    • 背景图或者图标,如苹果官网logo、Antd Icon
  • SVG 动画,更多可能性
    • 纯CSS动画
    • SVG动画
  • SVG Sprite
    • symbol 定义形状,以id命名并使用,
    • CC这边业务相对分散,图标尚未集中管理


SVG基本形状

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

矩形 与 圆角矩形




						

圆 与 椭圆

							


							
						

线 与 多变形 与 折线





						

路径 效果



						

路径 参数

其中 大写命令坐标是绝对位置,小写命令坐标是相对位置。

CSS CSS动画优化

CSS属性中,transform、opacity 性能好

移动
大小变化
转动
3D
淡入淡出
大小变化 + 转动 + 淡入淡出
颜色变化
阴影效果
裂开

Zebra UI 动画效果

Zebra 动画效果

动画调优实例-搜索广告位

V1 Height
桌面Chrome上动画效果OK,但是iPhone 6S 或者安卓手机上出现抖动

V2 translate3d
页面整体平移,在屏幕外的交互要格外注意

V3 touch代替scroll
iPhone上touchend后的内部滚动完成后不会触发scroll

动画调优示例-intro页展开动画

height、padding、margin等会导致重排。
分析动画的元素,防止多余的元素也重新生成,比如cloneElement。


折叠面板示例   CCtalk官方活动群

SVG 动画技巧

跟普通CSS Animation那样写动画

transform 和 rotate

描边动画 - 遮罩和路径

SVG 描边属性并不太可控

stroke-dasharray 和 stroke-dashoffset


.ui-stroke-line-example {
	stroke-dasharray: 100;
	stroke-dashoffset: -20;
}

描边动画 - 播放器icon

SVG 动画兼容性

化简为繁 - 图形变换即可

// 图形变换
transform: rotate(-45deg) skew(15deg, 15deg) translate(-21%, -27%) scale(1.1);
// 路径的转角处使用的形状或者绘制的基础形状 为 圆形
stroke-linejoin: round
// 增加描边,来突出转角处的圆角
stroke-width: 30;

小结

  • Svg Smil Animation 要被废弃,如底部的代码
  • Svg动画兼容性:在SVG 1.1中,圆的半径是 attribute而不是 CSS property。safari和Firefox支持不够好
  • Svg 矢量图形,CSS动画,可以操作的属性有stroke-width,fill, transform,opacity等,但不建议操作半径、路径等
// sSvg Smil Animation示例:

我还想说

CCtalk 这边的用法

  • 背景图:默认2x图,当设计提出需要搞定时,可以用svg代替;其实图标可以直接用svg
  • svg动画:精巧的动画,无需借助第三方动画库即可实现
  • SVG Sprite 需要与设计沟通,出一系列的矢量图

未来的想法

  • 深入研究svg
  • Canvas的图形和动画