29
Фев
2020

Как сделать такой трюк с анимацией?

Я написал анимацию, обычное стандартная ситуация когда некий шарик движется по пути, анимация зациклена.

Смысл вопроса вот в чём: я хочу что бы в тот момент когда чёрный шарик проходит над цифрой то эта цифра отображалась в этом двигающимся шарике.

Моя наработка smil svg:

p{
  width: 80%;
  margin: auto;
}
text{
  font-family: sans-serif;
}
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam eligendi ex sequi eaque, a perferendis iusto vel hic explicabo fugiat animi dolorum voluptates amet cupiditate nihil nesciunt! Esse iusto praesentium architecto molestias magni! Repellendus mollitia blanditiis non vitae, reprehenderit explicabo molestiae necessitatibus commodi dolorem voluptates perspiciatis deleniti nesciunt sunt totam est itaque enim consectetur esse quidem officia nulla beatae! Alias quasi molestias ut, reprehenderit necessitatibus ea pariatur fugiat porro veritatis dignissimos aspernatur similique! Voluptates perspiciatis unde velit sed ratione sunt iste eaque blanditiis id aliquam alias deserunt consectetur quidem accusantium maiores nam, quo earum similique. Possimus consectetur eius explicabo eos.
</p>

<svg viewBox="-30 -120 1000 200" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <linearGradient id="lg">
      <stop offset="30%" stop-color="purple" stop-opacity="10%"/>
      <stop offset="40%" stop-color="#fff"  stop-opacity="80%"/>
      <stop offset="30%" stop-color="lightgreen" stop-opacity="10%"/>
  </linearGradient>
</defs>
<path d="M0,30 Q50,-5 300,-8 Q300,-10 700,0 Q960,10 1000,-30" 
      stroke="url(#lg)" stroke-width="20" fill="none" 
      stroke-dasharray="140, 30, 6, 30" id="mpath"/>
  
  <g>
    <circle r="20" fill="lightblue" cx="168" cy="-4"></circle>
    <circle r="20" fill="lightblue" cx="374" cy="-8"></circle>
    <circle r="20" fill="lightblue" cx="580" cy="-3"></circle>
    <circle r="20" fill="lightblue" cx="785" cy="3"></circle>
  </g>
  
  <g>
    <text x="160" y="-30">2%</text>
    <text x="368" y="-34">3%</text>
    <text x="570" y="-30">4%</text>
    <text x="780" y="-25">5%</text>
  </g>
  
  <circle r="24">
        <animateMotion dur="5s" 
                     repeatCount="indefinite" 
                     rotate="auto" 
                     fill="freeze"
                     begin="0s"\>
            <mpath xlink:href="#mpath" />
      </animateMotion>
  </circle>
</svg>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam eligendi ex sequi eaque, a perferendis iusto vel hic explicabo fugiat animi dolorum voluptates amet cupiditate nihil nesciunt! Esse iusto praesentium architecto molestias magni! Repellendus mollitia blanditiis non vitae, reprehenderit explicabo molestiae necessitatibus commodi dolorem voluptates perspiciatis deleniti nesciunt sunt totam est itaque enim consectetur esse quidem officia nulla beatae! Alias quasi molestias ut, reprehenderit necessitatibus ea pariatur fugiat porro veritatis dignissimos aspernatur similique! Voluptates perspiciatis unde velit sed ratione sunt iste eaque blanditiis id aliquam alias deserunt consectetur quidem accusantium maiores nam, quo earum similique. Possimus consectetur eius explicabo eos.
</p>

Источник: https://ru.stackoverflow.com/questions/1088854/%D0%9A%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D1%82%D0%B0%D0%BA%D0%BE%D0%B9-%D1%82%D1%80%D1%8E%D0%BA-%D1%81-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B5%D0%B9
Share

Тебе может это понравится...