Может ли кто-нибудь помочь мне в том, как выполняется анимация кадра с помощью js или css. Я на самом деле пытаюсь достичь той же анимации, что и here. Я озадачен тем, как работает дорожная анимация. Это любой плагин, который делает это или просто js и cssАнимационные рамки
ответ
- Я сделал это как изображение (SVG).
- Я анимирую его с чистой анимацией HTML5 и CSS3.
- С классом
.path
и@keyframes
. - К сожалению, не поддерживается в IE и сафари.
Вот код:
.line{
width: 65%;
margin: 0 auto;
}
svg{
display: block;
}
#svg path.path{
stroke-dasharray: 3000;
stroke-dashoffset: 4000;
stroke-width: 2;
-webkit-animation:lines 5s linear forwards;
-moz-animation:lines 5s linear forwards;
-ms-animation:lines 5s linear forwards;
-0-animation:lines 5s linear forwards;
animation: lines 5s linear forwards;
}
@keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0; }
}
@-webkit-keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0; }
}
@-moz-keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0;}
}
@-ms-keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0; }
}
@-o-keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0; }
}
<div class="line">
<svg id="svg" stroke="#000" stroke-miterlimit="1000" id="Layer_1" style="opacity:1;" x="0px" y="0px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<path class="path" fill="#fff" stroke="#000" stroke-miterlimit="1000" stroke-dasharray="11.9901,11.9901" d="M52.652,248.08
\t \t \t c30.97,37.245,74.957,63.396,122.172,75.244c53.056,13.313,109.816,9.162,161.756-7.968
\t \t \t c42.308-13.953,83.007-37.533,108.174-74.156c4.655-6.774,8.818-14.153,10.027-22.271c2.24-15.044-6.187-29.969-17.51-40.177
\t \t \t c-28.483-25.679-73.116-26.422-108.534-11.588c-54.196,22.698-92.323,81.422-86.252,139.649
\t \t \t c6.07,58.228,59.091,109.265,117.886,109.022c20.716-0.085,41.065-5.884,60.092-14.042c18.307-7.85,35.789-18.023,50.322-31.606
\t \t \t c14.503-13.555,25.718-30.139,37.837-45.845c17.476-22.649,37.883-44.311,64.254-55.552c26.37-11.241,59.879-9.795,80.612,9.943
\t \t \t c30.67,29.196,23.317,84.899,56.145,111.668c29.1,23.729,74.437,10.683,102.618-14.121c32.31-28.438,51.374-68.875,65.118-109.573
\t \t \t c12.464-36.907,21.327-75.103,35.836-111.202" />
</svg>
</div>
Я надеюсь, что поможет вам и добро пожаловать всем, если можно изменить мой код, чтобы поддерживать его в IE и сафари.
Awesome. Именно этого я и хотел. Но, пожалуйста, скажите мне, как вы создали такую гладкую кривую в svg? Я построил аналогичный график, но на кривых он был очень резким. –
Поскольку у меня есть сенсорный экран, поэтому я использовал свою руку, а затем сохранил его как изображение, а затем использовал любой веб-сайт, например http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html. вы можете использовать adobe illstrator. Так как вам нравится мой ответ, пожалуйста, также сделайте лучший ответ. спасибо –
ohhhh: (... у меня этого нет, но в любом случае, спасибо много :) –
- 1. Анимационные маркеры
- 2. Анимационные инструменты
- 3. Анимационные окно прокрутки
- 4. Анимационные спрайт через MKMapView
- 5. Анимационные в SVG Group
- 6. Анимационные изменение высоты UICollectionView
- 7. Анимационные объект внутри холста
- 8. Android Анимация не Анимационные
- 9. QuartzCore анимационные фигуры?
- 10. CATransaction (еще) не Анимационные
- 11. Scripting Анимационные блоки iOS
- 12. JQuery анимационные баннеры
- 13. jQuery анимационные проблемы?
- 14. jQuery - paddingTop анимационные проблемы?
- 15. jQuery не анимационные ссылки
- 16. Анимационные спрайты в Cocos2d
- 17. Анимационные вход типа RANGE
- 18. Анимационные макеты JavaFX
- 19. Анимационные ограничения для iOS xibs
- 20. Анимационные прогресс бары с CSS
- 21. Анимационные остановки после первого кадра
- 22. Раздвижные анимационные заикания в аккордеоне
- 23. Последовательные анимационные вызовы не работают
- 24. Цель C - Анимационные блоки, мультипараметры
- 25. Анимационные блоки, мешающие друг другу
- 26. Edge Animate: Анимационные весы неправильные
- 27. CSS3 Анимационные меню Текущая страница
- 28. Анимационные камеры на определенной позиции
- 29. Анимационные пользовательский QGraphicsItem с QPropretyAnimation
- 30. Анимационные Представляющий вид в UIPresentationController
[link] (http://djump.in) –
Это предварительная анимированная графика, в которой каждый кадр объединен с спрайтом (я просто заглянул). Вы также можете использовать SVG и холст для этого. http://djump.in/assets/spritesheets/road-dde022c59294f8a4eb3bc6e544a18e55.png – K3N
это делается с использованием плагина Kineograph из [здесь] (https://github.com/epicagency/kineograph) (заглядывает глубже) – Banana