现学现卖之svg动画

十一长假。。没有出去玩,在家窝了6天,好无聊,忽然想起节前同事有个svg动画遇到点问题。大致需求就是两个点用一个曲线带箭头连接起来。。。看起来像是笔画的一样。额恕我言语匮乏。。。描述的不好,看起来很好玩的样子。。这就搜刮点资料看看能不能搞定。。。 svg的语法实在是恶心爆了。。。 额先搜刮资料吧。。svg的东西记得很久前看张鑫旭的文章有讲过。。翻翻超级强大的SVG SMIL animation动画详解svg animateMotion是关键

然后我们需要画一个path然后再画个箭头根据这个path来运动就好了。 曲线嘛不外乎圆形,椭圆形,贝塞尔曲线。嗯贝塞尔曲线是首选。看起来比较平滑。

贝塞尔曲线

<path d="M10 80   Q 95 10 180 80" stroke="#000" fill="transparent" class="path"   /><path d="M10 80   Q 95 10 180 80" stroke="#000" fill="transparent" class="path"   />

让他动起来-路径描边

恩搜一下 svg line 动画现学现卖之svg动画 第1张第二个看起来就是现学现卖之svg动画 第2张关键代码如下

<style> </style><style>
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>

好了现在我们的svg终于动起来了

<style> </style> <svg id="svg"  >   <path d="M10 80   Q 95 10 180 80" stroke="#000" fill="transparent" class="path"   />  </svg><style>
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>
<svg id="svg"  >
  <path d="M10 80   Q 95 10 180 80" stroke="#000" fill="transparent" class="path"   /> 
</svg>

接下来画个箭头

箭头其实很简单一个path就好了。 习惯性搜索一下。哇,原来还可以在元素尾部,头部,中间都加箭头,学习了 marker-start="url(#marker-id)" marker-mid="url(#marker-id)" marker-end="url(#marker-id)" 代码如下

 <defs>
  <marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
    <path d="m0,0 l0,9 l8,4 " style="fill: #000000;" />
    </path>
  </marker>
</defs>
 <line x1="0" y1="0" x2="0" y2="0"  stroke="#000000" stroke-width="1" marker-end="url(#markerArrow)"  >
     <animateMotion path="M10 80  Q 95 10 180 80" begin="0s" dur="1s" to="180 80" rotate="auto" fill="freeze" calcMode="linear" repeatCount="1"/>
 </line>

原谅我的箭头画的那么难看。。。。 这里注意 关键字fill="freeze"  这个是控制箭头最终会锁定在动画截止的位置,否则就会回到原点。。。 恩来几张path的动画现学现卖之svg动画 第3张

现学现卖之svg动画 第4张参考文档:

http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

http://www.webhek.com/how-svg-line-animation-works/

最后附上整个代码

<style>
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>
<svg id="svg"  > 
  <path d="M10 80   Q 95 10 180 80" stroke="#000" fill="transparent" class="path"   /> 

  <defs>
  <marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
    <path d="m0,0 l0,9 l8,4 " style="fill: #000000;" />
    </path>
  </marker>
</defs>
 <line x1="0" y1="0" x2="0" y2="0"  stroke="#000000" stroke-width="1" marker-end="url(#markerArrow)"  >
     <animateMotion path="M10 80  Q 95 10 180 80" begin="0s" dur="1s" to="180 80" rotate="auto" fill="freeze" calcMode="linear" repeatCount="1"/>
 </line>
</svg>

现学现卖之svg动画 第5张

本文标题:现学现卖之svg动画
本文链接:https://56way.com/p/88.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。