SVG环绕地球的动画平面

Question

CodePen在这里

我试着制作这个平面动画，这样飞机就能在全球范围内飞行：

​

​

我使用<circle>元素将地球仪添加到代码中，但我不知道如何掩盖飞机的背面，使它们看起来“绕着”地球飞行。

​

​

为了实现地球比飞机后部“更近”的位置，我尝试了使用position:relative和z-indexes，但我没有做到这一点。

任何帮助都是非常感谢的，谢谢。

码

<svg width="300px" height="300px">
  <defs>
    <path id="svg-half-plane"
          d=" M 0,-5
             A 1,1 0 0 1 1,-4
             L 1,-1 5,1 5,2 1,1 1,3 2,4 2,5 0,4
             Z"
          ></path>

    <symbol viewBox="0 0 10 10" id="svg-plane" overflow="visible">
      <use xlink:href="#svg-half-plane"></use>
      <use xlink:href="#svg-half-plane" transform="scale(-1, 1)"></use>
    </symbol>
  </defs>
  <g class="sky" transform="translate(150, 150)">

    <circle class="globe" cx="0" cy="0" r="100" />

    <g class="plane-container" transform="rotate(289)">
      <use class="plane" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>

    <g class="plane-container" transform="rotate(129)">
      <use class="plane delay-1" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>

    <g class="plane-container" transform="rotate(37.5)">
      <use class="plane delay-2" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>

    <g class="plane-container" transform="rotate(57.5)">
      <use class="plane delay-3" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>

    <g class="plane-container" transform="rotate(-37.5)">
      <use class="plane delay-4" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>


  </g>
</svg>

CSS

body, html {
  padding: 0;
  margin: 0;
  border: 0;
  height: 100%;
  background: #222;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  display          : block;
  background-color : #555;
  shape-rendering  : crispEdges;
}

.plane-container {
  -webkit-perspective : 900px;
  -ms-perspective     : 900px;
  perspective         : 900px;
  z-index:            : 3;
}

@-webkit-keyframes flyaround {
  0% {
    -webkit-transform : rotateX(0deg) translateZ(140px) scale3d(1, 1, 1);
    transform         : rotateX(0deg) translateZ(140px) scale3d(1, 1, 1);
    fill              : #eee;
    opacity           : 1.0;
  }

  50% {
    -webkit-transform : rotateX(180deg) translateZ(140px) scale3d(0.5, 0.5, 0.5);
    transform         : rotateX(180deg) translateZ(140px) scale3d(1, 1, 1);
    fill              : #eee;
    opacity           : 0.5;
  }

  100% {
    -webkit-transform : rotateX(360deg) translateZ(140px) scale3d(1, 1, 1);
    transform         : rotateX(360deg) translateZ(140px) scale3d(1, 1, 1);
    fill              : #eee;
    opacity           : 1.0;
  }
}

@keyframes flyaround {
  0% {
    -webkit-transform : rotateX(0deg) translateZ(140px) scale3d(1, 1, 1);
    -ms-transform     : rotateX(0deg) translateZ(140px) scale3d(1, 1, 1);
    transform         : rotateX(0deg) translateZ(140px) scale3d(1, 1, 1);
    fill              : #eee;
    opacity           : 1.0;
  }

  50% {
    -webkit-transform : rotateX(180deg) translateZ(140px) scale3d(0.5, 0.5, 0.5);
    -ms-transform     : rotateX(180deg) translateZ(140px) scale3d(0.5, 0.5, 0.5);
    transform         : rotateX(180deg) translateZ(140px) scale3d(1, 1, 1);
    fill              : #eee;
    opacity           : 0.5;
  }

  100% {
    -webkit-transform : rotateX(360deg) translateZ(140px) scale3d(1, 1, 1);
    -ms-transform     : rotateX(360deg) translateZ(140px) scale3d(1, 1, 1);
    transform         : rotateX(360deg) translateZ(140px) scale3d(1, 1, 1);
    fill              : #eee;
    opacity           : 1.0;
  }
}

.plane {
  fill              : none;
  -webkit-animation : flyaround 2500ms infinite linear;
  animation         : flyaround 2500ms infinite linear;
}

.delay-1 { -webkit-animation-delay: 123ms; animation-delay: 123ms; }
.delay-2 { -webkit-animation-delay: 2023ms; animation-delay: 2023ms; }
.delay-3 { -webkit-animation-delay: 773ms; animation-delay: 773ms; }
.delay-4 { -webkit-animation-delay: 1123ms; animation-delay: 1123ms; }

Answer 1

如果没有一些额外的元素或javascript，我认为这是很困难的。

您可以通过添加第二个镜像元素来做到这一点，这个元素是在DOM中前面创建的，即圆圈，因此它出现在它后面。同时，在试图给出它后面的外观时，使前平面消失。

所以为了让前飞机消失..。

<pre><code>
@keyframes blink {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@-webkit-keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
.blink {
  animation: blink 2500ms step-start 0s infinite;
  -webkit-animation: blink 2500ms step-start 0s infinite;
  -webkit-animation-delay: 400ms; 
  animation-delay: 400ms;
} 

...

    <g class="plane-container" transform="rotate(0)">
      <use class="plane" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>

    <circle class="globe" cx="0" cy="0" r="100" />

    <g class="plane-container blink" transform="rotate(0)">
      <use class="plane" xlink:href="#svg-plane" width="50" height="50"></use>
    </g>

​

码页

只需检查所需的浏览器支持，特别是在IE中，以获得svg+css3转换支持

Answer 2

我认为虚拟循环和相对定时是有帮助的。请参阅如何制作SVG循环动画？

​

<svg>
  <rect>
    <animate id="o1" begin="0;o1.end" dur="10s"
    attributeName="visibility" from="hide" to="hide"/>
  </rect>
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin" 
    attributeName="cx" from="250" to="50" dur="5.05s"/>
  </circle>
  <circle fill="blue" cx="150" cy="100" r="50" />
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin+5s" 
    attributeName="cx" from="50" to="250" dur="5.05s"/>
  </circle>
</svg>

​