Поворот метра в CSS - PullRequest
Новая
       21

Поворот метра в CSS

0 голосов
/ 11 декабря 2019

У меня есть SVG-изображение (показано ниже) , и мне нужно сделать анимацию на приборной панели hand . Анимация, которую я пытаюсь сделать, это (стрелка измерителя) , вращающаяся на 90 градусов влево и на 90 градусов вправо (анимация продолжается) . В идеале свойство анимации для анимации такого типа - Transform: rotate() ", но вместо него можно использовать другое свойство. У кого-нибудь есть представление о том, как это можно сделать? Я использую CSS и HTML.

Это SVG:

Вот как его нужно повернуть: (влево)

enter image description here

Повернуто вправо:

enter image description here

Это код SVG: (стрелка измерителя имеет идентификатор «MeterHand») и CSS, который я пробовал (если вы запустите его, вы увидите, что SVG вращается как единое целое и вращается только в одном направлении. Идея анимациидолжен иметь возможность вращаться, как показано на изображениях выше) 

#MeterHand {
  -webkit-animation: spin 4s linear;
  -moz-animation: spin 4s linear;
  animation: spin 4s linear;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(90deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(90deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
<svg xmlns="http://www.w3.org/2000/svg" width="488" height="486">
  <path fill="none" d="M216 294H20.33"/>
  <circle class="DashboardBorder" fill="#E6E7E8" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.417" cy="245" r="235.417"/>
  <circle class="MiddleCircle" fill="#BCBEC0" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.333" cy="245.001" r="29.333"/>
  <path fill="#A7A9AC" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M164.667 365.333h158.666l17.667 58H147.333z"/>
  <path id="MeterLevel7" fill-rule="evenodd" clip-rule="evenodd" fill="#ED1C24" stroke="#ED1C24" stroke-width="3" stroke-miterlimit="10" d="M308.889 283.393c6.28-10.192 9.359-21.405 9.656-33.513.083-3.389 1.115-4.322 4.658-4.276 41.25.53 82.497.857 123.744 1.252 6.291.055 6.11.065 6.032 6.4-.287 21.744-3.985 42.853-11.11 63.239-3.06 8.73-6.865 17.247-10.971 25.547a329.33 329.33 0 01-4.646 9.066l-117.363-67.715z"/>
  <path id="MeterLevel6" fill-rule="evenodd" clip-rule="evenodd" fill="#EA5862" stroke="#E95762" stroke-width="3" stroke-miterlimit="10" d="M319.232 246.941c.27-11.961-2.697-23.188-8.48-33.782-1.619-2.965-1.205-4.291 1.839-6.039 35.414-20.355 70.725-40.883 106.068-61.354 5.387-3.127 5.239-3.026 8.33 2.477 10.598 18.902 17.97 38.978 22.062 60.159 1.745 9.075 2.749 18.342 3.388 27.573.233 3.38.433 6.775.563 10.165l-133.77.801z"/>
  <path id="MeterLevel5" fill-rule="evenodd" clip-rule="evenodd" fill="#F7941E" stroke="#F7941E" stroke-width="3" stroke-miterlimit="10" d="M308.366 208.24c-5.579-10.374-13.599-18.53-23.746-24.765-2.838-1.745-3.126-3.083-1.345-6.073 20.7-34.8 41.229-69.697 61.814-104.562 3.133-5.32 3.057-5.162 8.401-1.965 18.343 10.985 34.468 24.557 48.298 40.686 5.918 6.914 11.29 14.356 16.327 21.947a316.161 316.161 0 015.427 8.427L308.366 208.24z"/>
  <path id="MeterLevel4" fill-rule="evenodd" clip-rule="evenodd" fill="#E9A254" stroke="#E9A255" stroke-width="3" stroke-miterlimit="10" d="M281.401 181.862c-10.78-6.625-22.52-10.083-35.097-10.791-3.518-.198-4.521-1.26-4.586-4.803-.781-41.22-1.774-82.445-2.697-123.667-.146-6.287-.129-6.108 6.45-5.813 22.578 1.022 44.605 5.437 65.994 13.25 9.16 3.356 18.123 7.449 26.87 11.836a364.784 364.784 0 019.56 4.95l-66.494 115.038z"/>
  <path id="MeterLevel3" fill-rule="evenodd" clip-rule="evenodd" fill="#00AEEF" stroke="#00AEEF" stroke-width="3" stroke-miterlimit="10" d="M243.596 170.132c-11.194.202-21.565 3.643-31.219 9.898-2.701 1.75-3.959 1.386-5.726-1.616-20.588-34.909-41.334-69.707-62.027-104.54-3.162-5.309-3.062-5.166 1.952-8.503 17.211-11.441 35.661-19.675 55.287-24.646 8.411-2.121 17.033-3.503 25.638-4.514 3.147-.371 6.317-.707 9.481-.973l6.614 134.894z"/>
  <path id="MeterLevel2" fill-rule="evenodd" clip-rule="evenodd" fill="#65CCED" stroke="#65CCED" stroke-width="3" stroke-miterlimit="10" d="M206.728 182.666c-10.256 5.49-18.325 13.409-24.491 23.437-1.726 2.805-3.048 3.086-6.004 1.312-34.399-20.618-68.896-41.065-103.36-61.567-5.259-3.122-5.104-3.043-1.94-8.33 10.866-18.132 24.289-34.057 40.237-47.701 6.839-5.839 14.197-11.135 21.705-16.1a316.26 316.26 0 018.333-5.348l65.52 114.297z"/>
  <path id="MeterHand" fill="#36374C" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M245.86 82.888c.45 5.531.935 11.064 1.339 16.602.964 13.229 2.078 26.464 3.275 39.674 1.446 15.945 2.766 31.944 3.817 47.92.917 13.937 1.823 27.864 3.666 41.715 1.197 9 2.871 19.793-.075 28.599-4.139 12.368-20.653 12.815-25.296.628-2.727-7.159-.872-17.067-.336-24.569.39-5.453 1.511-10.767 2.365-16.154 2.056-12.965 2.151-26.227 3.488-39.28 1.462-14.285 2.496-28.572 3.61-42.885.918-11.768 2.071-23.51 2.847-35.29.36-5.469 1.128-10.968 1.293-16.444.006-.17.02-.348.007-.516z"/>
  <circle class="SmallCircle" fill="#FFF" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="243.878" cy="246.142" r="6.833"/>
  <path id="MeterLevel1" fill-rule="evenodd" clip-rule="evenodd" fill="#58595B" stroke="#58595B" stroke-width="3" stroke-miterlimit="10" d="M179.439 207.227c-6.423 10.313-9.725 21.616-10.313 33.779-.165 3.403-1.201 4.354-4.686 4.353-40.536-.007-81.078.191-121.616.322-6.183.026-6.007.013-5.773-6.353.812-21.842 4.964-43.087 12.466-63.65 3.224-8.808 7.171-17.41 11.413-25.797a350.157 350.157 0 014.787-9.166l113.722 66.512z"/>
</svg>

Ответы [ 2 ]

2 голосов
/ 11 декабря 2019

У вас уже есть большая часть кода, который вам нужен.

Основное изменение, которое поможет вам в большей части пути, - это добавление transform-origin: 50%; для настройки точки вращения элемента.

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

А также, animation-fill-mode: forwards;, чтобы остановить анимацию в последнем кадре. 

#MeterHand {
  transform-origin: 50%;
  animation: spin 4s linear;
  animation-fill-mode: forwards;
}

@keyframes spin {
  50% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(120deg);
  }
}
<!DOCTYPE hmtl>
<html>

<head>
  <link rel="stylesheet" href="animation.css">
</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="488" height="486">
      <path fill="none" d="M216 294H20.33"/>
        <circle class="DashboardBorder" fill="#E6E7E8" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.417" cy="245" r="235.417"/>
        <circle class="MiddleCircle" fill="#BCBEC0" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.333" cy="245.001" r="29.333"/>
        <path fill="#A7A9AC" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M164.667 365.333h158.666l17.667 58H147.333z"/>
        <path id="MeterLevel7" fill-rule="evenodd" clip-rule="evenodd" fill="#ED1C24" stroke="#ED1C24" stroke-width="3" stroke-miterlimit="10" d="M308.889 283.393c6.28-10.192 9.359-21.405 9.656-33.513.083-3.389 1.115-4.322 4.658-4.276 41.25.53 82.497.857 123.744 1.252 6.291.055 6.11.065 6.032 6.4-.287 21.744-3.985 42.853-11.11 63.239-3.06 8.73-6.865 17.247-10.971 25.547a329.33 329.33 0 01-4.646 9.066l-117.363-67.715z"/>
        <path id="MeterLevel6" fill-rule="evenodd" clip-rule="evenodd" fill="#EA5862" stroke="#E95762" stroke-width="3" stroke-miterlimit="10" d="M319.232 246.941c.27-11.961-2.697-23.188-8.48-33.782-1.619-2.965-1.205-4.291 1.839-6.039 35.414-20.355 70.725-40.883 106.068-61.354 5.387-3.127 5.239-3.026 8.33 2.477 10.598 18.902 17.97 38.978 22.062 60.159 1.745 9.075 2.749 18.342 3.388 27.573.233 3.38.433 6.775.563 10.165l-133.77.801z"/>
        <path id="MeterLevel5" fill-rule="evenodd" clip-rule="evenodd" fill="#F7941E" stroke="#F7941E" stroke-width="3" stroke-miterlimit="10" d="M308.366 208.24c-5.579-10.374-13.599-18.53-23.746-24.765-2.838-1.745-3.126-3.083-1.345-6.073 20.7-34.8 41.229-69.697 61.814-104.562 3.133-5.32 3.057-5.162 8.401-1.965 18.343 10.985 34.468 24.557 48.298 40.686 5.918 6.914 11.29 14.356 16.327 21.947a316.161 316.161 0 015.427 8.427L308.366 208.24z"/>
        <path id="MeterLevel4" fill-rule="evenodd" clip-rule="evenodd" fill="#E9A254" stroke="#E9A255" stroke-width="3" stroke-miterlimit="10" d="M281.401 181.862c-10.78-6.625-22.52-10.083-35.097-10.791-3.518-.198-4.521-1.26-4.586-4.803-.781-41.22-1.774-82.445-2.697-123.667-.146-6.287-.129-6.108 6.45-5.813 22.578 1.022 44.605 5.437 65.994 13.25 9.16 3.356 18.123 7.449 26.87 11.836a364.784 364.784 0 019.56 4.95l-66.494 115.038z"/>
        <path id="MeterLevel3" fill-rule="evenodd" clip-rule="evenodd" fill="#00AEEF" stroke="#00AEEF" stroke-width="3" stroke-miterlimit="10" d="M243.596 170.132c-11.194.202-21.565 3.643-31.219 9.898-2.701 1.75-3.959 1.386-5.726-1.616-20.588-34.909-41.334-69.707-62.027-104.54-3.162-5.309-3.062-5.166 1.952-8.503 17.211-11.441 35.661-19.675 55.287-24.646 8.411-2.121 17.033-3.503 25.638-4.514 3.147-.371 6.317-.707 9.481-.973l6.614 134.894z"/>
        <path id="MeterLevel2" fill-rule="evenodd" clip-rule="evenodd" fill="#65CCED" stroke="#65CCED" stroke-width="3" stroke-miterlimit="10" d="M206.728 182.666c-10.256 5.49-18.325 13.409-24.491 23.437-1.726 2.805-3.048 3.086-6.004 1.312-34.399-20.618-68.896-41.065-103.36-61.567-5.259-3.122-5.104-3.043-1.94-8.33 10.866-18.132 24.289-34.057 40.237-47.701 6.839-5.839 14.197-11.135 21.705-16.1a316.26 316.26 0 018.333-5.348l65.52 114.297z"/>
        <path id="MeterHand" fill="#36374C" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M245.86 82.888c.45 5.531.935 11.064 1.339 16.602.964 13.229 2.078 26.464 3.275 39.674 1.446 15.945 2.766 31.944 3.817 47.92.917 13.937 1.823 27.864 3.666 41.715 1.197 9 2.871 19.793-.075 28.599-4.139 12.368-20.653 12.815-25.296.628-2.727-7.159-.872-17.067-.336-24.569.39-5.453 1.511-10.767 2.365-16.154 2.056-12.965 2.151-26.227 3.488-39.28 1.462-14.285 2.496-28.572 3.61-42.885.918-11.768 2.071-23.51 2.847-35.29.36-5.469 1.128-10.968 1.293-16.444.006-.17.02-.348.007-.516z"/>
        <circle class="SmallCircle" fill="#FFF" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="243.878" cy="246.142" r="6.833"/>
        <path id="MeterLevel1" fill-rule="evenodd" clip-rule="evenodd" fill="#58595B" stroke="#58595B" stroke-width="3" stroke-miterlimit="10" d="M179.439 207.227c-6.423 10.313-9.725 21.616-10.313 33.779-.165 3.403-1.201 4.354-4.686 4.353-40.536-.007-81.078.191-121.616.322-6.183.026-6.007.013-5.773-6.353.812-21.842 4.964-43.087 12.466-63.65 3.224-8.808 7.171-17.41 11.413-25.797a350.157 350.157 0 014.787-9.166l113.722 66.512z"/>
  </svg>
</body>

</html>
1 голос
/ 11 декабря 2019

Вам нужно добавить transform-origin , чтобы определить, в какую точку должно вращаться изображение: 

#MeterHand {
  -webkit-animation: spin 4s linear;
  -moz-animation: spin 4s linear;
  animation: spin 4s linear;
  transform-origin:50% 50% 0;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(90deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(90deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}


}
<!DOCTYPE hmtl>
<html>

<head>
  <link rel="stylesheet" href="animation.css">
</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="488" height="486">
            <path fill="none" d="M216 294H20.33"/>
              <circle class="DashboardBorder" fill="#E6E7E8" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.417" cy="245" r="235.417"/>
              <circle class="MiddleCircle" fill="#BCBEC0" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.333" cy="245.001" r="29.333"/>
              <path fill="#A7A9AC" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M164.667 365.333h158.666l17.667 58H147.333z"/>
              <path id="MeterLevel7" fill-rule="evenodd" clip-rule="evenodd" fill="#ED1C24" stroke="#ED1C24" stroke-width="3" stroke-miterlimit="10" d="M308.889 283.393c6.28-10.192 9.359-21.405 9.656-33.513.083-3.389 1.115-4.322 4.658-4.276 41.25.53 82.497.857 123.744 1.252 6.291.055 6.11.065 6.032 6.4-.287 21.744-3.985 42.853-11.11 63.239-3.06 8.73-6.865 17.247-10.971 25.547a329.33 329.33 0 01-4.646 9.066l-117.363-67.715z"/>
              <path id="MeterLevel6" fill-rule="evenodd" clip-rule="evenodd" fill="#EA5862" stroke="#E95762" stroke-width="3" stroke-miterlimit="10" d="M319.232 246.941c.27-11.961-2.697-23.188-8.48-33.782-1.619-2.965-1.205-4.291 1.839-6.039 35.414-20.355 70.725-40.883 106.068-61.354 5.387-3.127 5.239-3.026 8.33 2.477 10.598 18.902 17.97 38.978 22.062 60.159 1.745 9.075 2.749 18.342 3.388 27.573.233 3.38.433 6.775.563 10.165l-133.77.801z"/>
              <path id="MeterLevel5" fill-rule="evenodd" clip-rule="evenodd" fill="#F7941E" stroke="#F7941E" stroke-width="3" stroke-miterlimit="10" d="M308.366 208.24c-5.579-10.374-13.599-18.53-23.746-24.765-2.838-1.745-3.126-3.083-1.345-6.073 20.7-34.8 41.229-69.697 61.814-104.562 3.133-5.32 3.057-5.162 8.401-1.965 18.343 10.985 34.468 24.557 48.298 40.686 5.918 6.914 11.29 14.356 16.327 21.947a316.161 316.161 0 015.427 8.427L308.366 208.24z"/>
              <path id="MeterLevel4" fill-rule="evenodd" clip-rule="evenodd" fill="#E9A254" stroke="#E9A255" stroke-width="3" stroke-miterlimit="10" d="M281.401 181.862c-10.78-6.625-22.52-10.083-35.097-10.791-3.518-.198-4.521-1.26-4.586-4.803-.781-41.22-1.774-82.445-2.697-123.667-.146-6.287-.129-6.108 6.45-5.813 22.578 1.022 44.605 5.437 65.994 13.25 9.16 3.356 18.123 7.449 26.87 11.836a364.784 364.784 0 019.56 4.95l-66.494 115.038z"/>
              <path id="MeterLevel3" fill-rule="evenodd" clip-rule="evenodd" fill="#00AEEF" stroke="#00AEEF" stroke-width="3" stroke-miterlimit="10" d="M243.596 170.132c-11.194.202-21.565 3.643-31.219 9.898-2.701 1.75-3.959 1.386-5.726-1.616-20.588-34.909-41.334-69.707-62.027-104.54-3.162-5.309-3.062-5.166 1.952-8.503 17.211-11.441 35.661-19.675 55.287-24.646 8.411-2.121 17.033-3.503 25.638-4.514 3.147-.371 6.317-.707 9.481-.973l6.614 134.894z"/>
              <path id="MeterLevel2" fill-rule="evenodd" clip-rule="evenodd" fill="#65CCED" stroke="#65CCED" stroke-width="3" stroke-miterlimit="10" d="M206.728 182.666c-10.256 5.49-18.325 13.409-24.491 23.437-1.726 2.805-3.048 3.086-6.004 1.312-34.399-20.618-68.896-41.065-103.36-61.567-5.259-3.122-5.104-3.043-1.94-8.33 10.866-18.132 24.289-34.057 40.237-47.701 6.839-5.839 14.197-11.135 21.705-16.1a316.26 316.26 0 018.333-5.348l65.52 114.297z"/>
              <path id="MeterHand" fill="#36374C" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M245.86 82.888c.45 5.531.935 11.064 1.339 16.602.964 13.229 2.078 26.464 3.275 39.674 1.446 15.945 2.766 31.944 3.817 47.92.917 13.937 1.823 27.864 3.666 41.715 1.197 9 2.871 19.793-.075 28.599-4.139 12.368-20.653 12.815-25.296.628-2.727-7.159-.872-17.067-.336-24.569.39-5.453 1.511-10.767 2.365-16.154 2.056-12.965 2.151-26.227 3.488-39.28 1.462-14.285 2.496-28.572 3.61-42.885.918-11.768 2.071-23.51 2.847-35.29.36-5.469 1.128-10.968 1.293-16.444.006-.17.02-.348.007-.516z"/>
              <circle class="SmallCircle" fill="#FFF" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="243.878" cy="246.142" r="6.833"/>
              <path id="MeterLevel1" fill-rule="evenodd" clip-rule="evenodd" fill="#58595B" stroke="#58595B" stroke-width="3" stroke-miterlimit="10" d="M179.439 207.227c-6.423 10.313-9.725 21.616-10.313 33.779-.165 3.403-1.201 4.354-4.686 4.353-40.536-.007-81.078.191-121.616.322-6.183.026-6.007.013-5.773-6.353.812-21.842 4.964-43.087 12.466-63.65 3.224-8.808 7.171-17.41 11.413-25.797a350.157 350.157 0 014.787-9.166l113.722 66.512z"/>
        </svg>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...