Как сделать плавную пунктированную анимацию c поворотом границы, такую как "марширующие муравьи"
1,00
р.
р.
Я работаю над анимацией css, в которой используются зубья шестеренки и цепь, но я не могу создать smooth последовательность вращения границы. Вы можете видеть в fiddle, как я использую псевдоэлемент для создания эффекта вращения.Это делается путем переключения между пунктирной белой и пунктирной границей золотого цвета, из-за чего кажется, что "граница вращается". Вот код:
Итак, в нижней части snippet вы можете увидеть, как я создал эффект вращающейся цепочки, используя keyframes. Что бы я хотел в целом получить Подумайте о поперечном сечении конвейерной ленты и о том, как шестерни в конце ленты зацепляют её. Я пытаюсь воспроизвести это. То есть впадины пунктирной ленты должны находиться на зубьях шестерни и тянуть её.
Но с золотыми черточками, чтобы они поместились между зубьями шестеренки, а также весь механизм занимал бы 80% ширины экрана (если это имеет смысл). В конечном счете я хотел бы создать что-то вроде этого изображения:
Перевод вопроса: How to make a smooth dashed border rotation animation like 'marching ants' @jbutler483
Ответ Анимация цепи и зубьев шестеренки: Полностью переписал код (CSS и HTML), теперь это: Короче (особенно CSS) Проще Вид механизма стал более реалистичный: исправил проблему синхронизации между цепочкой и шестеренками и добавил недостающую шестерню справа, потому что ваша цепь, казалось,- парила в воздухе:
svg{width:100% } #chain_st{ -webkit-animation: dash 1s infinite linear -moz-animation: dash 1s infinite linear -o-animation: dash 1s infinite linear animation: dash 1s infinite linear } @-webkit-keyframes dash { to { stroke-dashoffset: -5 } } @-moz-keyframes dash { to { stroke-dashoffset: -5 } } @-o-keyframes dash { to { stroke-dashoffset: -5 } } @keyframes dash { to { stroke-dashoffset: -5 } }
Подход тот же, что и анимация угла поворота для зубцов и смещение штрихов для цепи. Я настроил синхронизацию между двумя анимациями, чтобы она выглядела так, как будто шестерни тянут цепь. Browser support : Поскольку IE не поддерживает элемент svg animate, я также сделал эту версию анимации с библиотекой snap.svg, которая также поддерживает IE9 и более (протестирована в IE9 с crossbrowsertesting). DEMO с поддержкой IE
var cont = new Snap('#svg'), chain = cont.select('#chain'), cogAcw = cont.select('#cog_acw'), cogCw = cont.select('#cog_cw'), speed = 500 // Lower this number to make the animation faster function infChain(el) { var len = el.getTotalLength() el.attr({"stroke-dasharray": len/62,"stroke-dashoffset": 0}) el.animate({"stroke-dashoffset": -len/31}, speed, mina.linear, infChain.bind(null, el)) } function rotateAcw(el) { el.transform('r22.5,20,20') el.animate({ transform: 'r-22.5,20,20' }, speed, mina.linear, rotateAcw.bind( null, el)) } function rotateCw(el) { el.transform('r0,20,20') el.animate({ transform: 'r45,20,20' }, speed, mina.linear, rotateCw.bind( null, el)) } infChain(chain) rotateAcw(cogAcw) rotateCw(cogCw) svg { width:100% }
Для современных браузеров
svg{width:100% } #chain_st{ -webkit-animation: dash 1s infinite linear -moz-animation: dash 1s infinite linear -o-animation: dash 1s infinite linear animation: dash 1s infinite linear } @-webkit-keyframes dash { to { stroke-dashoffset: -5 } } @-moz-keyframes dash { to { stroke-dashoffset: -5 } } @-o-keyframes dash { to { stroke-dashoffset: -5 } } @keyframes dash { to { stroke-dashoffset: -5 } }
Предложения к коду автора вопроса: Вы можете использовать другой svg dashed path и анимировать свойство dash-offset с помощью keyframe animation. Это можно и нужно упростить / настроить для использования в "real world": Все элементы могут быть помещены в один тэг (это упростит задачу, и оба элемента шестеренка + цепь могут совместно изменять размер) Синхронизация между цепью и зубчатым колесом не идеальна, и скорость / размер цепи необходимо подкорректировать. Прим. переводчика Ниже в сниппете отвечающий подправил оригинальный код, который был в вопросе топика