Home > Blockchain >  svg breaking animation on rotation
svg breaking animation on rotation

Time：08-26

the codepen link

Hi everyone I'm having issue with my cabins rotation. they tend to go outside the wheel

    /*svg colors */

.cls-1 {
  fill: #e8f3e2;
}

.cls-2 {
  fill: #faf4a8;
}

.cls-3 {
  fill: #cac277;
}

.cls-4 {
  fill: #f3ca76;
}

.cls-5 {
  fill: #fdf387;
}

.cls-6 {
  fill: #c2e4d8;
}

.cls-7 {
  fill: #aedccd;
}

.cls-8 {
  opacity: 0.5;
}

.cls-10,
.cls-16,
.cls-17,
.cls-22,
.cls-32,
.cls-38,
.cls-39,
.cls-48,
.cls-50,
.cls-56,
.cls-9 {
  fill: none;
}

.cls-16,
.cls-17,
.cls-9 {
  stroke: #dab6c4;
}

.cls-10,
.cls-18,
.cls-19,
.cls-32,
.cls-38,
.cls-39,
.cls-48,
.cls-50,
.cls-56,
.cls-9 {
  stroke-miterlimit: 10;
}

.cls-10 {
  stroke: #e6d0d8;
}

.cls-11 {
  fill: #e7d0d8;
}

.cls-12 {
  fill: #dab6c4;
}

.cls-13,
.cls-18 {
  fill: #b5d780;
}

.cls-14 {
  fill: #9cb17e;
}

.cls-15 {
  fill: #f16a83;
}

.cls-16,
.cls-17 {
  stroke-linejoin: bevel;
  stroke-width: 2px;
}

.cls-17 {
  stroke-dasharray: 14.92 4.97;
}

.cls-18 {
  stroke: #b5d780;
}

.cls-18,
.cls-19 {
  stroke-width: 0.25px;
}

.cls-19,
.cls-21 {
  fill: #aec58b;
}

.cls-19 {
  stroke: #aec58b;
}

.cls-20 {
  fill: #7d8a71;
}

.cls-23 {
  fill: #f69eac;
}

.cls-24 {
  fill: #c38f98;
}

.cls-25 {
  fill: #816872;
}

.cls-26 {
  fill: #6d6066;
}

.cls-27 {
  fill: #806871;
}

.cls-28 {
  fill: #dbbf53;
}

.cls-29 {
  fill: #bfcf30;
}

.cls-30 {
  fill: #b29ea7;
}

.cls-31 {
  fill: #8d6876;
}

.cls-32,
.cls-48 {
  stroke: #8d6876;
}

.cls-32 {
  opacity: 0.6;
}

.cls-33 {
  fill: #d2a849;
}

.cls-34 {
  fill: #e0b24d;
}

.cls-35 {
  fill: #bf6872;
}

.cls-36 {
  fill: #f0bf53;
}

.cls-37 {
  fill: #c6c49e;
}

.cls-38 {
  stroke: #f69eac;
}

.cls-39 {
  stroke: #c38f98;
}

.cls-40 {
  fill: #c5c072;
}

.cls-41 {
  fill: #fdf164;
}

.cls-42 {
  fill: #dbedd1;
}

.cls-43 {
  fill: #b2beaf;
}

.cls-44 {
  fill: #feeb19;
}

.cls-45 {
  fill: #9998c8;
}

.cls-46 {
  fill: #fef5b1;
}

.cls-47 {
  fill: #fac1c4;
}

.cls-49 {
  fill: #bfa264;
}

.cls-50 {
  stroke: #806871;
}

.cls-51 {
  fill: #ce9d2b;
}

.cls-52 {
  fill: #c06975;
}

.cls-53 {
  fill: #e0efd3;
}

.cls-54 {
  fill: #b9e1d2;
}

.cls-55 {
  fill: #fff;
}

.cls-56 {
  stroke: #231f20;
}

.cls-57 {
  fill: #ffefb8;
}

.cls-58 {
  fill: #dfedc9;
}

.cls-59 {
  fill: #f6d695;
}

.cls-60 {
  fill: #fcd6d9;
}

.cls-61 {
  fill: #a48691;
}

.cls-62 {
  fill: #eddee3;
}

.cls-63 {
  fill: #fcf8ca;
}

.cls-64 {
  fill: #b8b2d8;
}

.cls-65 {
  fill: #eff7ea;
}

.cls-66 {
  fill: #fef7b7;
}

.cls-67 {
  fill: #fee9a0;
}

.cls-99 {
  fill: #ddd162;
}

body {max-width: 1440px;}

#needles {
  -webkit-animation: rotate 5s linear infinite;
          animation: rotate 5s linear infinite;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transform-box: fill-box;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg)
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg)
  }
}

#arms {
  -webkit-animation: rotate-out 5s linear infinite;
          animation: rotate-out 5s linear infinite;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transform-box: fill-box;
}

@-webkit-keyframes rotate-out {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
  }
}

@keyframes rotate-out {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
  }
}

#cabins {
  -webkit-animation: cabin-transit 5s linear infinite;
          animation: cabin-transit 5s linear infinite;
  -webkit-transform-origin: 648.22px 301.55px;
      -ms-transform-origin: 648.22px 301.55px;
          transform-origin: 648.22px 301.55px;

}

@-webkit-keyframes cabin-transit {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
  }
}

@keyframes cabin-transit {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
  }
}

.cabin {
  -webkit-animation: cabin-transform 5s linear infinite;
          animation: cabin-transform 5s linear infinite;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transform-box: fill-box;
}

@-webkit-keyframes cabin-transform {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg)
  }
}

@keyframes cabin-transform {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg)
  }
}

#balloon,
#bunch_of_balloons1,
#bunch_of_balloons {
  -webkit-animation: balloon-anim 5s linear infinite;
          animation: balloon-anim 5s linear infinite;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  transform-box: fill-box;
}

@-webkit-keyframes balloon-anim {
  0% {
    -webkit-transform: rotate(0deg) translate(0);
            transform: rotate(0deg) translate(0)
  }
  25% {
    -webkit-transform: rotate(2deg) translateY(5px);
            transform: rotate(2deg) translateY(5px)
  }
  50% {
    -webkit-transform: rotate(-2deg) translateY(-5px);
            transform: rotate(-2deg) translateY(-5px)
  }
  75% {
    -webkit-transform: rotate(-2deg) translateY(5px);
            transform: rotate(-2deg) translateY(5px)
  }
  100% {
    -webkit-transform: rotate(0deg) translate(0);
            transform: rotate(0deg) translate(0)
  }
}

@keyframes balloon-anim {
  0% {
    -webkit-transform: rotate(0deg) translate(0);
            transform: rotate(0deg) translate(0)
  }
  25% {
    -webkit-transform: rotate(2deg) translateY(5px);
            transform: rotate(2deg) translateY(5px)
  }
  50% {
    -webkit-transform: rotate(-2deg) translateY(-5px);
            transform: rotate(-2deg) translateY(-5px)
  }
  75% {
    -webkit-transform: rotate(-2deg) translateY(5px);
            transform: rotate(-2deg) translateY(5px)
  }
  100% {
    -webkit-transform: rotate(0deg) translate(0);
            transform: rotate(0deg) translate(0)
  }
}

#clouds-front {
  -webkit-animation: cloud-transit infinite ease-in-out 5s;
          animation: cloud-transit infinite ease-in-out 5s;
}

#clouds-back {
  -webkit-animation: cloud-transit-2 infinite ease-out 5s;
          animation: cloud-transit-2 infinite ease-out 5s;
}

@-webkit-keyframes cloud-transit {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
    opacity: 0;
  }
}

@keyframes cloud-transit {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
    opacity: 0;
  }
}

@-webkit-keyframes cloud-transit-2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(5%);
            transform: translateX(5%);
  }
}

@keyframes cloud-transit-2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(5%);
            transform: translateX(5%);
  }
}

CodePudding user response：

In the folowing example I'm simplifying your code letting only the main wheel and the cabins.

In fact I'm using only a cabin as a symbol. All the others cabins are use elements, a copy of the symbol. This is simplifying a lot the code.

Although in the begining I intended to use css, I think using animateMotion is the easiest solution. In SVG <animateMotion> provides a way to define how an element moves along a motion path - in this case the path is a circle - the wheel.

Please observe that the motion path is different for each cabin. Although all the motion paths are drawing the same circle, each path starts in a different point - the point where the cabin start it's animation.

Also every <use> element has x="-17.5" y="0" so that the point by which the cabin hangs on the wheel is now in the point {x:0,y:0}.

In order to draw the wheel and the cabins I'm using javascript. If you dont whant javascript you can copy the code from the inspector.

const SVG_NS = "http://www.w3.org/2000/svg";
const SVG_XLINK = "http://www.w3.org/1999/xlink";

let cx = 648.22;
let cy = 301.55;
let r = 158.88;

let t = 0;
let a = Math.PI / 5;
for (let i = 0; i < 2 * Math.PI; i  = a) {
  t  ;

  let x = cx   r * Math.cos(i);
  let _x = cx   r * Math.cos(i   Math.PI);
  let y = cy   r * Math.sin(i);
  let _y = cy   r * Math.sin(i   Math.PI);
  let use = document.createElementNS(SVG_NS, "use");
  use.setAttributeNS(SVG_XLINK, "xlink:href", "#cabin");
  use.setAttribute("x", -17.5);
  use.setAttribute("y", 0);
  use.setAttribute("width", 35);
  use.setAttribute("height", 53);

  let aM = document.createElementNS(SVG_NS, "animateMotion");

  aM.setAttribute(
    "path",
    `M${x},${y}
     A${r},${r} 0 0 1 ${_x},${_y}
     A${r},${r} 0 0 1 ${x},${y}`
  );

  aM.setAttribute("repeatCount", "indefinite");
  aM.setAttribute("dur", "10s");
  use.appendChild(aM);

  cabins.appendChild(use);
}
<svg id="sky_day" data-name="sky day" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1295.87 804.79">
      <symbol id="cabin" viewBox="779.8 357 35 53">
        <path  d="M801.41,357.53a24.71,24.71,0,0,0-4.14-.35V361a26.34,26.34,0,0,1,2.79.15c7.3,0.88,12.21,10.6,12.14,17.29h0c0,6.77-5.32,10.87-12.26,10.74q-1.33-.06-2.67-0.06v20.1h3.83c7.51-.25,13.64-6.44,13.56-13.56V377.94C814.64,370.9,809.6,359.08,801.41,357.53Z" />
        <path  d="M793.13,357.53a24.71,24.71,0,0,1,4.14-.35V361a26.34,26.34,0,0,0-2.79.15c-7.3.88-12.21,10.6-12.14,17.29h0c0,6.77,5.32,10.87,12.26,10.74q1.33-.06,2.67-0.06v20.1h-3.83c-7.51-.25-13.64-6.44-13.56-13.56V377.94C779.89,370.9,784.93,359.08,793.13,357.53Z" />
    </symbol>

    <g id="wheels">
      <circle fill="none" stroke="black" cx="648.22" cy="301.55" r="158.88" />
    </g>

    <g id="cabins">
    </g>
</svg>

Here is the code without javascript:

<svg id="sky_day" data-name="sky day" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1295.87 804.79">
      <symbol id="cabin" viewBox="779.8 357 35 53">
        <path  d="M801.41,357.53a24.71,24.71,0,0,0-4.14-.35V361a26.34,26.34,0,0,1,2.79.15c7.3,0.88,12.21,10.6,12.14,17.29h0c0,6.77-5.32,10.87-12.26,10.74q-1.33-.06-2.67-0.06v20.1h3.83c7.51-.25,13.64-6.44,13.56-13.56V377.94C814.64,370.9,809.6,359.08,801.41,357.53Z"></path>
        <path  d="M793.13,357.53a24.71,24.71,0,0,1,4.14-.35V361a26.34,26.34,0,0,0-2.79.15c-7.3.88-12.21,10.6-12.14,17.29h0c0,6.77,5.32,10.87,12.26,10.74q1.33-.06,2.67-0.06v20.1h-3.83c-7.51-.25-13.64-6.44-13.56-13.56V377.94C779.89,370.9,784.93,359.08,793.13,357.53Z"></path>
      </symbol>

  <g>
    <g id="wheels">
      <circle fill="none" stroke="black" cx="648.22" cy="301.55" r="158.88"></circle>

    </g>

    <g id="cabins">
      <use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
        <animateMotion path="M807.1,301.55A158.88,158.88 0 0 1 489.34000000000003,301.55A158.88,158.88 0 0 1 807.1,301.55" repeatCount="indefinite" dur="10s"></animateMotion>
      </use>
      <use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
        <animateMotion path="M776.7566200662917,394.93732088422814A158.88,158.88 0 0 1 519.6833799337084,208.16267911577188A158.88,158.88 0 0 1 776.7566200662917,394.93732088422814" repeatCount="indefinite" dur="10s"></animateMotion>
      </use>
      <use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
        <animateMotion path="M697.3166200662916,452.653859308974A158.88,158.88 0 0 1 599.1233799337084,150.44614069102602A158.88,158.88 0 0 1 697.3166200662916,452.653859308974" repeatCount="indefinite" dur="10s"></animateMotion>
      </use>
      <use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
        <animateMotion path="M599.1233799337084,452.653859308974A158.88,158.88 0 0 1 697.3166200662916,150.44614069102602A158.88,158.88 0 0 1 599.1233799337084,452.653859308974" repeatCount="indefinite" dur="10s"></animateMotion>
      </use>
      <use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
        <animateMotion path="M519.6833799337085,394.93732088422814A158.88,158.88 0 0 1 776.7566200662916,208.16267911577185A158.88,158.88 0 0 1 519.6833799337085,394.93732088422814" repeatCount="indefinite" dur="10s"></animateMotion>
      </use>
      <use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
        <animateMotion path="M489.34000000000003,301.55A158.88,158.88 0 0 1 807.1,301.54999999999995A158.88,158.88 0 0 1 489.34000000000003,301.55" repeatCount="indefinite" dur="10s"></animateMotion>
      </use>
      <use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
        <animateMotion path="M519.6833799337084,208.16267911577188A158.88,158.88 0 0 1 776.7566200662917,394.9373208842281A158.88,158.88 0 0 1 519.6833799337084,208.16267911577188" repeatCount="indefinite" dur="10s"></animateMotion>
      </use>
      <use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
        <animateMotion path="M599.1233799337084,150.44614069102602A158.88,158.88 0 0 1 697.3166200662918,452.653859308974A158.88,158.88 0 0 1 599.1233799337084,150.44614069102602" repeatCount="indefinite" dur="10s"></animateMotion>
      </use>
      <use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
        <animateMotion path="M697.3166200662916,150.44614069102602A158.88,158.88 0 0 1 599.1233799337084,452.653859308974A158.88,158.88 0 0 1 697.3166200662916,150.44614069102602" repeatCount="indefinite" dur="10s"></animateMotion>
      </use>
      <use xlink:href="#cabin" x="-17.5" y="0" width="35" height="53">
        <animateMotion path="M776.7566200662916,208.16267911577185A158.88,158.88 0 0 1 519.6833799337085,394.93732088422814A158.88,158.88 0 0 1 776.7566200662916,208.16267911577185" repeatCount="indefinite" dur="10s"></animateMotion>
      </use>
    </g>
  </g>

</svg>

Page link：https//www.codepudding.com/Blockchain/522832.html

Prev:Pod Install crashes when building for iOS or macOS
Next:Window theme changes unintentionally
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding