第二个 Instagram 按钮的 CSS 属性

Question

Sevastopol'

Asked:2022-04-19 20:27:01 +0000 UTC2022-04-19 20:27:01 +0000 UTC 2022-04-19 20:27:01 +0000 UTC

滚动页面时绘制一个SVG元素的所有路径（path）的顺序动画

772

我有一个 SVG 元素，我在页面滚动上制作动画。以下是此类动画的示例：

const htmlElem = document.querySelector("html");
const pathElem = document.getElementsByClassName("path");
const dashOffset = parseInt(getComputedStyle(pathElem[1]).strokeDashoffset);

document.addEventListener("scroll", () => {
  const percentageComplete = (window.pageYOffset / (htmlElem.offsetHeight - window.innerHeight)) * 100;
  const offsetUnit = (percentageComplete * dashOffset) / 100;
    for(var i=0; i< pathElem.length; i++){
      pathElem[i].style.strokeDashoffset = dashOffset - offsetUnit;
    }
});

body {height: 3000px; margin: 0; background: linear-gradient(to top, aliceblue 0%, #f1f1f1 100%);}

svg {position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}

/*#flower1 .path {fill: darkred; stroke: red; stroke-width: 2px;}
#flower2 .path {fill: hotpink; stroke: pink; stroke-width: 2px;}*/

.path {
  stroke-dashoffset: 1000;
  stroke-dasharray: 1000;
}

<svg width="500px" height="300px" viewBox="0 250 1000 600"">

<!--Земелька-->
<ellipse cx="550" cy="800" rx="160" ry="30" fill="saddlebrown"></ellipse>
    
<!--Стебельки-->
<path class="path" d="M541.949,796.651C541.949,796.651 547.184,323.084 678.894,323.084" fill="none" stroke="seagreen" stroke-width="10px"></path>
<path class="path" d="M541.949,796.651C541.949,796.651 551.899,486.411 420.189,486.411" fill="none" stroke="darkgreen" stroke-width="10px"></path>

<!--Маленький цветочек-->
<g id="flower1">
<!--1-->
<path class="path" d="M428.978,471.834C432.403,442.643 417.768,427.411 393.485,418.542L390.134,431.596C408.846,440.229 420.336,459.059 422.204,479.424L428.978,471.834Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--2-->
<path class="path" d="M422.204,479.424C419.113,454.569 407.696,439.479 390.134,431.596L351.535,424.692L358.221,452.294C385.877,452.6 405.744,462.365 418.46,482.267L422.204,479.424Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--3-->
<path class="path" d="M422.475,487.371C419.207,489.427 421.042,488.78 412.988,493.846C394.301,505.601 363.923,507.197 349.538,498.114C335.987,489.559 329.338,474.667 319.336,468.923C330.583,467.52 340.097,453.545 357.544,453.356C380.359,453.11 406.09,461.465 416.222,478.92C416.222,478.92 415.058,476.623 422.475,487.371Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--4-->
<path class="path" d="M419.368,495.279C407.853,517.521 391.913,527.718 372.708,529.024L334.108,522.12L349.948,498.548C375.996,507.847 397.999,505.663 416.826,491.403L419.368,495.279Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--5-->
<path class="path" d="M423.111,504.638C416.205,533.205 397.197,542.42 371.345,542.322L372.708,529.024C393.251,527.413 410.557,513.733 419.368,495.279L423.111,504.638Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--Липесточки-->
<path class="path" d="M491.579,675.248C520.14,694.258 535.023,682.287 535.023,682.287C535.023,682.287 524.681,666.229 491.579,675.248" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path" d="M477.287,629.978C513.489,672.78 535.574,653.35 535.574,653.35C535.574,653.35 523.816,620.349 477.287,629.978" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path" d="M470.908,576.711C499.469,595.72 514.353,583.749 514.353,583.749C514.353,583.749 504.01,567.692 470.908,576.711" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path" d="M531.314,528.818C502.976,548.159 508.487,566.447 508.487,566.447C508.487,566.447 527.252,562.886 531.314,528.818" fill="none" stroke="green" stroke-width="4px"></path>
</g>

<!--Большой цветочек-->
<g id="flower2">
<!--1-->
<path class="path" d="M673.036,306.255C674.187,276.887 691.011,264.113 716.377,259.125L717.657,272.43C697.831,278.051 683.555,294.867 678.546,314.695L673.036,306.255Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--2-->
<path class="path" d="M678.546,314.695C685.461,290.622 699.084,277.489 717.657,272.43L756.86,271.607L745.967,297.835C718.599,293.84 697.454,300.31 681.8,317.994L678.546,314.695Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--3-->
<path class="path" d="M677.055,323.059C679.855,320.401 678.183,321.396 685.082,314.844C701.093,299.643 730.563,292.104 746.453,298.179C761.423,303.902 770.871,317.195 781.807,320.859C771.056,324.447 764.478,340.02 747.408,343.637C725.087,348.367 698.215,345.236 684.848,330.115C684.848,330.115 686.441,332.138 677.055,323.059Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--4-->
<path class="path" d="M678.884,330.798C686.804,354.559 700.966,367.108 719.735,371.383L758.938,370.559L746.953,344.812C719.777,349.952 698.378,344.286 681.995,327.274L678.884,330.798Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--Липесточки-->
<path class="path" d="M604.787,580.256C549.343,588.543 554.257,617.545 554.257,617.545C554.257,617.545 588.511,624.896 604.787,580.256" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path" d="M600.04,531.952C566.063,536.712 562.888,555.546 562.888,555.546C562.888,555.546 581.285,560.681 600.04,531.952" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path" d="M525.872,465.517C539.274,519.951 567.694,512.364 567.694,512.364C567.694,512.364 571.831,477.576 525.872,465.517" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path" d="M633.105,495.208C579.891,477.577 571.185,505.675 571.185,505.675C571.185,505.675 598.432,527.696 633.105,495.208" fill="none" stroke="green" stroke-width="4px"></path>
</g>

</svg>

该元素包含几个不同的补丁，它们共同构成一个整体模式。正如您在示例中看到的，当滚动页面时，所有补丁的绘制动画同时开始，并根据每个补丁的长度在不同的时间结束。

问题：如何依次启动每个补丁的绘制动画？对在加载文档和滚动页面时执行此类动画感兴趣。还对两种实现的详细描述感兴趣。

3 个回答

Voted

Alexander Lonberg · Answer 1 · 2022-04-23T08:03:02Z

我认为图片会或多或少清晰：

将路径的总长度拉伸到滚动的“工作”高度
每条路径都有自己的有效范围和计算方法strokeDashoffset
- 0-100 第一
- 100-300 秒
- 等等
计算滚动的相对位置
将渲染传递给具有适当范围的路径

强制动画：

它的工作原理完全相同，但不是“拉伸”沿着滚动的路径长度，而是根据设置的时间拉伸它。并跑过requestAnimationFrame()

在示例中，它是通过按钮切换的。

const htmlElem = document.querySelector('html')
const pathEls = Array.from(document.querySelectorAll('path'))
const btStart = document.querySelector('#btStart')
const btStop = document.querySelector('#btStop')

function rangeCalculator(begin, end, beginRange = 0, endRange = 100) {
  const inputRange = end - begin
  const outRange = endRange - beginRange
  return (current) => (
    beginRange + (outRange / (inputRange / (current - begin)))
  )
}

const draftsman = (() => {
  const paths = []
  // Индекс текущиго редактируемого элемента path в массиве paths
  let currentIndex = 0
  // Это самое главное - длина всех путей, от этого расчитывается очередь
  let totalLength = 0
  // Текущее значение диапазона от 0 до totalLength
  let currentLength = 0
  // Диапазон scroll htmlElem.scrollHeight - htmlElem.clientHeight
  let range
  // Минимальная единица измерения на range
  let unit
  // Завершаем действия с пропущенными path.
  //   Причина: браузер не успевает обработать быструю прокрутку scroll
  const complete = (s, e, m) => {
    for (; s <= e; ++s) {
      paths[s][m]()
    }
  }
  let timerId

  // Добавление всех элементов
  const add = (arrayPath) => {
    for (let path of arrayPath) {
      const selfIndex = paths.length
      const pathLength = path.getTotalLength()
      path.style.strokeDasharray = pathLength
      path.style.strokeDashoffset = pathLength
      // Для каждого path это его относительные границы в которых он может себя редактировать
      //   *   0 - 500 - у первого элемент
      //   * 500 - 800 - у второго
      //   * и т.д. до последнего totalLength
      const sPathLength = totalLength
      const ePathLength = (totalLength += pathLength)
      // Для каждого элемента свой калькулятор в зависимости от его границ
      const calc = rangeCalculator(sPathLength, ePathLength, 0, pathLength)
      paths.push({
        // min/max только для функции завершения complete(...)
        min() {
          path.style.strokeDashoffset = pathLength
        },
        max() {
          path.style.strokeDashoffset = 0
        },
        // Параметр "eo" нужен для завершения отрисовки в самом низу scroll,
        //   когда вот такой расчет currentLength=scroll/unit ниже, 
        //   может не попасть в диапазон с разницей, к примеру, в 1 миллиардную
        set(eo = 0) {
          // Проверяем подходит ли нам текущая позиция scroll
          if (currentLength < sPathLength || currentLength - eo > ePathLength) {
            return false
          }
          path.style.strokeDashoffset = pathLength - calc(currentLength)
          // Проверяем есть ли пропущенные path и отрисовываем в нужную сторону min/max,
          //   последний установленный currentIndex может отличаться намного
          if (selfIndex > currentIndex) {
            complete(currentIndex, selfIndex - 1, 'max')
          } else if (selfIndex < currentIndex) {
            complete(selfIndex + 1, currentIndex, 'min')
          }
          currentIndex = selfIndex
          return true
        }
      })
    }
  }
  // Ищем подходящий к текущему scroll path до первого удачного результата
  const setStrokeDashoffset = (scroll) => {
    currentLength = scroll / unit
    paths.some((p) => p.set())
  }

  // time нужен для анимации по времени
  const reinit = (time = null) => {
    range = time || (htmlElem.scrollHeight - htmlElem.clientHeight)
    unit = range / totalLength
  }

  const reset = () => {
    paths.forEach((p) => p.min())
    currentIndex = currentLength = 0
  }

  // ВСЕ ЧТО НИЖЕ ОТНОСИТСЯ К ПРИНУДИТЕЛЬНОЙ АНИМАЦИИ
  let animationSTime = null
  let animationId = null

  return {
    add,
    setStrokeDashoffset() {
      clearTimeout(timerId)
      setStrokeDashoffset(htmlElem.scrollTop)
      // Когда страница прокручена в самый верх или низ и scroll остановился
      //   могут быть необработаны первый и последний path, исправим это
      timerId = setTimeout(() => {
        if (currentIndex === paths.length - 1) {
          currentLength = htmlElem.scrollTop / unit
          // Передаем какое-нибудь незначащее минимальное число - описано выше
          paths[currentIndex].set(0.0001)
        }
      }, 100)
    },
    reinit() {
      reinit()
    },

    // ПРИНУДИТЕЛЬНАЯ АНИМАЦИЯ
    animationStart(time) {
      // Сбрасываем
      reset()
      // Инициализируем диапазон в миллисекундах
      reinit(time)
      // Стартовая позиция
      animationSTime = performance.now()
      void (function animIter(t) {
        const ct = t - animationSTime
        setStrokeDashoffset(ct)
        if (ct >= time) {
          paths[currentIndex].max() // дорисовка
          animationId = null
        } else {
          animationId = requestAnimationFrame(animIter)
        }
      })(performance.now())
    },
    animationStop() {
      cancelAnimationFrame(animationId)
      animationId = null
      reset()
      reinit()
      setStrokeDashoffset(htmlElem.scrollTop)
    }
  }
})()


// Инициализация и пуск всего этого безобразия
draftsman.add(pathEls)
draftsman.reinit()

function enableScrollAnimation(remove = false) {
  if (remove) {
    document.removeEventListener('scroll', draftsman.setStrokeDashoffset)
    window.removeEventListener('resize', draftsman.reinit)
  } else {
    document.addEventListener('scroll', draftsman.setStrokeDashoffset)
    window.addEventListener('resize', draftsman.reinit)
  }
}

btStart.addEventListener('click', () => {
  enableScrollAnimation(true)
  btStart.disabled = true
  btStop.disabled = false
  draftsman.animationStart(3000)
})
btStop.addEventListener('click', () => {
  btStart.disabled = false
  btStop.disabled = true
  draftsman.animationStop()
  enableScrollAnimation()
})

// default
enableScrollAnimation()

body {
  height: 3000px;
  margin: 0;
  background: linear-gradient(to top, aliceblue 0%, #f1f1f1 100%);
}

svg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

button {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 99999;
}

#btStop {
  left: 80px
}

<button id="btStart">btStart</button>
<button id="btStop" disabled>btStop</button>
<svg width="500px" height="300px" viewBox="0 250 1000 600" ">

    <!--Земелька-->
    <ellipse cx=" 550 " cy="800 " rx="160 " ry="30 " fill="saddlebrown "></ellipse>

    <!--Стебельки-->
    <path class="path " d="M541.949,796.651C541.949,796.651 547.184,323.084 678.894,323.084 " fill="none "
      stroke="seagreen " stroke-width="10px "></path>
    <path class="path " d="M541.949,796.651C541.949,796.651 551.899,486.411 420.189,486.411 " fill="none "
      stroke="darkgreen " stroke-width="10px "></path>

    <!--Маленький цветочек-->
    <g id="flower1 ">
      <!--1-->
      <path class="path "
        d="M428.978,471.834C432.403,442.643 417.768,427.411 393.485,418.542L390.134,431.596C408.846,440.229 420.336,459.059 422.204,479.424L428.978,471.834Z "
        fill="none " stroke="red " stroke-width="4px "></path>
      <!--2-->
      <path class="path "
        d="M422.204,479.424C419.113,454.569 407.696,439.479 390.134,431.596L351.535,424.692L358.221,452.294C385.877,452.6 405.744,462.365 418.46,482.267L422.204,479.424Z "
        fill="none " stroke="red " stroke-width="4px "></path>
      <!--3-->
      <path class="path "
        d="M422.475,487.371C419.207,489.427 421.042,488.78 412.988,493.846C394.301,505.601 363.923,507.197 349.538,498.114C335.987,489.559 329.338,474.667 319.336,468.923C330.583,467.52 340.097,453.545 357.544,453.356C380.359,453.11 406.09,461.465 416.222,478.92C416.222,478.92
  415.058,476.623 422.475,487.371Z "
        fill="none " stroke="red " stroke-width="4px "></path>
      <!--4-->
      <path class="path "
        d="M419.368,495.279C407.853,517.521 391.913,527.718 372.708,529.024L334.108,522.12L349.948,498.548C375.996,507.847 397.999,505.663 416.826,491.403L419.368,495.279Z "
        fill="none " stroke="red " stroke-width="4px "></path>
      <!--5-->
      <path class="path "
        d="M423.111,504.638C416.205,533.205 397.197,542.42 371.345,542.322L372.708,529.024C393.251,527.413 410.557,513.733 419.368,495.279L423.111,504.638Z "
        fill="none " stroke="red " stroke-width="4px "></path>
      <!--Липесточки-->
      <path class="path "
        d="M491.579,675.248C520.14,694.258 535.023,682.287 535.023,682.287C535.023,682.287 524.681,666.229 491.579,675.248 "
        fill="none " stroke="green " stroke-width="4px "></path>
      <path class="path "
        d="M477.287,629.978C513.489,672.78 535.574,653.35 535.574,653.35C535.574,653.35 523.816,620.349 477.287,629.978 "
        fill="none " stroke="green " stroke-width="4px "></path>
      <path class="path "
        d="M470.908,576.711C499.469,595.72 514.353,583.749 514.353,583.749C514.353,583.749 504.01,567.692 470.908,576.711 "
        fill="none " stroke="green " stroke-width="4px "></path>
      <path class="path "
        d="M531.314,528.818C502.976,548.159 508.487,566.447 508.487,566.447C508.487,566.447 527.252,562.886 531.314,528.818 "
        fill="none " stroke="green " stroke-width="4px "></path>
    </g>

    <!--Большой цветочек-->
    <g id="flower2 ">
      <!--1-->
      <path class="path "
        d="M673.036,306.255C674.187,276.887 691.011,264.113 716.377,259.125L717.657,272.43C697.831,278.051 683.555,294.867 678.546,314.695L673.036,306.255Z "
        fill="none " stroke="indianred " stroke-width="4px "></path>
      <!--2-->
      <path class="path "
        d="M678.546,314.695C685.461,290.622 699.084,277.489 717.657,272.43L756.86,271.607L745.967,297.835C718.599,293.84 697.454,300.31 681.8,317.994L678.546,314.695Z "
        fill="none " stroke="indianred " stroke-width="4px "></path>
      <!--3-->
      <path class="path "
        d="M677.055,323.059C679.855,320.401 678.183,321.396 685.082,314.844C701.093,299.643 730.563,292.104 746.453,298.179C761.423,303.902 770.871,317.195 781.807,320.859C771.056,324.447 764.478,340.02 747.408,343.637C725.087,348.367 698.215,345.236
  684.848,330.115C684.848,330.115 686.441,332.138 677.055,323.059Z "
        fill="none " stroke="indianred " stroke-width="4px "></path>
      <!--4-->
      <path class="path "
        d="M678.884,330.798C686.804,354.559 700.966,367.108 719.735,371.383L758.938,370.559L746.953,344.812C719.777,349.952 698.378,344.286 681.995,327.274L678.884,330.798Z "
        fill="none " stroke="indianred " stroke-width="4px "></path>
      <!--Липесточки-->
      <path class="path "
        d="M604.787,580.256C549.343,588.543 554.257,617.545 554.257,617.545C554.257,617.545 588.511,624.896 604.787,580.256 "
        fill="none " stroke="green " stroke-width="4px "></path>
      <path class="path "
        d="M600.04,531.952C566.063,536.712 562.888,555.546 562.888,555.546C562.888,555.546 581.285,560.681 600.04,531.952 "
        fill="none " stroke="green " stroke-width="4px "></path>
      <path class="path "
        d="M525.872,465.517C539.274,519.951 567.694,512.364 567.694,512.364C567.694,512.364 571.831,477.576 525.872,465.517 "
        fill="none " stroke="green " stroke-width="4px "></path>
      <path class="path "
        d="M633.105,495.208C579.891,477.577 571.185,505.675 571.185,505.675C571.185,505.675 598.432,527.696 633.105,495.208 "
        fill="none " stroke="green " stroke-width="4px "></path>
    </g>

  </svg>

Alexandr_TT · Answer 2 · 2022-04-20T14:46:32Z

如何依次启动每个补丁的绘制动画？

对于解决方案，您可以使用animeJS框架

哪张线图是基于变化的stroke-dashoffset

strokeDashoffset: [anime.setDashoffset, 0]

元素将按照它们在 SVG 代码中出现的顺序从上到下进行绘制。
绘图元素之间的延迟：

delay: function(e1, i) { return i * 500 }

多次重复——loop: true
来回 -direction: alternate

anime({
  targets: '.line-drawing-demo .lines path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 500,
  delay: function(el, i) { return i * 500 },
  direction: 'none',
  loop: true
});

<div class="line-drawing-demo">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="300px" viewBox="0 250 1000 600">
 <g class="lines" >
<!--Земелька-->
<ellipse cx="550" cy="800" rx="160" ry="30" fill="saddlebrown"></ellipse>
    
<!--Стебельки-->
<path class="e1" d="M541.949,796.651C541.949,796.651 547.184,323.084 678.894,323.084" fill="none" stroke="seagreen" stroke-width="10px"/>
<path class="e1" d="M541.949,796.651C541.949,796.651 551.899,486.411 420.189,486.411" fill="none" stroke="darkgreen" stroke-width="10px"/>

<!--Маленький цветочек-->

<!--1-->
<path class="e1" d="M428.978,471.834C432.403,442.643 417.768,427.411 393.485,418.542L390.134,431.596C408.846,440.229 420.336,459.059 422.204,479.424L428.978,471.834Z" fill="none" stroke="red" stroke-width="4px"/>
<!--2-->
<path class="e1" d="M422.204,479.424C419.113,454.569 407.696,439.479 390.134,431.596L351.535,424.692L358.221,452.294C385.877,452.6 405.744,462.365 418.46,482.267L422.204,479.424Z" fill="none" stroke="red" stroke-width="4px"/>
<!--3-->
<path class="e1" d="M422.475,487.371C419.207,489.427 421.042,488.78 412.988,493.846C394.301,505.601 363.923,507.197 349.538,498.114C335.987,489.559 329.338,474.667 319.336,468.923C330.583,467.52 340.097,453.545 357.544,453.356C380.359,453.11 406.09,461.465 416.222,478.92C416.222,478.92 415.058,476.623 422.475,487.371Z" fill="none" stroke="red" stroke-width="4px"/>
<!--4-->
<path class="e1" d="M419.368,495.279C407.853,517.521 391.913,527.718 372.708,529.024L334.108,522.12L349.948,498.548C375.996,507.847 397.999,505.663 416.826,491.403L419.368,495.279Z" fill="none" stroke="red" stroke-width="4px"/>
<!--5-->
<path class="e1" d="M423.111,504.638C416.205,533.205 397.197,542.42 371.345,542.322L372.708,529.024C393.251,527.413 410.557,513.733 419.368,495.279L423.111,504.638Z" fill="none" stroke="red" stroke-width="4px"/>
<!--Липесточки-->
<path class="e1" d="M491.579,675.248C520.14,694.258 535.023,682.287 535.023,682.287C535.023,682.287 524.681,666.229 491.579,675.248" fill="none" stroke="green" stroke-width="4px"/>
<path class="e1" d="M477.287,629.978C513.489,672.78 535.574,653.35 535.574,653.35C535.574,653.35 523.816,620.349 477.287,629.978" fill="none" stroke="green" stroke-width="4px"/>
<path class="e1" d="M470.908,576.711C499.469,595.72 514.353,583.749 514.353,583.749C514.353,583.749 504.01,567.692 470.908,576.711" fill="none" stroke="green" stroke-width="4px"/>
<path class="e1" d="M531.314,528.818C502.976,548.159 508.487,566.447 508.487,566.447C508.487,566.447 527.252,562.886 531.314,528.818" fill="none" stroke="green" stroke-width="4px"/>


<!--Большой цветочек-->

<!--1-->
<path class="e1" d="M673.036,306.255C674.187,276.887 691.011,264.113 716.377,259.125L717.657,272.43C697.831,278.051 683.555,294.867 678.546,314.695L673.036,306.255Z" fill="none" stroke="indianred" stroke-width="4px"/>
<!--2-->
<path class="e1" d="M678.546,314.695C685.461,290.622 699.084,277.489 717.657,272.43L756.86,271.607L745.967,297.835C718.599,293.84 697.454,300.31 681.8,317.994L678.546,314.695Z" fill="none" stroke="indianred" stroke-width="4px"/>
<!--3-->
<path class="e1" d="M677.055,323.059C679.855,320.401 678.183,321.396 685.082,314.844C701.093,299.643 730.563,292.104 746.453,298.179C761.423,303.902 770.871,317.195 781.807,320.859C771.056,324.447 764.478,340.02 747.408,343.637C725.087,348.367 698.215,345.236 684.848,330.115C684.848,330.115 686.441,332.138 677.055,323.059Z" fill="none" stroke="indianred" stroke-width="4px"/>
<!--4-->
<path class="e1" d="M678.884,330.798C686.804,354.559 700.966,367.108 719.735,371.383L758.938,370.559L746.953,344.812C719.777,349.952 698.378,344.286 681.995,327.274L678.884,330.798Z" fill="none" stroke="indianred" stroke-width="4px"/>
<!--Липесточки-->
<path class="e1" d="M604.787,580.256C549.343,588.543 554.257,617.545 554.257,617.545C554.257,617.545 588.511,624.896 604.787,580.256" fill="none" stroke="green" stroke-width="4px"/>
<path class="e1" d="M600.04,531.952C566.063,536.712 562.888,555.546 562.888,555.546C562.888,555.546 581.285,560.681 600.04,531.952" fill="none" stroke="green" stroke-width="4px"/>
<path class="e1" d="M525.872,465.517C539.274,519.951 567.694,512.364 567.694,512.364C567.694,512.364 571.831,477.576 525.872,465.517" fill="none" stroke="green" stroke-width="4px"/>
<path class="e1" d="M633.105,495.208C579.891,477.577 571.185,505.675 571.185,505.675C571.185,505.675 598.432,527.696 633.105,495.208" fill="none" stroke="green" stroke-width="4px"/>
  </g>
</svg>
</div>

来回绘制

anime({
  targets: '.flow  .lines path ',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 500,
  delay: function(e1, i) { return i * 500 },
  direction: 'alternate',
  loop: true
});

<div class="flow">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="300px" viewBox="0 250 1000 600">
 <g class="lines" >
<!--Земелька-->
<ellipse cx="550" cy="800" rx="160" ry="30" fill="saddlebrown"></ellipse>
    
<!--Стебельки-->
<path class="e1" d="M541.949,796.651C541.949,796.651 547.184,323.084 678.894,323.084" fill="none" stroke="seagreen" stroke-width="10px"/>
<path class="e1" d="M541.949,796.651C541.949,796.651 551.899,486.411 420.189,486.411" fill="none" stroke="darkgreen" stroke-width="10px"/>

<!--Маленький цветочек-->

<!--1-->
<path class="e1" d="M428.978,471.834C432.403,442.643 417.768,427.411 393.485,418.542L390.134,431.596C408.846,440.229 420.336,459.059 422.204,479.424L428.978,471.834Z" fill="none" stroke="red" stroke-width="4px"/>
<!--2-->
<path class="e1" d="M422.204,479.424C419.113,454.569 407.696,439.479 390.134,431.596L351.535,424.692L358.221,452.294C385.877,452.6 405.744,462.365 418.46,482.267L422.204,479.424Z" fill="none" stroke="red" stroke-width="4px"/>
<!--3-->
<path class="e1" d="M422.475,487.371C419.207,489.427 421.042,488.78 412.988,493.846C394.301,505.601 363.923,507.197 349.538,498.114C335.987,489.559 329.338,474.667 319.336,468.923C330.583,467.52 340.097,453.545 357.544,453.356C380.359,453.11 406.09,461.465 416.222,478.92C416.222,478.92 415.058,476.623 422.475,487.371Z" fill="none" stroke="red" stroke-width="4px"/>
<!--4-->
<path class="e1" d="M419.368,495.279C407.853,517.521 391.913,527.718 372.708,529.024L334.108,522.12L349.948,498.548C375.996,507.847 397.999,505.663 416.826,491.403L419.368,495.279Z" fill="none" stroke="red" stroke-width="4px"/>
<!--5-->
<path class="e1" d="M423.111,504.638C416.205,533.205 397.197,542.42 371.345,542.322L372.708,529.024C393.251,527.413 410.557,513.733 419.368,495.279L423.111,504.638Z" fill="none" stroke="red" stroke-width="4px"/>
<!--Липесточки-->
<path class="e1" d="M491.579,675.248C520.14,694.258 535.023,682.287 535.023,682.287C535.023,682.287 524.681,666.229 491.579,675.248" fill="none" stroke="green" stroke-width="4px"/>
<path class="e1" d="M477.287,629.978C513.489,672.78 535.574,653.35 535.574,653.35C535.574,653.35 523.816,620.349 477.287,629.978" fill="none" stroke="green" stroke-width="4px"/>
<path class="e1" d="M470.908,576.711C499.469,595.72 514.353,583.749 514.353,583.749C514.353,583.749 504.01,567.692 470.908,576.711" fill="none" stroke="green" stroke-width="4px"/>
<path class="e1" d="M531.314,528.818C502.976,548.159 508.487,566.447 508.487,566.447C508.487,566.447 527.252,562.886 531.314,528.818" fill="none" stroke="green" stroke-width="4px"/>


<!--Большой цветочек-->

<!--1-->
<path class="e1" d="M673.036,306.255C674.187,276.887 691.011,264.113 716.377,259.125L717.657,272.43C697.831,278.051 683.555,294.867 678.546,314.695L673.036,306.255Z" fill="none" stroke="indianred" stroke-width="4px"/>
<!--2-->
<path class="e1" d="M678.546,314.695C685.461,290.622 699.084,277.489 717.657,272.43L756.86,271.607L745.967,297.835C718.599,293.84 697.454,300.31 681.8,317.994L678.546,314.695Z" fill="none" stroke="indianred" stroke-width="4px"/>
<!--3-->
<path class="e1" d="M677.055,323.059C679.855,320.401 678.183,321.396 685.082,314.844C701.093,299.643 730.563,292.104 746.453,298.179C761.423,303.902 770.871,317.195 781.807,320.859C771.056,324.447 764.478,340.02 747.408,343.637C725.087,348.367 698.215,345.236 684.848,330.115C684.848,330.115 686.441,332.138 677.055,323.059Z" fill="none" stroke="indianred" stroke-width="4px"/>
<!--4-->
<path class="e1" d="M678.884,330.798C686.804,354.559 700.966,367.108 719.735,371.383L758.938,370.559L746.953,344.812C719.777,349.952 698.378,344.286 681.995,327.274L678.884,330.798Z" fill="none" stroke="indianred" stroke-width="4px"/>
<!--Липесточки-->
<path class="e1" d="M604.787,580.256C549.343,588.543 554.257,617.545 554.257,617.545C554.257,617.545 588.511,624.896 604.787,580.256" fill="none" stroke="green" stroke-width="4px"/>
<path class="e1" d="M600.04,531.952C566.063,536.712 562.888,555.546 562.888,555.546C562.888,555.546 581.285,560.681 600.04,531.952" fill="none" stroke="green" stroke-width="4px"/>
<path class="e1" d="M525.872,465.517C539.274,519.951 567.694,512.364 567.694,512.364C567.694,512.364 571.831,477.576 525.872,465.517" fill="none" stroke="green" stroke-width="4px"/>
<path class="e1" d="M633.105,495.208C579.891,477.577 571.185,505.675 571.185,505.675C571.185,505.675 598.432,527.696 633.105,495.208" fill="none" stroke="green" stroke-width="4px"/>
  </g>
</svg>
</div>

Sevastopol' · Answer 3 · 2022-04-21T01:21:59Z

回答问题的第一部分：

对加载文档时执行此类动画感兴趣

带有 CSS 的动画选项。path让我们对所有@keyframes. 同时，path我们会class为每个单独分配一个，以便单独设置动画开始前的延迟时长，以及设置元素的动画顺序。例子：

body {height: 100vh; overflow: hidden; margin: 0; background: linear-gradient(to top, saddlebrown 0%, white 100%);}

svg {position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}

/*#flower1 .path {fill: darkred; stroke: red; stroke-width: 2px;}
#flower2 .path {fill: hotpink; stroke: pink; stroke-width: 2px;}*/

.path {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.s1 {animation: path 2s linear forwards 1s}
.s2 {animation: path 2s linear forwards 3s}
.fs1 {animation: path 2s linear forwards 4s, color1 2s linear forwards 12s}
.fs2 {animation: path 2s linear forwards 4.5s, color1 2s linear forwards 13s}
.fs3 {animation: path 2s linear forwards 5s, color1 2s linear forwards 14s}
.fs4 {animation: path 2s linear forwards 5.5s, color1 2s linear forwards 15s}
.fs5 {animation: path 2s linear forwards 6s, color1 2s linear forwards 16s}
.fs6 {animation: path 2s linear forwards 6.5s, color2 2s linear forwards 17s}
.fs7 {animation: path 2s linear forwards 7s, color2 2s linear forwards 18s}
.fs8 {animation: path 2s linear forwards 7.5s, color2 2s linear forwards 19s}
.fs9 {animation: path 2s linear forwards 8s, color2 2s linear forwards 20s}
.l1 {animation: path 2s linear forwards 8.5s, color3 1s linear forwards 21s}
.l2 {animation: path 2s linear forwards 9s, color3 1s linear forwards 21.5s}
.l3 {animation: path 2s linear forwards 9.5s, color3 1s linear forwards 22s}
.l4 {animation: path 2s linear forwards 10s, color3 1s linear forwards 22.5s}
.l5 {animation: path 2s linear forwards 10.5s, color3 1s linear forwards 23s}
.l6 {animation: path 2s linear forwards 11s, color3 1s linear forwards 23.5s}
.l7 {animation: path 2s linear forwards 11.5s, color3 1s linear forwards 24s}
.l8 {animation: path 2s linear forwards 12s, color3 1s linear forwards 24.5s}

@keyframes path {to {stroke-dashoffset: 0;}}

@keyframes color1 {from {fill: transparent;} to {fill: darkred;}}
@keyframes color2 {from {fill: transparent;} to {fill: hotpink;}}
@keyframes color3 {from {fill: transparent;} to {fill: lightgreen;}}

<svg width="500px" height="180px" viewBox="0 250 1000 600">

<!--Земелька-->
<ellipse cx="550" cy="800" rx="160" ry="30" fill="saddlebrown"></ellipse>
    
<!--Стебельки-->
<path class="path s1" d="M541.949,796.651C541.949,796.651 547.184,323.084 678.894,323.084" fill="none" stroke="seagreen" stroke-width="10px"></path>
<path class="path s2" d="M541.949,796.651C541.949,796.651 551.899,486.411 420.189,486.411" fill="none" stroke="darkgreen" stroke-width="10px"></path>

<!--Маленький цветочек-->
<g id="flower1">
<!--1-->
<path class="path fs1" d="M428.978,471.834C432.403,442.643 417.768,427.411 393.485,418.542L390.134,431.596C408.846,440.229 420.336,459.059 422.204,479.424L428.978,471.834Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--2-->
<path class="path fs2" d="M422.204,479.424C419.113,454.569 407.696,439.479 390.134,431.596L351.535,424.692L358.221,452.294C385.877,452.6 405.744,462.365 418.46,482.267L422.204,479.424Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--3-->
<path class="path fs3" d="M422.475,487.371C419.207,489.427 421.042,488.78 412.988,493.846C394.301,505.601 363.923,507.197 349.538,498.114C335.987,489.559 329.338,474.667 319.336,468.923C330.583,467.52 340.097,453.545 357.544,453.356C380.359,453.11 406.09,461.465 416.222,478.92C416.222,478.92 415.058,476.623 422.475,487.371Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--4-->
<path class="path fs4" d="M419.368,495.279C407.853,517.521 391.913,527.718 372.708,529.024L334.108,522.12L349.948,498.548C375.996,507.847 397.999,505.663 416.826,491.403L419.368,495.279Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--5-->
<path class="path fs5" d="M423.111,504.638C416.205,533.205 397.197,542.42 371.345,542.322L372.708,529.024C393.251,527.413 410.557,513.733 419.368,495.279L423.111,504.638Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--Липесточки-->
<path class="path l1" d="M491.579,675.248C520.14,694.258 535.023,682.287 535.023,682.287C535.023,682.287 524.681,666.229 491.579,675.248" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path l2" d="M477.287,629.978C513.489,672.78 535.574,653.35 535.574,653.35C535.574,653.35 523.816,620.349 477.287,629.978" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path l3" d="M470.908,576.711C499.469,595.72 514.353,583.749 514.353,583.749C514.353,583.749 504.01,567.692 470.908,576.711" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path l4" d="M531.314,528.818C502.976,548.159 508.487,566.447 508.487,566.447C508.487,566.447 527.252,562.886 531.314,528.818" fill="none" stroke="green" stroke-width="4px"></path>
</g>

<!--Большой цветочек-->
<g id="flower2">
<!--1-->
<path class="path fs6" d="M673.036,306.255C674.187,276.887 691.011,264.113 716.377,259.125L717.657,272.43C697.831,278.051 683.555,294.867 678.546,314.695L673.036,306.255Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--2-->
<path class="path fs7" d="M678.546,314.695C685.461,290.622 699.084,277.489 717.657,272.43L756.86,271.607L745.967,297.835C718.599,293.84 697.454,300.31 681.8,317.994L678.546,314.695Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--3-->
<path class="path fs8" d="M677.055,323.059C679.855,320.401 678.183,321.396 685.082,314.844C701.093,299.643 730.563,292.104 746.453,298.179C761.423,303.902 770.871,317.195 781.807,320.859C771.056,324.447 764.478,340.02 747.408,343.637C725.087,348.367 698.215,345.236 684.848,330.115C684.848,330.115 686.441,332.138 677.055,323.059Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--4-->
<path class="path fs9" d="M678.884,330.798C686.804,354.559 700.966,367.108 719.735,371.383L758.938,370.559L746.953,344.812C719.777,349.952 698.378,344.286 681.995,327.274L678.884,330.798Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--Липесточки-->
<path class="path l5" d="M604.787,580.256C549.343,588.543 554.257,617.545 554.257,617.545C554.257,617.545 588.511,624.896 604.787,580.256" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path l6" d="M600.04,531.952C566.063,536.712 562.888,555.546 562.888,555.546C562.888,555.546 581.285,560.681 600.04,531.952" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path l7" d="M525.872,465.517C539.274,519.951 567.694,512.364 567.694,512.364C567.694,512.364 571.831,477.576 525.872,465.517" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path l8" d="M633.105,495.208C579.891,477.577 571.185,505.675 571.185,505.675C571.185,505.675 598.432,527.696 633.105,495.208" fill="none" stroke="green" stroke-width="4px"></path>
</g>

</svg>

带有 SVG 的动画选项。例子：

body {height: 100vh; overflow: hidden; margin: 0; background: linear-gradient(to top, saddlebrown 0%, white 100%);}

svg {position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}

/*#flower1 .path {fill: darkred; stroke: red; stroke-width: 2px;}
#flower2 .path {fill: hotpink; stroke: pink; stroke-width: 2px;}*/

.s1, .s2 {
  stroke-dashoffset: 1000;
  stroke-dasharray: 1000;
}

.fs1, .fs2, .fs3, .fs4, .fs5, .fs6, .fs7, .fs8, .fs9 {
  stroke-dashoffset: 500;
  stroke-dasharray: 500;
}

.l1, .l2, .l3, .l4, .l5, .l6, .l7, .l8 {
  stroke-dashoffset: 300;
  stroke-dasharray: 300;
}

<svg width="500px" height="180px" viewBox="0 250 1000 600">

<!--Земелька-->
<ellipse cx="550" cy="800" rx="160" ry="30" fill="saddlebrown"></ellipse>
    
<!--Стебельки-->
<path id="s1" class="path s1" d="M541.949,796.651C541.949,796.651 547.184,323.084 678.894,323.084" fill="none" stroke="seagreen" stroke-width="10px"></path>
<path id="s2" class="path s2" d="M541.949,796.651C541.949,796.651 551.899,486.411 420.189,486.411" fill="none" stroke="darkgreen" stroke-width="10px"></path>

<!--Маленький цветочек-->
<g id="flower1">
<!--1-->
<path id="fs1" class="path fs1" d="M428.978,471.834C432.403,442.643 417.768,427.411 393.485,418.542L390.134,431.596C408.846,440.229 420.336,459.059 422.204,479.424L428.978,471.834Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--2-->
<path id="fs2" class="path fs2" d="M422.204,479.424C419.113,454.569 407.696,439.479 390.134,431.596L351.535,424.692L358.221,452.294C385.877,452.6 405.744,462.365 418.46,482.267L422.204,479.424Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--3-->
<path id="fs3" class="path fs3" d="M422.475,487.371C419.207,489.427 421.042,488.78 412.988,493.846C394.301,505.601 363.923,507.197 349.538,498.114C335.987,489.559 329.338,474.667 319.336,468.923C330.583,467.52 340.097,453.545 357.544,453.356C380.359,453.11 406.09,461.465 416.222,478.92C416.222,478.92 415.058,476.623 422.475,487.371Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--4-->
<path id="fs4" class="path fs4" d="M419.368,495.279C407.853,517.521 391.913,527.718 372.708,529.024L334.108,522.12L349.948,498.548C375.996,507.847 397.999,505.663 416.826,491.403L419.368,495.279Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--5-->
<path id="fs5" class="path fs5" d="M423.111,504.638C416.205,533.205 397.197,542.42 371.345,542.322L372.708,529.024C393.251,527.413 410.557,513.733 419.368,495.279L423.111,504.638Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--Липесточки-->
<path id="l1" class="path l1" d="M491.579,675.248C520.14,694.258 535.023,682.287 535.023,682.287C535.023,682.287 524.681,666.229 491.579,675.248" fill="none" stroke="green" stroke-width="4px"></path>
<path id="l2" class="path l2" d="M477.287,629.978C513.489,672.78 535.574,653.35 535.574,653.35C535.574,653.35 523.816,620.349 477.287,629.978" fill="none" stroke="green" stroke-width="4px"></path>
<path id="l3" class="path l3" d="M470.908,576.711C499.469,595.72 514.353,583.749 514.353,583.749C514.353,583.749 504.01,567.692 470.908,576.711" fill="none" stroke="green" stroke-width="4px"></path>
<path id="l4" class="path l4" d="M531.314,528.818C502.976,548.159 508.487,566.447 508.487,566.447C508.487,566.447 527.252,562.886 531.314,528.818" fill="none" stroke="green" stroke-width="4px"></path>
</g>

<!--Большой цветочек-->
<g id="flower2">
<!--1-->
<path id="fs6" class="path fs6" d="M673.036,306.255C674.187,276.887 691.011,264.113 716.377,259.125L717.657,272.43C697.831,278.051 683.555,294.867 678.546,314.695L673.036,306.255Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--2-->
<path id="fs7" class="path fs7" d="M678.546,314.695C685.461,290.622 699.084,277.489 717.657,272.43L756.86,271.607L745.967,297.835C718.599,293.84 697.454,300.31 681.8,317.994L678.546,314.695Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--3-->
<path id="fs8" class="path fs8" d="M677.055,323.059C679.855,320.401 678.183,321.396 685.082,314.844C701.093,299.643 730.563,292.104 746.453,298.179C761.423,303.902 770.871,317.195 781.807,320.859C771.056,324.447 764.478,340.02 747.408,343.637C725.087,348.367 698.215,345.236 684.848,330.115C684.848,330.115 686.441,332.138 677.055,323.059Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--4-->
<path id="fs9" class="path fs9" d="M678.884,330.798C686.804,354.559 700.966,367.108 719.735,371.383L758.938,370.559L746.953,344.812C719.777,349.952 698.378,344.286 681.995,327.274L678.884,330.798Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--Липесточки-->
<path id="l5" class="path l5" d="M604.787,580.256C549.343,588.543 554.257,617.545 554.257,617.545C554.257,617.545 588.511,624.896 604.787,580.256" fill="none" stroke="green" stroke-width="4px"></path>
<path id="l6" class="path l6" d="M600.04,531.952C566.063,536.712 562.888,555.546 562.888,555.546C562.888,555.546 581.285,560.681 600.04,531.952" fill="none" stroke="green" stroke-width="4px"></path>
<path id="l7" class="path l7" d="M525.872,465.517C539.274,519.951 567.694,512.364 567.694,512.364C567.694,512.364 571.831,477.576 525.872,465.517" fill="none" stroke="green" stroke-width="4px"></path>
<path id="l8" class="path l8" d="M633.105,495.208C579.891,477.577 571.185,505.675 571.185,505.675C571.185,505.675 598.432,527.696 633.105,495.208" fill="none" stroke="green" stroke-width="4px"></path>
</g>

<animate id="an1" xlink:href="#s1" attributeName="stroke-dashoffset" begin="0.5s" dur="2s" values="1000;0" fill="freeze" />
<animate id="an2" xlink:href="#s2" attributeName="stroke-dashoffset" begin="an1.end" dur="2s" values="1000;0" fill="freeze" />

<animate id="an3" xlink:href="#fs1" attributeName="stroke-dashoffset" begin="an2.end" dur="2s" values="500;0" fill="freeze" />
<animate id="an4" xlink:href="#fs2" attributeName="stroke-dashoffset" begin="an3.end" dur="2s" values="500;0" fill="freeze" />
<animate id="an5" xlink:href="#fs3" attributeName="stroke-dashoffset" begin="an4.end" dur="2s" values="500;0" fill="freeze" />
<animate id="an6" xlink:href="#fs4" attributeName="stroke-dashoffset" begin="an5.end" dur="2s" values="500;0" fill="freeze" />
<animate id="an7" xlink:href="#fs5" attributeName="stroke-dashoffset" begin="an6.end" dur="2s" values="500;0" fill="freeze" />
<animate id="an8" xlink:href="#fs6" attributeName="stroke-dashoffset" begin="an7.end" dur="2s" values="500;0" fill="freeze" />
<animate id="an9" xlink:href="#fs7" attributeName="stroke-dashoffset" begin="an8.end" dur="2s" values="500;0" fill="freeze" />
<animate id="an10" xlink:href="#fs8" attributeName="stroke-dashoffset" begin="an9.end" dur="2s" values="500;0" fill="freeze" />
<animate id="an11" xlink:href="#fs9" attributeName="stroke-dashoffset" begin="an10.end" dur="2s" values="500;0" fill="freeze" />

<animate id="an12" xlink:href="#l1" attributeName="stroke-dashoffset" begin="an11.end" dur="1.5s" values="300;0" fill="freeze" />
<animate id="an13" xlink:href="#l2" attributeName="stroke-dashoffset" begin="an12.end" dur="1.5s" values="300;0" fill="freeze" />
<animate id="an14" xlink:href="#l3" attributeName="stroke-dashoffset" begin="an13.end" dur="1.5s" values="300;0" fill="freeze" />
<animate id="an15" xlink:href="#l4" attributeName="stroke-dashoffset" begin="an14.end" dur="1.5s" values="300;0" fill="freeze" />
<animate id="an16" xlink:href="#l5" attributeName="stroke-dashoffset" begin="an15.end" dur="1.5s" values="300;0" fill="freeze" />
<animate id="an17" xlink:href="#l6" attributeName="stroke-dashoffset" begin="an16.end" dur="1.5s" values="300;0" fill="freeze" />
<animate id="an18" xlink:href="#l7" attributeName="stroke-dashoffset" begin="an17.end" dur="1.5s" values="300;0" fill="freeze" />
<animate id="an19" xlink:href="#l8" attributeName="stroke-dashoffset" begin="an18.end" dur="1.5s" values="300;0" fill="freeze" />

</svg>

这两个选项功能齐全，但它们有一个共同的大缺点——它们需要编写太多代码行，这很好。因此，最好使用JS。

滚动页面时绘制一个SVG元素的所有路径（path）的顺序动画

我认为图片会或多或少清晰：

强制动画：

表格填充不起作用

提示 50/50，有两个，其中一个是正确的

在 PyQt5 中停止进程

我的脚本不工作

在文本文件中写入和读取列表

如何像屏幕截图中那样并排排列这些块？

确定文本文件中每一行的字符数

将接口对象传递给 JAVA 构造函数

正确更新数据库中的数据

Python解析不是css

滚动页面时绘制一个SVG元素的所有路径（path）的顺序动画

3 个回答

我认为图片会或多或少清晰：

强制动画：

相关问题