SVG—初识4

  • SVG描边动画
    • stroke-dashoffset
    • DrawSVGPlugin插件
  • 路径动画
    • CSS写路径动画
    • SVG写路径动画
    • 使用 GreenSock 来实现自行车沿着路径运动的路径动画

SVG描边动画

SVG 中实现描边动画的三个相关属性：分别是 stroke、stroke-dasharray、stroke-dashoffset

stroke-dashoffset

stroke-dashoffset 属性用来指定路径从开始位置的偏移量。通过指定偏移量会让绘制好的线偏移

原来的位置一段空白

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.line{stroke-dasharray: 600;stroke-dashoffset: 600;animation: offset 2s linear infinite;}@keyframes offset {to{stroke-dashoffset: 0;}}</style>
</head>
<body><svg width="960px" height="500px" viewBox="0 0 960 500"><g><line x1="0" x2="600" y1="0" y2="0" style="stroke: #4af;stroke-width: 20;" class="line"></line></g></svg>
</body>
</html>


升级版

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.leftLine{stroke-dasharray: 480;stroke-dashoffset: 480;animation: leftOffset 2s linear infinite;}.rightLine{stroke-dashoffset: -480;stroke-dasharray: 480;animation: offset 2s linear infinite;}@keyframes offset{to{stroke-dashoffset: 0;}}@keyframes leftOffset {to{stroke-dashoffset: 0;}}</style>
</head>
<body>
<svg width="960px" height="500px" viewBox="0 0 960 500" ><g><line x1="0" x2="480" y1="50" y2="50" style="stroke: #4af;stroke-width: 20" class="leftLine"></line><line x1="480" x2="960" y1="50" y2="50" style="stroke: #4af;stroke-width: 20" class="rightLine"></line></g>
</svg>
</body>
</html>

DrawSVGPlugin插件

借助 DrawSVGPlugin 实现了将 SVG path 从 0% 绘制到 100% 的动画效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<svg width="960px" height="500px" viewBox="0 0 960 500"><!-- 李 --><path id="mu" d="m100,100 60,0 0,-20 40,0 0,20 60,0 0,30 -40,0  50,20 -10,25 -30,-10 0,-15 -30,0 0,-10 0,16-40,0 0,-16 0,10 -32,0 0,25 0,-10 -18,6 -10,-27 50,-15 -50,0  z" style="stroke: black;stroke-width: 3;fill:none;"></path><path id="zi" style="fill:none;stroke:black;stroke-width:3;"d="m130,150 30,0 0,7 41,0 0,-6 30,0 0,16 -25,30 -30,-6 10,-20 -2,4 -85,0 0,30 80,0 -30,0 0,28 60,0 0,-28 60,0 0,-30 -44,0"></path></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>
<script>var tl=gsap.timeline({repeat: -1})tl.fromTo('#mu',{ drawSVG: "0%" },{ duration: 2, drawSVG: "100%", stagger: 0.1 },).fromTo('#zi',{ drawSVG: "0%" },{ duration: 2, drawSVG: "100%", stagger: 0.1 },)
</script>
</body>
</html>

路径动画

一个元素（物体）沿着特定的路径（轨迹）进行运动。

  • offset-path
  • offset-distance

offset-path 这个属性接受一个 path 用于指定元素的运动轨迹。
offset-distance 这个属性声明了元素沿着路径运动的距离。常用 100% 表示路径总长度。

CSS写路径动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#circle{motion-path: path('M350,256c-0.515-9.764-19.942-15.421-22-16 c-34.833-9.792-76.008,23.149-97,54c-11.012,16.184-14.476,28.861-18,28c-10.725-2.621,18.169-120.846-6-130 c-4.943-1.872-10.24,1.537-11,2c-28.123,17.131,10.803,123.874,7,125c-3.894,1.153-33.379-113.383-58-111 c-5.074,0.491-8.268,5.787-9,7c-16.968,28.134,51.378,100.063,49,102c-2.216,1.805-50.847-69.379-82-60 c-1.211,0.365-8.614,2.593-10,8c-5.281,20.594,97.167,58.424,95,64c-1.953,5.025-82.073-31.886-103-7c-0.452,0.537-6.313,7.693-4,14 c7.976,21.746,109.725-7.287,113,3c1.232,3.87-79.307,11.933-88,47c-1.889,7.621-2.411,18.488,3,22 c17.542,11.386,83.148-62.313,89-57c4.805,4.362-42.634,51.125-29,83c0.99,2.314,3.718,8.691,8,9c16.145,1.163,24.763-99.159,37-99 c7.523,0.098-5.397,92.51,20,101c4.593,1.535,10.446,0.353,14-3c19.865-18.744-34.868-102.736-28-107 c6.619-4.109,55.515,75.11,75,67c6.864-2.857,8.309-14.641,8-21c-1.723-35.487-79.577-50.644-78-57 c1.297-5.225,109.798,32.903,119,15c2.631-5.118-3.7-13.1-6-16c-26.515-33.43-107.822-5.169-109-10 C227.557,307.081,351.318,280.973,350,256z');offset-path: path('M350,256c-0.515-9.764-19.942-15.421-22-16 c-34.833-9.792-76.008,23.149-97,54c-11.012,16.184-14.476,28.861-18,28c-10.725-2.621,18.169-120.846-6-130 c-4.943-1.872-10.24,1.537-11,2c-28.123,17.131,10.803,123.874,7,125c-3.894,1.153-33.379-113.383-58-111 c-5.074,0.491-8.268,5.787-9,7c-16.968,28.134,51.378,100.063,49,102c-2.216,1.805-50.847-69.379-82-60 c-1.211,0.365-8.614,2.593-10,8c-5.281,20.594,97.167,58.424,95,64c-1.953,5.025-82.073-31.886-103-7c-0.452,0.537-6.313,7.693-4,14 c7.976,21.746,109.725-7.287,113,3c1.232,3.87-79.307,11.933-88,47c-1.889,7.621-2.411,18.488,3,22 c17.542,11.386,83.148-62.313,89-57c4.805,4.362-42.634,51.125-29,83c0.99,2.314,3.718,8.691,8,9c16.145,1.163,24.763-99.159,37-99 c7.523,0.098-5.397,92.51,20,101c4.593,1.535,10.446,0.353,14-3c19.865-18.744-34.868-102.736-28-107 c6.619-4.109,55.515,75.11,75,67c6.864-2.857,8.309-14.641,8-21c-1.723-35.487-79.577-50.644-78-57 c1.297-5.225,109.798,32.903,119,15c2.631-5.118-3.7-13.1-6-16c-26.515-33.43-107.822-5.169-109-10 C227.557,307.081,351.318,280.973,350,256z');animation: rao 20s linear infinite;}@keyframes rao{100% {motion-offset: 100%;offset-distance: 100%;}}</style>
</head>
<body>
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"y="0px" viewBox="0 0 595.276 841.89" style="enable-background:new 0 0 595.276 841.89;" xml:space="preserve" background-color="#00447F"><path id="road" style="fill:none;stroke:#4af;stroke-miterlimit:10;" d="M350,256c-0.515-9.764-19.942-15.421-22-16c-34.833-9.792-76.008,23.149-97,54c-11.012,16.184-14.476,28.861-18,28c-10.725-2.621,18.169-120.846-6-130c-4.943-1.872-10.24,1.537-11,2c-28.123,17.131,10.803,123.874,7,125c-3.894,1.153-33.379-113.383-58-111c-5.074,0.491-8.268,5.787-9,7c-16.968,28.134,51.378,100.063,49,102c-2.216,1.805-50.847-69.379-82-60c-1.211,0.365-8.614,2.593-10,8c-5.281,20.594,97.167,58.424,95,64c-1.953,5.025-82.073-31.886-103-7c-0.452,0.537-6.313,7.693-4,14c7.976,21.746,109.725-7.287,113,3c1.232,3.87-79.307,11.933-88,47c-1.889,7.621-2.411,18.488,3,22c17.542,11.386,83.148-62.313,89-57c4.805,4.362-42.634,51.125-29,83c0.99,2.314,3.718,8.691,8,9c16.145,1.163,24.763-99.159,37-99c7.523,0.098-5.397,92.51,20,101c4.593,1.535,10.446,0.353,14-3c19.865-18.744-34.868-102.736-28-107c6.619-4.109,55.515,75.11,75,67c6.864-2.857,8.309-14.641,8-21c-1.723-35.487-79.577-50.644-78-57c1.297-5.225,109.798,32.903,119,15c2.631-5.118-3.7-13.1-6-16c-26.515-33.43-107.822-5.169-109-10C227.557,307.081,351.318,280.973,350,256z"/><circle  r="3" fill="pink" id="circle"></circle>
</svg>
</body>
</html>

SVG写路径动画

svg使用的是animateMotion元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"y="0px" viewBox="0 0 595.276 841.89" style="enable-background:new 0 0 595.276 841.89;" xml:space="preserve" background-color="#00447F"><path id="road" style="fill:none;stroke:#4af;stroke-miterlimit:10;" d="M350,256c-0.515-9.764-19.942-15.421-22-16c-34.833-9.792-76.008,23.149-97,54c-11.012,16.184-14.476,28.861-18,28c-10.725-2.621,18.169-120.846-6-130c-4.943-1.872-10.24,1.537-11,2c-28.123,17.131,10.803,123.874,7,125c-3.894,1.153-33.379-113.383-58-111c-5.074,0.491-8.268,5.787-9,7c-16.968,28.134,51.378,100.063,49,102c-2.216,1.805-50.847-69.379-82-60c-1.211,0.365-8.614,2.593-10,8c-5.281,20.594,97.167,58.424,95,64c-1.953,5.025-82.073-31.886-103-7c-0.452,0.537-6.313,7.693-4,14c7.976,21.746,109.725-7.287,113,3c1.232,3.87-79.307,11.933-88,47c-1.889,7.621-2.411,18.488,3,22c17.542,11.386,83.148-62.313,89-57c4.805,4.362-42.634,51.125-29,83c0.99,2.314,3.718,8.691,8,9c16.145,1.163,24.763-99.159,37-99c7.523,0.098-5.397,92.51,20,101c4.593,1.535,10.446,0.353,14-3c19.865-18.744-34.868-102.736-28-107c6.619-4.109,55.515,75.11,75,67c6.864-2.857,8.309-14.641,8-21c-1.723-35.487-79.577-50.644-78-57c1.297-5.225,109.798,32.903,119,15c2.631-5.118-3.7-13.1-6-16c-26.515-33.43-107.822-5.169-109-10C227.557,307.081,351.318,280.973,350,256z"/><circle  r="3" fill="pink" id="circle"><animateMotion dur="20s" repeateCount="infinite" path="M350,256c-0.515-9.764-19.942-15.421-22-16c-34.833-9.792-76.008,23.149-97,54c-11.012,16.184-14.476,28.861-18,28c-10.725-2.621,18.169-120.846-6-130c-4.943-1.872-10.24,1.537-11,2c-28.123,17.131,10.803,123.874,7,125c-3.894,1.153-33.379-113.383-58-111c-5.074,0.491-8.268,5.787-9,7c-16.968,28.134,51.378,100.063,49,102c-2.216,1.805-50.847-69.379-82-60c-1.211,0.365-8.614,2.593-10,8c-5.281,20.594,97.167,58.424,95,64c-1.953,5.025-82.073-31.886-103-7c-0.452,0.537-6.313,7.693-4,14c7.976,21.746,109.725-7.287,113,3c1.232,3.87-79.307,11.933-88,47c-1.889,7.621-2.411,18.488,3,22c17.542,11.386,83.148-62.313,89-57c4.805,4.362-42.634,51.125-29,83c0.99,2.314,3.718,8.691,8,9c16.145,1.163,24.763-99.159,37-99c7.523,0.098-5.397,92.51,20,101c4.593,1.535,10.446,0.353,14-3c19.865-18.744-34.868-102.736-28-107c6.619-4.109,55.515,75.11,75,67c6.864-2.857,8.309-14.641,8-21c-1.723-35.487-79.577-50.644-78-57c1.297-5.225,109.798,32.903,119,15c2.631-5.118-3.7-13.1-6-16c-26.515-33.43-107.822-5.169-109-10C227.557,307.081,351.318,280.973,350,256z" /></circle>
</svg>
</body>
</html>

使用 GreenSock 来实现自行车沿着路径运动的路径动画

GreenSock 中使用 MotionPathPlugin 实现路径动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<svg width="960px" height="500px" viewBox="0 0 960 500" style="background-color: #ffff;"><g id="road" ><path id="biking-road" style="fill:none;stroke:#000000;stroke-miterlimit:10;stroke-dashoffset: 10;stroke-dasharray: 10;stroke:#4af;" d="M71.5,154.5c19.944,33.545,51.705,52.349,79,47c16.142-3.163,27-14,27-14c22.186-22.141,13.674-57.487,21-59c10.209-2.108,22.412,67.432,43,69c30.372,2.313,53.208-145.267,82-144c30.598,1.347,29.726,169.119,70,176c21.385,3.654,55.033-37.943,110-183"/></g>
</svg>
<svg id="person-biking" x="0" y="0" viewBox="0 0 72 72" version="1.1" width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g><g id="color"/><g id="hair"/><g id="skin"><circle cx="34.3857" cy="11.0625" r="2.9687" fill="#FCEA2B" stroke="none"/><polyline fill="#FCEA2B" stroke="none" points="34.3857,20.9248 36.417,18 40.25,18.084 46.457,32.2344 44.417,36 41.8896,38.5137 38.7705,49.668 35.3643,56.418 32.96,54.3809 33.8789,47.3027 30.1084,40.3262 30.2051,37 38.25,32 35.3643,24.5"/></g><g id="skin-shadow"/><g id="line"><circle cx="34.3857" cy="11.0625" r="2.9687" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/><path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M26.333,28.083l4.2705-2.9473c0.9053-0.6245,2.1602-1.875,2.7871-2.7783l1.8858-2.7148c0.6269-0.9033,2.0029-1.6236,3.0576-1.6006 c1.0537,0.0229,2.2773,0.8662,2.7197,1.8735l4.5996,10.4868c0.4424,1.0079,0.375,2.6231-0.1494,3.5909l-0.1338,0.248 c-0.5244,0.9678-1.7803,2.1143-2.79,2.5498l-5.4922,2.3633c-1.0098,0.4355-1.4922,1.6221-1.0713,2.6387l2.6348,6.3593 c0.4209,1.0166,0.0908,2.2979-0.7344,2.8477c-0.8252,0.5498-1.9277,0.208-2.4512-0.7598l-4.4062-8.1543 c-0.5235-0.9677-0.9297-2.5078-0.9033-3.4228c0.0273-0.9151,0.8134-2.1377,1.747-2.7188l4.6485-2.8886 c0.9336-0.5811,1.4795-1.9287,1.2128-2.9961L36.25,24"/><circle cx="20.084" cy="52" r="10.166" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/><circle cx="52.084" cy="52" r="10.166" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/><polyline fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="20.25,52 22.25,28 26,28"/><path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2" d="M37.9785,50.959l-0.9844,3.1328 C36.6641,55.1416,35.5742,56,34.5723,56c-1.002,0-1.7071-0.8926-1.5655-1.9834l0.8692-6.7178"/><line x1="42.4072" x2="38.7705" y1="36.8652" y2="48.4395" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-width="2"/></g></g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js"></script>
<script>gsap.registerPlugin(MotionPathPlugin);gsap.to("#person-biking",{duration: 3.3,repeat: -1,ease: Linear.easeNone,motionPath:{path: "#biking-road",align: "#biking-road",autoRotate: true,alignOrigin: [0.5, 0.5]}})
</script></body>
</html>

SVG—初识4之描边动画和路径动画相关推荐

  1. Threejs开发之移动动画、旋转动画、缩放动画和路径动画

    以下代码 示例了threejs的移动动画.旋转动画.缩放动画和路径动画 注意:引入three.js三维引擎的路径需要根据 自己的情况修改相应的路径,本示例采用引用外部模块的方式. 以下为完整代码: & ...

  2. SVG互动排版公众号图文『路径动画与描边动画』模板代码

    模板代码 <section style="overflow: hidden;line-height: 0;" data-author="公众号:懂点君"& ...

  3. PathMeasure 轨迹动画神器 路径动画

    PathMeasure 轨迹动画神器 轨迹动画一般利用SVG来实现,或者使用属性动画,自定义估计值,根据两点之间的线性关系式计算坐标(复杂) 但是使用PathMeasure来进行绘制轨迹动画,so e ...

  4. WPF 动画之路径动画DoubleAnimationUsingPath

    虽然一直在做WPF开发, 但是实际项目中很少用到动画,今天突然想要撸一撸,  于是便有了下面的代码 <Window.Resources><PathGeometry x:Key=&qu ...

  5. 三维场景中常用的路径动画

    三维场景中常用的路径动画 前言 在三维场景中,除了用逼近真实的模型代表现实中的设备.标识物外,通常还会使用一些动画来表示模型在现实中一些行为和作用.常见的动画比如路径动画.旋转动画.发光动画.流动动画 ...

  6. osgEarth AnimationPath路径动画

    目录 飞机飞行实例 路径动画暂停 路径动画继续 osgEarth 视角跟踪飞机飞行 相机跟踪飞机移动 视角移动到特定地点 osg::AnimationPath 封装了一个随时间变化的过程,可以用来更新 ...

  7. 咸鱼Maya笔记—路径动画

    咸鱼Maya笔记-路径动画 创建路径动画 动画的创建方式有很多种,路径动画是其中的一种,Key关键帧的方式并不适用于所有的情况,有些特定的情况下我们就需要用到路径动画,它的创建方法如下 创建路径动画 ...

  8. SVG—初识5之SVG变形动画和阶段性学习成果展示

    SVG-初识5 SVG 变形动画 MorphSVGPlugin 多个变换 蒙版动画 阶段性学习成果 SVG 变形动画 在做形状转换的时候,转换前形状的控制点和转换后的控制点数最好相同,这样效果能好些 ...

  9. SVG—初识3之SVG动画（缓动动画、时间轴线、时间交错）

    SVG-初识3 SVG动画 使用GSAP制作动画 缓动动画 时间轴线 时间交错 SVG动画 Transform(scale.rotate.translate .skew) 路径动画 (path) 描边 ...

最新文章

  1. can口通信的软件测试,CAN通信控制程序的仿真与测试
  2. 如何实现DataGridView实时更新数据【Z】
  3. 巨蟒python全栈开发flask5
  4. java读写html文件时出现中文乱码问题的解决方法
  5. java不进入for_为什么阿里巴巴Java开发手册中强制要求不要在foreach循环里进行元素的remove和add操作？...
  6. c语言通讯录程序线性表,数据结构（C语言）课设1——单位员工通讯录管理系统（线性表应用）...
  7. 【Hadoop Summit Tokyo 2016】数据流与Apache NiFi
  8. 3.c语言结构体成员内存对齐详解
  9. java day09【继承、super、this、抽象类】
  10. Spark常用API（五）
  11. 原创 VPP使用心得（十六）静态路由添加流程
  12. IPv4与IPv6地址转换
  13. 还原永恒之蓝下载器PS脚本混淆
  14. 一个WEB应用的开发流程 供学习用！
  15. java咖啡平台,22年最新
  16. 比较LMS和RLS算法的性能
  17. [Unity存档系统]简单介绍Unity常见存档系统二JSON以及使用方法
  18. 赋科技以温度，百度集团副总裁吴甜入选《财富》“40 Under 40榜单”
  19. win 下通过dos命令格式化磁盘
  20. Java注解方法实现BigDecimal保留两位小数（案例详解）

热门文章

  1. ExaGrid在2021年网络计算大奖评选中大获全胜
  2. java读写word文档，完美解决方案
  3. D-OJ刷题日记：无向图的邻接矩阵表示法验证程序 题目编号:515
  4. 锁定计算机屏幕的快捷键是什么,计算机屏幕锁定的快捷键是什么？ -计算机
  5. 学习ios Metal(3)—宽度可调的线条的绘制
  6. 在线代码格式化网址：https://tool.oschina.net/codeformat/xml
  7. Ubuntu调用USB摄像头
  8. python猜数字游戏编程入门_Python实现猜数字游戏
  9. ad18更改原理图纸张大小
  10. 在Winform中上传文件的工具类-ResourceMgr