SVG animation animateMotion动画补充

正常我们的路径动画:

joubn

源码:

HTML
<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">joubn <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/> </text> <path d="M10,80 q100,120 120,20 q140,-50 200,0" stroke="#cd0000" stroke-width="2" fill="none" /> </svg>

反向我们的路径动画:

joubn

源码:

HTML
<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">joubn <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite" keyPoints="1;0" keyTimes="0;1" calcMode="linear"/> </text> <path d="M10,80 q100,120 120,20 q140,-50 200,0" stroke="#cd0000" stroke-width="2" fill="none" /> </svg>

如果说设计小MM给的不是path而是polygon元素呢

我们可以用SVG转换工具把任何元素转换成path

其它动画知识点看SVG SMIL animation动画详解这里

【END】

本文链接:

版权声明:本blog所有文章除声明转载外,均采用 BY-NC-SA 3.0 许可协议。转载请注明来自 简单才是真

阅读 13 | 发布于 2022-11-09
暂无评论