我正在制作一个 Gatsby 网站，其中有一个包含 SVG 元素( map )的组件，我想向其添加动画。 SVG 元素应该在一秒的间隔内一个接一个地改变颜色，然后它们应该有两秒钟的新颜色。之后动画应该刷新并重新开始。我制作了添加到特定元素的 CSS 动画，并使用了不同的动画延迟和持续时间。问题是我希望动画无限运行并且我不能使用 animation-iteration-count: infinite 原因 animation-delay 只在第一次运行。 我在考虑每次动画完成时重新渲染这个组件，但我不确定这是否是正确的方法以及如何正确地实现它。我想设置组件状态并每隔 x 秒更改一次，但我浏览了 Gatsby 文档后感到困惑，因为我发现生命周期方法与 React 中的方法不同。
也许有人可以给我一个关于如何在每次完成时刷新动画的提示。
import React from "react"
import styled from "styled-components"
const StyledMap = styled.svg`
@keyframes color {
from {
fill: #b6bac0;
}
to {
fill: #ecad1b;
}
}
#part1 {
animation-name: color;
animation-duration: 6s;
}
#part2 {
animation-name: color;
animation-duration: 5s;
animation-delay: 1s;
}
#part3 {
animation-name: color;
animation-duration: 4s;
animation-delay: 2s;
}
#part4 {
animation-name: color;
animation-duration: 3s;
animation-delay: 3s;
}
#part5 {
animation-name: color;
animation-duration: 6s;
animation-delay: 4s;
}
margin-right: 40px;
`
class Map extends React.Component {
state = {
animation: "on",
}
render() {
return (
<>
<StyledMap
xmlns="http://www.w3.org/2000/svg"
width="414"
height="389"
fill="none"
viewBox="0 0 414 389"
>
<g fill="#B6BAC0" fillRule="evenodd" clipRule="evenodd">
<path
id="part1"
stroke="#F9F9F9"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.25"
d="M121.733 72.075l-.776-1.642-.945-1.357-1.15-1.029-1.552-3.13-.982-1.175-1.743-1.262-.014-3.809-.322-3.83-2.6-7.917 5.705-1.408.651-1-.161-1.736-.769-1.073-.454-1.014.3-1.24 1.084-1.117.432-1.875-.293-3.35-1.266-2.582-3.369-4.874-2.849-5.736-.08-.153-.279.11-8.553 1.262-2.79 1.744-1.42 1.423-.843 1.678.608-.584.534-.219.235.292-.257.941-.527.606-.659.255-.41-.175.22-.686v-.43L91.7 32.075l-1.736 2.992.6-.605.36-.438.812.029.484 1.014-.528.613-1.435.671-.571.686-.645.263-.747.153-.373.139.359-.526.915-.956.513-1.043-2.527 2.977-1.699 1.11-1.406.692 2.226-.7.945.051-.08 1.124.139.102.073-.022.044.058.022.343H85.49v.518h.286v.43l-3.61.636-.886-.635 2.028-.905.513-.525-4.526 1.517-6.598.825-7.938 3.597-8.078 2.174-7.374 1.97-11.388 4.809-9.337 2.444-10.83 4.809-2.937 2.167-1.59.846-1.625.336-4.05-.336-1.252-.474-.447-.372-.674-.307-.695 1.868-.337.226-.396.117.718.883.33 1.08.095-.015.96.438 1.97 2.853.68.452.484.08.644.336.388.059.527-.11.037-.138-.564-.227v-.467l.586-.058.557-.182 1.113-.708.373.277.52-.24.425-.614.08-.839-.344-.445-.666-.299-1.223-.24.351-.453.271-.445.278-.343.36-.139.49.132.344.19.322-.103.403-.693.073.263.015.058.037.015.132.138-.52 1.35.637.708 4.54.474.974.547.564 1.175-.256.248-.374.496-.205.197.212.358.235.255.285.183.36.153-.257-.474.981-.985.315-.548.103-.831h.278l-.132 1.306-.285 1.233-.147 1.386.286 1.744-.638.03-.446.262-.403.117-.469-.409L19.15 79l-.27 1.517 1.273 3.058.469.248 1.047.094.44.132-.037.401.007.27.03.263-.564.445-.345.416-.183.642-.05 1.102-.213.204-.476-.613-1.34-2.583-.623-.89-.769-.599-2.197-.787-1.801-.307-.454-.38-.82-.882-1.113-.533-.579-.445-.483-1.335-.506-.38-.57-.284-.404-.358-.227.511.396.233.132.234-.132.24-.396.234.718.504-.051.561-.542.504-.74.314-.395.05-.008.008.052 1.934-.169 1.072.623 1.343.857 2.67.073.679-.11 2.517.03 1.518.3 1.415.995 1.54.425 1.43.857 1.445.425 3.546.864 3.984.27 1.284.067.576.022 1.234.131.671.25.438.622.525.161.387.535.489-1.07 2.101-.3.452-.432.227-.403.612-.293.832-.11.905.147 1.102.242.963.088.985-1.23 3.845-.11.569-.55 1.226-1.26 1.314-2.409 1.926-2.49 1.299-1.984 1.474v.423l.249.678.498 2.401.095.846-.168 1.277-.425.817-1.091.942.468.955.718.555.857.27.908.066.82.364 1.333 1.577 1.12.598 4.35 3.203.63.744 1.406 2.766.425.408.776.365 1.18 1.605 2.445.971 2.38 2.67.996-3.59.9-1.342 3.48-.555 2.072-.875 3.207-4.51 2.6-5.698 4.006-2.211 6.796 2.255 2.167-.307 2.512-2.918 1.56-2.948-1.12-.19-.813-1.102 2.314-.124 6.935-2.378 8.436.029 2.065-1.511 3.677-4.691 2.145-1.7 2.226-.307 2.058.453 1.077 3.327-.747 3.218 2.263.751 2.504 1.496 2.556-.35 2.512-.978 3.947-3.729 3.317-5.195 5.925-3.458 3.017-.934 1.186-1.124.96-1.707 1.259-1.554-.256-1.963-1.282-1.635-1.516-.795-3.09-.788-2.57-2.488-.63-2.437-.044-2.73.923-1.305 7.535.197 1.23-.24 1.048-4.371.791-2.255 1.076-1.875 1.465-.65 1.56-.043 1.53.488-.718-7.464 1.714-1.751 1.216-2.153-.454-1.459-.711-1.175-.82-.394-.044-1.357 2.051-.963 2.27.3z"
></path>
<path
id="part2"
stroke="#F9F9F9"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.25"
d="M317.774 273.014l-.132-.875-.205-1.387-1.04-3.954-.073-.606-.095-.226-.191-.117-.183-.168-.095-.372.051-.401.103-.19.109-.124.044-.204.301-2.802-.125-1.262-.761-.562v-.445l.293-.059.358-.167.323-.278.168-.379-.161-.876-13.094 2.715-6.774-2.116-3.149-.27-2.797-1.817-.264-.985-.176-1.08-1.223-1.379-.344-2.189-1.237-.423-1.282 1.211-1.201 1.678-1.355.766-5.69.912-4.95-1.029-1.055-.795-.864-1.379-.952-1.087-6.737-4.13-1.216-3.072-2.263-.81-1.171.876-1.502 3.707-1.362.627-1.362.212-1.296.634-2.841 2.693-1.319.379-4.525-.635-1.275.467-1.003 1.321-1.018 3.918 1.868 2.831 1.267 1.007.395 2.167-.322 2.116-.93 1.102-5.405-3.955-1.45.263-.527 2.087-.029 2.065.168 2.043-.696 1.941-1.42.948-1.187 1.102-.952 1.591 3.508.678.513.278.146.722.015.795-.198.511-2.805.46-1.537 2.911 1.12 1.335 3.083.883 1.413 1.08 1.143 2.539 1.948 2.364-1.648.248-2.819 2.372-.821 1.78 1.436.744 2.783.416 1.149.453 3.86.007 1.603.861 1.384 1.445 3.435 1.08 3.149 2.101 1.867 3.692.696 2.941.703 1.488 1.86 2.605.769 1.634 3.01 1.803 5.375.145 1.23-1.306.162-.671.505-.788 1.318-.635.571-.554.117-.336.052-.678.139-.314.168-.117.366-.022.139-.08.865-.868.256-1.095.271-.394 1.567 1.489.674-.314.556-.584.542-.35.63.416.557-.365 1.12-.109.381-.219.403-.533.344-.299.417-.161 3.039-.102.623-.168.454-.386.381-.431.388-.321 1.684-.81.41-.102.608.241.359.474.403.35.725-.153v-.102l.71-1.007.293-.219.22-.015.153-.124.044-.539.22-.336.476-.241.483-.438.22-.904.381.321.278.014.461-.335.044-.197-.044-.314-.022-.278.162-.131.585.051.14-.051 2.511-2.181.769.342 1.04-.226 1.047-.613.777-.817-.396-1.014-.161-.299 3.911-1.751 2.629-.679.747-.635 1.259-1.51.513-1 .212-1.233.293-1.007 1.941-2.306 1.172-1.955.703-.503 1.076-.176.732-.394.623-.948.483-1.153.293-1.022.337-2.539-.051-2.386z"
></path>
<path
id="part3"
stroke="#F9F9F9"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.25"
d="M240.646 295.743l-.271-1.386-1.149-.453-2.783-.416-1.436-.744.821-1.78 2.819-2.372 1.648-.248-1.948-2.364-1.143-2.539-1.413-1.08-3.083-.883-1.12-1.335 1.537-2.911 2.805-.46.198-.511-.015-.795-.146-.722-.513-.278-3.508-.678-4.445-2.262-4.101.219-1.384-.416-3.823-6.078-2.46-2.262-2.754-.511-1.413 1.226-3.266.015-2.651-.548-5.353-2.889-1.253-1.277-1.442-.285-1.296.898-1.333.627-5.786.19-2.05 1.007-1.413 4.976-.513.613-.308 1 .257 1.466.549 1.197-.293 2.291-3.2 2.058-1.099 2.305-.725 4.035-.974 2.627.791 2.445 1.084 1.473 1.326 1.015 1.31 1.408.462 2.306-5.947-.059-1.193.285-.542 1.452.454 1.131-.081 1.145-.9.423-.879.176-.374 1.306.696 8.201-.037 3.269-.439 1.853-3.962 1.853-2.453 1.861-5.163 1.073-2.431 4.757-.059 1.058v.007l.579.146 2.387 1.562-.264 1.167.535.62 2.614.497.623.342 1.289 1.11.483.218.959.197.484.358.175.35.286.985.227.423.813.664.593-.116 1.143-.993-.044-.109-.059-.073-.066-.037h-.095l1.655-.204 1.582.562 3.039 1.678h.952l1.611-1.029.608.365.249 1.146-.103.97.183.781 1.084.584-1.12 1.298.014 1.701.711 1.918.966 1.985.41 1.832.257.474.542.379 1.267.11.578.182.535.431.805.948.513.314.6-.051.638-.277.637-.11.615.453.168.496.278 2.167.191.605.483 1.095.176.569.593 2.685.117 1.299-.175 1.051 4.057.372 1.179.722-.359 1.058.044.89.197.854.11.927-.175 2.065.234.7.798.153 1.033-.08 1.581-.919.894-.212.381.131.813.591.388.197.424.03 1.026-.205 1.267-.503.292-.504.103-.78.293-1.219.117-.029.505-.007.176-.139.103-.416-.081-.299-.132-.19-.073-.073.659-2.036.557-.89.593-.569.674-.328.783-.168 1.26.015.425-.073.578-.234.308-.263 3.551-3.91.154-.314.235-.102.227.094v-.007l-.213-.729-.959-.65-.52-1.138.344-1.314.696-1.408.139-1.656-2.768-.489-1.531-.693-1.325-1.24-.623-1.941-.827-1.518-2.087-.817-1.223-2.189-.088-2.116-.879-1.102-1.084-.117-.827-1.072.468-2.124.908-1.86.901-1.321 9.703-10.879-1.904-2.641-2.175-2.167 1.289-1 2.732.387 1.779-2.532 1.135-2.284 1.099-1.634 2.27 1.306 1.047-.008 1.04-.233 3.625-2.817 2.248-.35 2.292.183 1.297-.205 5.17-3.239-.103-1.146z"
></path>
<path
id="part4"
stroke="#F9F9F9"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.25"
d="M367.893 176.613l-.666.211-.681-.423.124-.306.205-.701.205-.357-1.149-1.394-.747-.438-.872.46-.38-1.511-.945-.919-1.201-.379-3.193.437-6.371-1.313-2.161.117-.995-.248-.484-.781-.703.299-.827-.635-.689-.985-.293-.715.249-2.211-.11-.321-.571-.095-.344-.306-.198-.569-.146-.854.037-.598.183-.525.139-.555-.103-.657-.285-.394-.908-.773-.85-1.175-2.285-2.437.125-1.459-.132-2.51-.491-2.379-.256-3.51-.637-3.166-2.373.671-2.307 1.153-1.281-.89-1.025-1.445.651-3.721-1.984-1.496-2.043 2.204-3.105.459-2.915-1.517-1.084-1.971-.564-2.48-.6-1.686-.996-1.029-1.567-.861-1.04-1.86-.169-1.722.659-1.226-1.874-1.452-2.256-.328-2.168-1.182-1.508-2.904-2.278-5.721-1.025-7.836-.659-2.693-.937-2.218-.542-2.371-4.951.38-1.01.546-1.172 2.313-1.67 1.182-1.86.285-3.632-.343-3.105 3.692-3.684 1.175-3.91-.015-3.003 1.729-2.599.54-2.93-.036-1.479 1.204-1.355 1.612-5.726 3.306-1.494.445-1.575-.168-1.267.985-.695 2.298-1.062 1.241-1.238.62-3.076.569-12.925-1.992-.359-.43-.263-.599-.638-.437-.703-.154-1.625.504-1.055 2.094-1.186.985-1.414.357-1.962 1.584-2.095.985.242 1.284.037 1.335.329 2-.117 1.335-.22 1.321-.388 1.152-.783-.094-.755-.54-.791-.329-.871.832-.762 1.16-1.713 1.438-1.999-.263.637 2.773-.205 2.488-.821.904-.344 1.365.454 1.408.681 1.277 1.179 2.838.037 2.226-1.758.474-2.753 8.004-1.084 2.219-.22 2.568.843.861.168 1.24-3.024 4.984-.169 1.124-.271 1.138 3.947 2.714 4.306.912 2.102.985 3.786 3.05 8.502-1.758 1.304-1.328 1.523-.139 1.113 1.416.989 1.714 1.281.664 1.45.431 1.128.781.52 1.7.139 2.334.835 1.847.586.313.63-.153 2.819 1.131 1.597 1.073.563.715-.424 3.32-1.362.795.336 1.408 1.099 1.255.974 1.459-.103 1.248.359 1.073 1.472.474 4.343-.496 2.717 1.248 2.966 2.298 2.409 3.218.264 1.087-.367.751-.41.606-.212.839.381 1.875 2.204 2.299.622 1.671-.102 1.568-.527 1.08-2.974-.416-2.453-1.32h-3.193l-1.062 3.692 1.216 2.918.403 2.022.154 2.086.307 1.058 1.509.723.534.598-.007 2.101-.681 1.803-2.629 2.444-.52 1.78.139 1.919 2.263.81 1.216 3.072 6.737 4.13.952 1.087.864 1.379 1.055.796 4.95 1.028 5.69-.912 1.355-.766 1.201-1.678 1.282-1.211 1.237.423.344 2.189 1.223 1.379.176 1.08.264.985 2.797 1.817 3.149.27 6.774 2.116 13.094-2.715-1.003-2.502-.323-2.08-.38-1.167-.088-.511.066-.744.153-.569.345-.949.739-4.05.498-1.043.388-.328.447-.066-.073-1.364.498-1.978.249-1.875-1.633-1.948.08-1.591.96-.773.988-1.379.044-2.678-1.259-.124v-.453l.622-.729-.139-.81-.74-1.146-.088-.926.037-.745-.147-.583-.637-.431-.388-.036-1.01.445-.718.073-2.109-.445-1.135-.526-.608-.715-.513-.875-.058-.679.425-1.678 1.479-.394 1.464.598 2.981.467 2.9-1.029 1.018-.963.278-1.496-2.065-3.166 1.582-2.218 2.255-1.365-1.435-2.189-.996-2.451-.168-1.752-.806-1.729-.659-1.853-.256-1.671 2.907-2.16 3.112-.897 5.925.036 5.602-1.109 2.08.387 1.435-.46 3.911-2.926 1.567-.182 4.504.43 2.27-1.853.197-.992.264-.84.674-.722.747-.496 1.677.387 4.796 2.466 1.59-.598 1.354-1.73 1.172-2.729 3.889-5.735 1.31-2.459-.615.424z"
></path>
<path
id="part5"
stroke="#F9F9F9"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.25"
d="M232.261 29.77l-3.185-.168-2.029-.7-.871-.708-.696.306-2.519 2.627-1.296.598-1.612.372-3.383 1.642-15.356 2.291-1.121-.343-.483-.262-.352-.358-1.274.708-1.523-.117-6.906-2.233-.688-.963-.249-.605-.586-.387-.681-.212-.549-.058-.645-.219-1.245-.956-.644-.211-.571-1.175-.271-2.627-.03-2.78.161-1.612-.322-.679-1.032-3.203-.513-.788-.33-.934.242-1.168-.681.876-.776.16-.469-.583.249-1.38-.476-.495-.015-.467.162-.467.022-.54-.601-1.3-.491-.867-.219-.263-.982-.438-.219-.263V7.793l.08-.467.579-2.021.263-.358.498-.226.352.16 1.325 1.03.389.546 2.402 1.16 2.445 1.679 1.158.401.395.664.359.153 1.435.292.381.183 1.948 3.298.674.86.498 1.321.747.526.249.51.205.511.175.24.725-.35-.044-.955-.417-1.095-.41-.773-2.549-3.305-13.979-8.355-.865-.197-.542-.285-1.486-1.298-.93-.343h-6.73L155.61 2.306l-6.95 2.378-15.481 2.934-12.347 5.778-3.918 4.305-1.552.555-1.736.3-3.046 1.21.08.154 2.849 5.735 3.369 4.874 1.266 2.583.293 3.349-.432 1.875-1.083 1.116-.301 1.24.454 1.015.769 1.073.161 1.736-.651 1-5.705 1.408 2.6 7.917.322 3.83.014 3.81 1.743 1.261.982 1.175 1.552 3.13 1.15 1.03.945 1.356.776 1.642-2.27-.299-2.051.963.044 1.357.82.394.711 1.175.454 1.46-1.216 2.152-1.714 1.751.718 7.464 1.97 2.423 1.692 2.984 2.394 1.46 8.334.342 2.19 1.197 1.816 2.182 1.15-.7 1.23-4.313.996-2.174 1.142-1.576 1.509-.161 5.683 1.481 2.548-1.029.022-1.452.161-.985.234-.89 1.311-1.226 2.812-1.043 1.663-3.057 1.106-.861 5.199 1.014 6.935-1.036 1.435.124 1.209 1.547 1.34 1.277 7.367 1.225 3.486 2.073 1.523-1.007 2.358-.84 3.339.475.806.452.556.664.66.43 2.694 2.78 1.267.81 2.234.884 4.665-.278 2.211-.978 6.042-11.236 1.45-1.576 1.714-1.08 3.302.219 2.314-1.022.081-1.116.491-.759.644-1.97.747-.759.498-.912v-1.16l.161-1.124-2.05-.554-4.05.328-1.457-.708.798-2.729-1.069-1.452-2.102-.277-1.977-1.167-1.37-2.255-.739-2.984-.11-1.365.652-.97 1.786-1.81.637-1.123.469-1.277-.432-1.744-.842-1.489-.901-2.677.286-2.38.988-1.13 3.647.474.96-.124v.518l-.388.365-.293.628-.161.846-.03 1.022.549-.54.725-1.905.279-.416.263-.262 1.033-1.686 1.04-.97.52-.336.52-.124 3.185-2.014.674-.277 1.611-.226 2.651-1.948.549-.227.594-.087.351-.365.22-.766.322-.693.644-.132-.073-.32-.11-.76-.073-.313.454.043.161-.087z"
></path>
</g>
</StyledMap>
</>
)
}
}
export default Map
最佳答案
您可以通过创建管理 SVG 组件类的 bool 状态以触发基于它的 CSS 动画来实现相同的结果。
初始化 bool 状态:
state = { animation: false, }用你的间隔设置处理函数:
const handleOn = () => setInterval(()=> this.setState({animation: !this.state.animation}), 2000);将切换类名逻辑添加到您的 SVG 中:
<StyledMap xmlns="http://www.w3.org/2000/svg" width="414" height="389" fill="none" viewBox="0 0 414 389" className={`${this.state.animation ? 'on': 'off'}`} >仅对
on类名应用动画(当动画的状态为true时)。您只需在需要时最后调用
handleOn函数，在componentDidMount生命周期内可能是个好地方。
根据 setInterval 重新渲染组件在性能、速度、用户体验和网络负载方面并不是最好的方法。此外，动画很难同时处理和精确匹配。
顺便说一句，Gatsby 中的生命周期与 React 中的生命周期完全相同，因为 Gatsby 在 React 中工作(并且基于)。
关于javascript - react : how to re-render component every x seconds?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63890678/