实现路径动画SMIL或offset-path和canvas

路径动画在增强用户体验过方面还是挺有用的。当然你也可以用个gif图来实现,gif是万能的,但是前提是一定要满足业务对页面性能的要求。我们这里主要介绍的是现有的技术方案。

SVG SMIL animation

SMIL(Synchronized Multimedia Integration Language,同步多媒体集成语言)的首字母缩写简称,是有标准的。

SMIL允许你做下面这些事情:

  • 动画元素的数值属性(X, Y, …)
  • 动画属性变换(平移或旋转)
  • 动画颜色属性
  • 沿着运动路径运动

比如:

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="160" x="160">fed123.com</text>
    <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
  </g>
</svg>

展示出来就是下面的样子
fed123.com

看起来效果不错哈,兼容性也很好。

 

再给一个按照路径移动的例子:

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">fed123.com
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" rotate="auto" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>
fed123.com

还有个优点是SMIL的动画是可以组合展示的,而且可以通过Javascript DOM API 操作动画启动和停止。

// svg指当前svg DOM元素
// 暂停
svg.pauseAnimations();

// 重启动
svg.unpauseAnimations()

具体的使用方法参考:SVG Animation   SMIL Animation

PS:SMIL动画都是在CPU上运行的, 性能需要考量。

CSS offset-path

“SVG SMIL animation”虽然强大,但是由于是基于HTML属性生成的各类效果,因为就容易存在复用的问题,例如不同的位置的不同元素的不规则路径动画是一样的,那么我在设置的时候,要么冗余啰嗦,要么交叉不利于维护,有点早些年在HTML标签上写style样式的味道。

或许是这个原因,Chrome浏览器开始有了放弃“SVG SMIL animation”的迹象,转而拥抱经过几十年成功验证的CSS来实现,offset-path几乎可以看成是Chrome浏览器让元素沿着不规则路径运动的新宠儿。但毕竟是新宠儿,因此,相比较“SVG SMIL animation”,其兼容性还是差了两条街的。

之前叫motion-path,后来改成offset-path,看官方文档。先给个例子:

// CSS
.horse-run {
    /* 之前语法 始于2015年9月,M58版本会移除,大约2017年4月 */
    motion-path: path("M10,80 q100,120 120,20 q140,-50 160,0");
     
    /* 当前规范上的语法 2016年12月支持 */
    offset-path: path("M10,80 q100,120 120,20 q140,-50 160,0");

    animation: move 3s linear infinite;
}

@keyframes move {
  /* 之前语法 */
  100% { motion-offset: 100%;}
  /* 当前规范语法 */
  100% { offset-distance: 100%;}
}
// HTML代码:
<img src="horse.png" width="40" height="43" class="horse-run">
<svg width="280" height="150" viewBox="0 0 280 150">
    <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

展示效果:

fed123.com

 

Canvas结合SMIL

其实只要有path路径,canvas能做任何事情。怎么运动都是小kiss。先给个库:canvas2svg ,这个库做的很好。但是我们在开发中可能不需要这么复杂的功能,我做了一个精简版,这里主要用于通过canvas自动获取形状轮廓的svg path,这样就可以做轮过动画了。

项目:canvas-svg-path,    可以先看下在线例子:https://chalecao.github.io/canvas-svg-path/demos/

这个方案是先用canvas获取边界,生成path路径,然后通过smil来做动画,但是有个明显的问题,就是SMIL动画都是在CPU上运行的,这样性能肯定不好。

Canvas粒子动画

以绘制圆角矩形的loading动画为例,已知宽W, 高H和圆角半径R(R <= H/2),假设loading的线宽是2px,那么可以计算圆角矩形的周长L:

L = 2 * W + 2 * pi * R + 2(H-R)

由于线宽是2px,那么总共粒子数量N:

N = L / 2

可以计算所有粒子的坐标W:

W = [{x1,y1},{x1,y1},{x1,y1} … ]

假设要用10个粒子绘制动画,计算每个粒子的颜色,然后按照W来运动就好了。

fed123版权所有,转载请保留出处:前端123学堂 » 实现路径动画SMIL或offset-path和canvas

赞 (1) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏