路径动画
最编程
2024-04-28 22:44:47
...
一个元素(物体)沿着特定的路径(轨迹)进行运动。
- 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-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"/>
<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-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"/>
<circle r="3" fill="pink" id="circle"
>
<animateMotion dur="20s" repeateCount="infinite" 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" />
</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,47
c16.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-144
c30.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 路径动画简单指南