БЛОГ НА HUSL


Как нарисовать и анимировать поезд?

Автор вопроса: Sevastopol'

Меня заинтересовала работа участника @Arthur, где он нарисовал и анимировал движение поезда с использованием технологии SVG.

Вот его ответ на вопрос Движение поезда с помощью SVG:

* {
  margin: 0;
  padding: 0;
}

svg {
  background-color: #ddd;
}

.st0 {
  fill: #A82F2F;
  stroke: #9F9F9F;
}

.st1 {
  opacity: 0.5;
  fill: #5B5B5B;
  stroke: #842323;
}

.st2 {
  fill: #D34040;
  stroke: #9F9F9F;
  stroke-width: 0.5;
}

.st3 {
  fill: #932727;
}

.st4 {
  fill: #D34040;
}

.st5 {
  fill: #5B4343;
}

.first-tr-str0 {
  fill: #DDCCCC;
  stroke: #EAE5E5;
}
<svg width="50%" height="50%" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>    
    <filter id="blur" x="-1" y="-1" width="5" height="5">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
    </filter>
      <rect id="rect" width="95" height="20" fill="#663300" />
</defs>
<g>
  <use xlink:href="#rect" x="150" y="10"/>
  <use xlink:href="#rect" x="150" y="50"/>
  <use xlink:href="#rect" x="150" y="90"/>
  <use xlink:href="#rect" x="150" y="130"/>
  <use xlink:href="#rect" x="150" y="170"/>
  <use xlink:href="#rect" x="150" y="210"/>
  <use xlink:href="#rect" x="150" y="250"/>
  <use xlink:href="#rect" x="150" y="290"/>
  <use xlink:href="#rect" x="150" y="330"/>
  <use xlink:href="#rect" x="150" y="370"/>
</g>
    <g>
      <line x1="230" y1="400" x2="230" y2="0" stroke="#232b2b" stroke-width="5" />
      <line x1="165" y1="400" x2="165" y2="0" stroke="#232b2b" stroke-width="5" />
    </g>
    <g id="train" transform="translate(-350 0)">
      <g>
        <path class="st0" d="M272.8,277.5h-56.2v-72.9c0-9.7,7.9-17.6,17.6-17.6h21c9.7,0,17.6,7.9,17.6,17.6V277.5z" />
        <line class="st1" x1="258.5" y1="187.5" x2="258.5" y2="275.5" />
        <line class="st1" x1="231.5" y1="188" x2="231.5" y2="276" />
        <rect x="200.6" y="275.9" class="st2" width="88" height="66" />
        <path class="st3" d="M252.5,275.5h-16V196c0-1.6,1.3-3,3-3h10.1c1.6,0,3,1.3,3,3V275.5z" />
        <circle class="st4" cx="244.5" cy="210.5" r="7.5" />
        <circle class="st5" cx="244.5" cy="210.5" r="4.5" />
        <rect width="5" height="20" x="212" y="210"/>
        <rect width="5" height="20" x="212" y="250"/>
        <rect width="5" height="20" x="272" y="210"/>
        <rect width="5" height="20" x="272" y="250"/>
        <g>
          <circle cx="244.5" cy="220.5" r="8.5" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 244.5 220.5;360 246.5 220.5" dur="1s" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="244.5" cy="220.5" r="8.5" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 244.5 220.5;90 244.5 220.5" dur="1s" transform="scale(1.1)" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="246.5" cy="230.5" r="6" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 246.5 230.5;90 246.5 230.5" dur="1s" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="244.5" cy="238.5" r="7" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 244.5 238.5;90 244.5 238.5" dur="1s" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="242.5" cy="245.5" r="4" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 242.5 245.5;360 242.5 245.5" dur="1s" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="244.5" cy="250.5" r="9" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 244.5 250.5;90 244.5 250.5" dur="1s" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="246.5" cy="260.5" r="9" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 246.5 260.5;90 246.5 260.5" dur="1s" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="244.5" cy="270.5" r="8" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 244.5 270.5;90 246.5 270.5" dur="1s" transform="scale(1.5)" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="242.5" cy="275.5" r="6" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 242.5 275.5;90 242.5 275.5" dur="1s" transform="scale(1.8)" repeatCount="indefinite"
          />
        </g>
        <g>
          <circle cx="242.5" cy="280.5" r="9" fill="gray" filter="url(#blur)" />
          <animateTransform attributeName="transform" type="rotate" values="0 242.5 280.5;90 242.5 280.5" dur="1s" transform="scale(1.6)" repeatCount="indefinite"
          />
        </g>
      <g>
        <rect width="10" height="9" x="240" y="341" />
        <rect width="90" height="150" x="200" y="350" fill="gray" rx="5" />
      </g>
      <g>
        <rect width="10" height="9" x="240" y="500" />
        <rect width="90" height="150" x="200" y="509" fill="gray" rx="5" />
      </g>
    </g>
    <path id="trainPath" style="fill:none;stroke: transparent;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
      d="m 302.80952,297 c 0,-97.08928571 0,-297.08928571 0,-997.08928571" />
    <animateMotion xlink:href="#train" begin="0s" dur="18s" repeatCount="indefinite">
      <mpath xlink:href="#trainPath" />
    </animateMotion>
  </svg>

Автор: @Arthur

Вопрос: возможно ли нарисовать и воспроизвести подобную анимацию, используя любые другие средства и технологии для рисования и создания эффекта анимации и трансформации, указанные в метках вопроса?


Источник

Ответы (1 шт):

Автор решения: Sevastopol'

Вариант CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  height: 100vh;
}


/*Контейнер*/

.container {
  position: relative;
  width: 50%;
  height: 100%;
  padding-top: 60%;
  background-color: #ddd;
}


/*Дорога*/

.ties {
  position: absolute;
  top: 0;
  left: 38%;
  width: 23.9%;
  height: 100%;
  background: linear-gradient(0deg, #663300 50%, transparent 50%, transparent 100%);
  background-size: 10% 10%;
}

.rails {
  position: absolute;
  top: 0;
  left: 38%;
  width: 24%;
  height: 100%;
  background: linear-gradient(90deg, transparent 15%, #232b2b 15%, #232b2b 20%, transparent 20%, transparent 80%, #232b2b 80%, #232b2b 85%, transparent 85%, transparent 100%);
}


/*Состав*/

.locomotive {
  position: absolute;
  top: 0;
  left: 38.5%;
  width: 23%;
  height: 120%;
  /*background: green;*/
}


/*Локомотив*/

.train {
  position: absolute;
  top: 0;
  left: 22%;
  width: 56%;
  height: 27%;
  background: #A82F2F;
  border: 1px solid #9F9F9F;
  border-radius: 2vw;
}

.train:before {
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  left: 24%;
  width: 48%;
  height: 99%;
  border-left: 1px solid #932727;
  border-right: 1px solid #932727;
}

.train:after {
  content: "";
  display: block;
  position: absolute;
  top: 3%;
  left: 31%;
  width: 36%;
  height: 60%;
  background-color: #932727;
}


/*Труба*/

.pipe {
  position: absolute;
  top: 3%;
  left: 40%;
  width: 19%;
  height: 0;
  padding-top: 19%;
  background-color: #D34040;
  border-radius: 100%;
}

.pipe:before {
  content: "";
  display: block;
  position: absolute;
  top: 18%;
  left: 18%;
  width: 62%;
  height: 0;
  padding-top: 62%;
  background-color: #5B4343;
  border-radius: 100%;
}


/*Дым*/

.smoke {
  position: absolute;
  top: 4.5%;
  left: 30%;
  width: 40%;
  height: 20%;
  border-radius: 100% 100% 20% 20%;
  background: rgba(150, 150, 150, 0.8);
  filter: blur(5px);
}


/*Кабина*/

.cabin {
  position: absolute;
  top: 17%;
  left: 0;
  width: 100%;
  height: 10%;
  background: #D34040;
  border: 1px solid #9F9F9F;
}


/*Колеса*/

.wheel_l,
.wheel_r {
  position: absolute;
  top: 4%;
  width: 7%;
  height: 4%;
  background: black;
  border-radius: 1vw;
}

.wheel_l {
  left: 16%;
}

.wheel_r {
  right: 16%;
}

.wheel_l:before,
.wheel_r:before {
  content: "";
  display: block;
  position: absolute;
  top: 200%;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 1vw;
}


/*Прицепы*/

.trailer_one,
.trailer_two {
  position: absolute;
  left: 0;
  width: 100%;
  height: 27%;
  background: gray;
  border: 1px solid darkgray;
  border-radius: 0.4vw;
}

.trailer_one {
  top: 28%;
}

.trailer_two {
  top: 56%;
}

.trailer_one:before,
.trailer_two:before {
  content: "";
  display: block;
  position: absolute;
  top: -4%;
  left: 42%;
  width: 16%;
  height: calc(4% - 1px);
  background: black;
}


/*Анимация*/

.locomotive {
  animation: 15s infinite linear locomotive;
}

@keyframes locomotive {
  0% {
    top: 120%;
  }
  100% {
    top: -120%;
  }
}
<!--Контейнер-->
<div class="container">
  <!--Дорога-->
  <div class="ties"></div>
  <div class="rails"></div>
  <!--Состав-->
  <div class="locomotive">
    <!--Локомотив-->
    <div class="train"></div>
    <!--Труба-->
    <div class="pipe"></div>
    <!--Кабина-->
    <div class="cabin"></div>
    <!--Дым-->
    <div class="smoke"></div>
    <!--Колеса-->
    <div class="wheel_l"></div>
    <div class="wheel_r"></div>
    <!--Прицепы-->
    <div class="trailer_one"></div>
    <div class="trailer_two"></div>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.