持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情
前言
大家好，我是小杜杜，今天说点比较有趣的事情，简单介绍一下我们公司的五大萌宠，有喜欢萌宠的可以在评论区留言，可以帮各位代购哦～
今天来看看我们公司的五大萌宠之潮流款:
五大萌宠
金钱豹
眼镜蛇
清洁鱼
大雁
火狐
隐藏款
当然这款盲盒还有隐藏款：
勾勒
我们的五大萌宠是不是很萌，这只是其中的一款（潮流款），每一个都是盲盒，不知道有没有人喜欢它们～
我们将它们的外形一一勾勒出来，做一个专属于它们的动画，这里的主角自然是我们的隐藏款金钱豹
svg
SVG：是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。
这里关于svg的使用就不过多介绍，我们主要使用path这个标签，可以参考：SVG <path>
可以知道我们要想勾勒出金钱豹，其中路径是一个很难的点，所以这里需要借助工具去完成，windows 可以使用 PS、AI，Mac可以使用 Boxy SVG，来获取对应的路径
我们要做的是就是将照片放入图像中，再用笔描绘出，像这样：
然后我们勾勒出它的全身：点击copy
就能得到它的路径了，（可以看出我的PS水平确实不好🤔），这里我们只需要复制路径的d即可
然后我们将其填充的颜色去除，并添加描边：
.path {
stroke-width:1;
stroke: rgba(85, 85, 160, 0.4);
fill: none;
}
效果：
获取线段长度
我们要想让动画联动起来，就必须要知道这段路径的长度，我们通过 ref获取下就ok了
useEffect(() => {
let length = ref.current.getTotalLength();
console.log(length);
}, [])
return (
...
<path ref={ref} d={...} />
...
)
制作动画
制作动画还是需要使用animation属性，又不会使用的可以参考下之前的这篇：女朋友都喜欢的css特效：手机充电
这里需要使用stroke-dasharray这个属性来控制线段的长度，再通过fill来控制它的填充颜色即可,像这样：
.Index {
width:200px;
margin: 20px auto;
height: 400px;
.path {
stroke-width:1;
stroke: rgba(85, 85, 160, 0.4);
fill: none;
animation: move 5s ease-out infinite;
}
}
@keyframes move {
0% {
stroke-dasharray: 0, 1159;
}
50% {
stroke-dasharray: 1159, 1159;
fill: rgba(0, 0, 0, 0);
opacity: 1;
}
100% {
stroke-dasharray: 1159, 1159;
fill: rgba(85, 85, 160, 0.4);
opacity: 0;
}
}
效果：
完整代码：
import React, {useEffect, useRef} from 'react';
import './index.less'
const Index:React.FC<any> = (props)=> {
const ref = useRef<any>(null)
useEffect(() => {
let length = ref.current.getTotalLength();
console.log(length);
}, [])
return (
<div className="Index">
<svg width="400" height="800">
<path ref={ref} className="path" fill="none" d="M 172.95 105.45 C 175.559 104.414 180.779 102.341 186.77 100.956 C 192.761 99.571 199.523 98.875 203.755 96.975 C 207.986 95.076 209.686 91.973 211.821 90.55 C 213.957 89.126 216.527 89.38 217.819 91.281 C 219.111 93.182 219.123 96.728 222.594 99.391 C 226.065 102.054 232.993 103.833 238.277 105.831 C 243.561 107.829 247.201 110.046 251.506 109.163 C 255.811 108.281 260.781 104.298 267.4 102.51 C 274.018 100.722 282.283 101.127 287.974 103.182 C 293.664 105.236 296.778 108.94 298.281 113.522 C 299.783 118.103 299.674 123.564 297.685 128.226 C 295.697 132.889 291.829 136.754 289.426 139.3 C 287.022 141.845 286.081 143.071 287.054 145.3 C 288.027 147.528 290.912 150.76 292.412 153.679 C 293.911 156.598 294.025 159.204 296.257 163.089 C 298.489 166.973 302.84 172.135 306.245 178.593 C 309.651 185.051 312.11 192.805 313.049 200.486 C 313.987 208.167 313.405 215.775 310.058 223.638 C 306.712 231.502 300.601 239.62 294.783 245.062 C 288.965 250.503 283.438 253.267 276.754 255.648 C 270.07 258.03 262.228 260.028 256.757 260.929 C 251.285 261.829 248.185 261.632 246.727 262.342 C 245.268 263.051 245.453 264.669 247.788 265.842 C 250.122 267.015 254.608 267.743 260.546 271.62 C 266.485 275.497 273.876 282.521 278.469 289.411 C 283.061 296.3 284.855 303.054 287.4 306.784 C 289.945 310.515 293.241 311.221 298.663 311.695 C 304.084 312.169 311.63 312.41 316.215 313.602 C 320.801 314.794 322.426 316.936 320.506 321 C 318.587 325.063 313.122 331.046 306.661 337.288 C 300.2 343.529 292.741 350.029 288.546 354.11 C 284.351 358.192 283.42 359.856 281.661 361.175 C 279.902 362.493 277.317 363.466 275.009 363.874 C 272.702 364.282 270.672 364.125 268.602 365.467 C 266.533 366.809 264.422 369.649 262.33 371.954 C 260.238 374.258 258.164 376.026 257.033 380.112 C 255.902 384.197 255.713 390.6 255.478 395.125 C 255.243 399.65 254.962 402.296 251.677 403.62 C 248.393 404.943 242.105 404.943 236.38 404.816 C 230.655 404.69 225.493 404.437 222.637 402.823 C 219.781 401.209 219.231 398.233 219.614 395.685 C 219.997 393.136 221.313 391.013 221.627 388.866 C 221.942 386.719 221.255 384.547 219.102 380.977 C 216.948 377.406 213.328 372.437 210.22 370.016 C 207.113 367.595 204.519 367.721 202.692 369.35 C 200.864 370.978 199.803 374.109 199.216 378.129 C 198.629 382.15 198.515 387.06 198.217 391.114 C 197.918 395.168 197.435 398.364 194.569 400.287 C 191.704 402.21 186.456 402.86 181.251 403.128 C 176.045 403.396 170.88 403.283 167.085 402.82 C 163.289 402.357 160.861 401.545 159.843 399.293 C 158.825 397.04 159.217 393.349 159.411 390.161 C 159.606 386.974 159.603 384.29 159.133 381.845 C 158.662 379.399 157.722 377.192 156.712 373.826 C 155.701 370.46 154.618 365.935 154.191 358.61 C 153.763 351.285 153.991 341.159 153.527 339.38 C 153.064 337.6 151.91 344.167 150.471 348.701 C 149.033 353.235 147.309 355.737 144.612 356.853 C 141.916 357.97 138.245 357.701 136.059 356.086 C 133.873 354.47 133.17 351.508 132.493 348.256 C 131.815 345.003 131.162 341.462 131.105 338.169 C 131.049 334.877 131.588 331.834 132.024 328.941 C 132.46 326.047 132.792 323.304 134.448 319.094 C 136.103 314.884 139.082 309.208 140.6 303.846 C 142.118 298.484 142.174 293.437 143.853 288.325 C 145.532 283.214 148.832 278.038 150.692 273.963 C 152.552 269.887 152.972 266.91 149.123 262.134 C 145.275 257.358 137.159 250.781 131.03 246.216 C 124.9 241.651 120.757 239.097 116.471 237.443 C 112.184 235.79 107.755 235.036 103.495 234.606 C 99.235 234.176 95.144 234.07 93.192 232.594 C 91.24 231.118 91.426 228.273 92.986 225.938 C 94.546 223.603 97.479 221.779 100.998 220.769 C 104.516 219.759 108.62 219.563 111.733 219.488 C 114.845 219.413 116.968 219.457 118.917 219.578 C 120.866 219.698 122.643 219.895 121.089 217.913 C 119.535 215.931 114.65 211.771 111.059 206.354 C 107.468 200.937 105.169 194.262 104.094 186.931 C 103.018 179.6 103.166 171.611 105.479 164.287 C 107.792 156.963 112.27 150.302 117.774 144.639 C 123.277 138.976 129.805 134.309 133.119 129.663 C 136.432 125.016 136.531 120.388 138.317 116.404 C 140.103 112.419 143.577 109.076 147.348 106.9 C 151.119 104.723 155.189 103.711 159.07 103.837 C 162.952 103.962 166.646 105.225 168.493 105.856 C 170.34 106.487 170.34 106.487 170.34 106.487 C 170.34 106.487 170.34 106.487 172.95 105.45" ></path>
</svg>
</div>
);
}
export default Index;
最后
大家可以配合这个效果去勾勒出一些吉祥物之类的，其中最有趣的用途是勾划个性签名，当然你的PS基础要好点～～
🤔🤔🤔...，想起来了，我是一名React，所以最近更一些有关React的文章：
其实这两篇文章质量还是特别高的，需要有React一些基础的伙伴阅读，相信一定会帮助到各位，之后也会继续更新有关React，还希望多多支持下～
另外，祝大家端午安康，还希望各位小伙伴对我的React文章多多支持，喜欢的点个👍支持一下吧～
