Как сделать анимацию масштабирования кольца

внешний интерфейс SVG анимация CSS

Проблема, с которой я столкнулся недавно, заключается в том, как сделать анимацию, которая увеличивает кольцо.Если его увеличить с помощью transform: scale, кольцо станет толще, что будет выглядеть не очень хорошо, как показано на следующем рисунке:

Если изменить анимацию на ширину/высоту, анимация будет выглядеть немного искаженной, как показано на следующем рисунке:

Этот круг рисуется с border-radius: 50%, поэтому, когда ширина/высота становятся больше, радиус круга становится больше, но при изменении он деформируется. Если изменить использование отступов для анимации, эффект тот же, что мне делать? Один из способов — сделать время анимации немного меньше, она будет выглядеть светлее, но в конце концов это не принципиальное решение.

Я искал в Интернете и не нашел хорошего способа.Некоторые используют JS для динамического расчета ширины/высоты, но на самом деле это то же самое.

Наконец, я задумался, можно ли использовать SVG для анимации? Пробовал, точно.

Сначала используйте SVG для рисования, прежде чем использовать метод html + css, теперь нам нужно его изменить. Как показано в следующем коде:

<svg width="22px" height="22px">
    <circle r="8" cx="11" cy="11" fill="#fff" stroke="#2492fc"/>
</svg>

круг означает рисовать круг, центр находится в (11, 11), радиус 8 пикселей, заливка белая, а обводка # 2492fc, Если вы установите fill="none", тогда цвет заливки будет прозрачным . Я полагаю, что многие люди относительно незнакомы с SVG, поэтому я кратко представлю его здесь. Помимо круга, на следующем рисунке показаны другие часто используемые элементы метки чертежа:

Существует также путь для рисования пути, как показано на следующем рисунке:

это онлайнSVG рисунокИнструмент выходит, и код SVG будет отображаться после рисования. В пути можно использовать кривую Безье, которая является очень распространенной кривой, а также используется в анимации CSS для управления скоростью анимации:

Кривая Безье (третьего порядка) строится по четырем точкамгладкийКривая этого вектора имеет большое значение в графике.

Здесь представлены основные элементы SVG Теперь давайте обсудим, как делать анимацию? Мы должны анимировать радиус, как показано ниже, используя тег animate:

Начало определяет время начала анимации, которое может быть неопределенным, чтобы указать на бесконечный цикл, или указать определенное количество секунд, или после анимации, это также может быть событие, такое как наведение/щелчок/отсутствие мыши и т. д. выше используется mouseover, то есть зависание При этом радиус будет меняться от маленького к большому.Если вы хотите, чтобы мышь отводилась после отхода, вы можете добавить амимат, как показано в следующем коде:

<svg width="22px" height="22px">
    <circle r="8" cx="11" cy="11" fill="#fff" stroke="#2492fc">
        <animate attributeName="r" from="8" to="10" dur="0.3s" begin="mouseover" fill="freeze" class="magnify"/>
        <animate attributeName="r" from="10" to="8" dur="0.3s" begin="mouseout" fill="freeze" class="shrink"/>
    </circle>
</svg>

Если вы хотите управлять им с помощью JS, вы можете получить этот анимированный элемент, а затем использовать его метод beginElement для запуска анимации, как показано в следующем коде:

// 如果选中的话，就做放大的动画
if (checked) {
    $("animate.magnify").beginElement();
}
// 如果失去选中态的话就做缩小动画
else {
    $("animate.shrink").beginElement();
}

Таким образом, анимация будет выглядеть намного более элегантно, как показано на следующем рисунке:

Кроме того, вы можете использовать анимацию CSS и т. д. для управления анимацией SVG.

Выше представлена ​​только простейшая анимация SVG, можно увидеть более сложные эффекты.CSS Tricksруководство. Например, вы можете анимировать фигуры:

Другой пример — анимация, которая движется по пути:

Главное, что я хочу сказать в этой статье: когда вы обнаружите, что html не очень хорош для анимации, вы можете попробовать сделать это с помощью svg.Несколько строк svg могут сделать очень плавную анимацию. Например, статья «Animating Border"Вводит несколько способов сделать рамку более толстой анимации. Автор последовательно использовал border-width/outline/clip-path/linear-gradient/box-shadow и т.д., конечный эффект не очень хорош, лучше использовать svg напрямую Сделай это.


Категории