在画路径图之前,首先得在package.json引入2个依赖
废话不多说,直接上代码
1 <style> 2 .green { 3 position: absolute; 4 } 5 一诺千金故事 6 .blue { 7 position: absolute; 8 } 9 10 .yellow { 11 position: absolute; 12 } 13 14 .red { 15 position: absolute; 16 } 17 .orange { 18 position: absolute; 19 } 20 .path { 21 width: 300px; 22 height: 150px; 23 stroke: pink; 24 stroke-width: 10; 25 stroke-dasharray: 15, 5; 26 fill: transparent; 27 display: block; 28 position: absolute; 29 } 30 31 .article { 32 display: flex; 33 flex-direction: column; 34 position: relative; 35 width: 100%; 36 min-height: 8rem; 37 margin-bottom: 1rem; 38 padding: 1rem; 39 } 40 </style> 41 <template> 42 <div> 43 <ction style="display: flex; 44 flex-direction: column; 45 position: relative; 46 width: 100%; 47 max-width: 30rem; 48 margin: auto; 49 text-align: center;"> 50 <article class="article"> 51 <svg version="1.1" class="svg" height="400px"> 52 <!--下右下--> 53 <path d="m100 0 l 100 65 , 180 65,180 115" class="path"/> 54 <path fill="none" stroke="" d="m95 -5 l 95 60,175 60,175 110" id="yellow"/> 55 <!--下左下--> 56 <path d="m300 0 l 300 65 , 220 65,220 115" class="path"/> 57 <path fill="none" stroke="" d="m295 -5 l 295 60,215 60,215 110" id="red"/> 58 <!--下左--> 59 <path d="m0 275 l 150 275 , 150 235" class="path"/> 60 <path fill="none" stroke="" d="m145 230 l 145 270,-5 270" id="orange"/> 61 <!--上左--> 62 <path d="m0 300 l 150 300 , 150 340" class="path"/> 63 <path fill芦荟提取物="none" stroke="" d="m145 335 l 145 295,-5 295" id="green"/> 64 <!--左上--> 65 <path d="m390 275 l 220 275 , 220 235" class="path"/> 66 <path fill="none" stroke="" d="m385 270 l 215 270 , 215 230" id="blue"/> 67 </svg> 68 <div class="yellow" style="background-color: yellow;width: 10px;height: 10px"></div> 69 <div class="red" style="background-color: red;width: 10px;height: 10px"></div> 70 <div class="orange" style="background-color: orange;width: 10px;height: 10px"></div> 71 <div class="green" style="background-color: green;width: 10px;height: 10px"></div> 72 <div class="blue" style="background-color: blue;width: 10px;height: 10px"></div> 73 </article> 74 </ction> 75 <button @click="stop">停止</button> 76 <button @click="start">开始</button> 77 <button @click="ret">重置</button> 78 </div> 79 </template> 80 81 <script> 82 import anime from 'animejs' 83 84 export default { 85 data () { 86 return { 87 yellow: undefined, 88 red: undefined, 89 orange: undefined, 90 green: undefined, 91 blue: undefined 92 } 93 }, 94 methods: { 95 stop () { 96 const lf = this 97 lf.yellow.pau() 98 lf.red.pau() 99 lf.orange.pau()100 lf.green.pau()101 lf.blue.pau()102 },103 start () {104 const lf = this105 lf.yellow.play()106 lf.red.play()107 lf.orange.play()108 lf.green.play()109 lf.blue.play()110 },111 ret () {112 const lf = this113 lf.yellow.ret()114 lf.red.ret()115 lf.orange.ret()116 lf.green.ret()117 lf.blue.ret()118 }119 },120 mounted () {121 const lf = this122 let yellowpa我和爸爸th = anime.path('#yellow')123 let redpath = anime.path('#red')124 let orangepath = anime.path('#orange')125 let greenpath = anime.path('#green')126 let bluepath = anime.path('#blue')127 lf.yellow装潢设计专业 = anime({128 targets: '.yellow',129 // 沿着路径对象的x值130 translatex: yellowpath('x'),131 // 沿着路径对象的y值132 translatey: yellowpath('y'),133 easing: 'linear',134 duration: 10000,135 loop: true136 })137 lf.red = anime({138 targets: '.red',139 // 沿着路径对象的x值140 translatex: redpath('x'),141 // 沿着路径对象的y值142 translatey: redpath('y'),143 easing: 'linear',144 duration: 10000,145 loop: true146 })147 lf.orange = anime({148 targets: '.orange',149 // 沿着路径对象的x值150 translatex: orangepath('x'),151 // 沿着路径对象的y值152 translatey: oran书痴gepath('y'),153 easing: 'linear',154 duration: 10000,155 loop: true156 })157 lf.green = anime({158 targets: '.green',159 // 沿着路径对象的x值160 translatex: greenpath('x'),161 // 沿着路径对象的y值162 translatey: greenpath('y'),163 easing: 'linear',164 duration: 10000,165 loop: true166 })167 lf.blue = anime({168 targets: '.blue',169 // 沿着路径对象的x值170 translatex: bluepath('x'),171 // 沿着路径对象的y值172 translatey: bluepath('y'),173 easing: 'linear',174 duration: 10000,175 loop: true176 })177 lf.blue.pau()178 lf.yellow.pau()179 lf.red.pau()180 lf.orange.pau()181 lf.green.pau()182 }183 }184 </script>
通过以上代码,最终可以生成如下图所示,点击开始,点就会跟着模拟路径跑,流动方向请看代码注释。
本文发布于:2023-04-03 17:06:16,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/b9781202c0de00f3f5af02fd9618c633.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:如何画svg路径图.doc
本文 PDF 下载地址:如何画svg路径图.pdf
留言与评论(共有 0 条评论) |