如何实现此svg动画? [英] How to achieve this svg animation?

问题描述

世界.我是一个菜鸟编码器，希望第一次在这里回答我的问题！

world. I am a noob coder, was hoping to get my question answered here for the first time!

我正在尝试为自己制作这些(横幅下方的三个动画)之类的东西网站.

I am trying to get something like these (the three animations right under the banner) svg animations for my own website.

/* CSS */

svg {
      max-width: 95%;
      max-height: 95%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

    /* HTML */ 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="212px"
    	 height="154px" viewBox="0 0 212 154" style="enable-background:new 0 0 212 154;" xml:space="preserve">
    <style type="text/css">
    	.st0{fill:#999999;}
    	.st1{fill:none;stroke:#999999;stroke-miterlimit:10;}
    </style>
    <defs>
    </defs>
    <g>
    	<path class="st0" d="M211,1v152H1V1H211 M212,0H0v154h212V0L212,0z"/>
    </g>
    <line class="st1" x1="62.5" y1="1" x2="62.5" y2="153"/>
    <polyline class="st1" points="1,97.65 14.31,97.65 62,97.65 "/>
    <line class="st1" x1="14.39" y1="153" x2="14.39" y2="98"/>
    <line class="st1" x1="62.1" y1="125.82" x2="14.9" y2="125.82"/>
    </svg>

我已经通过illustrator制作了svg，然后将代码导出到我选择的编码程序中，但是我不确定如何对线条进行动画处理，使其从一个点开始并以另一种颜色跟踪到另一点，朝着不同的方向发展.

I've made the svg via illustrator, and then exported the code into my coding program of choice, however I am unsure how to actually animate the lines so that it starts at one point and traces to another in a different color, in a variety of directions.

希望我在这里很有意义，任何帮助都会很棒.让我知道您是否有任何解决方案或资源可以帮助我实现这一目标.

Hopefully i'm making sense here, any help would be awesome. Let me know if you have any solutions or resources that can help me to achieve this.

推荐答案

我有一个类似的项目，其中动画给我们带来了挑战.我最初尝试使用视频，然后使用GIF，但最终使用了SVG.

I had a similar project where animations posed a challenge. I initially tried out using a video, then a GIF, but finally ended up using SVG.

尽管并没有像调用方法那样简单的解决方案，因为每个动画都是唯一的，但是这里有一些选项可以帮助您入门.

Although, there isn't a straight solution like a method to call because each animation is unique, here are options that can help you get started.

1. SVG动画库，例如 GreenSock 或 SnapSVG
2. 使用 Airbnb Lottie -您可以使用Adobe Illustrator进行设计，并且Lottie将输出为JSON

1. SVG animation libraries like GreenSock or SnapSVG
2. Using Airbnb Lottie - you can design using Adobe Illustrator and Lottie will output as JSON

我最终使用Lotties，因为JSON结构是一种方便的方法.

I ended up using Lotties, as the JSON structure was a handy approach.

这篇关于如何实现此svg动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！