SVG очень просто реализовать анимацию загрузки Douban

SVG

Когда я в это время посмотрел несколько дорам на Douban, я обнаружил, что анимация загрузки Douban довольно хороша. Поэтому я решил подражать этому и написать один.

效果图

Я пропускаюCSS3СотрудничатьSVGЧтобы завершить эту анимацию загрузки, имитирующую Дубана. Не используетсяSVGНе паникуйте, ниже я напишу соответствующие свойства, чтобы облегчить ваше понимание. Потому что это действительно очень просто. Итак, давайте сразу к делу

инициализировать svg

Нам нужно сначала выполнить статическое笑脸

Инициализировать размер представления SVG

<svg width="100" height="100"></svg>

Я указал ширину и высоту100pxПлощадь,width=”100”а такжеwidth=”100px”эквивалентны.

нарисовать рот

мы кладем嘴巴нарисуй его, вsvgнарисуй круг внутри

<circle class="mouth" cx="50" cy="50" r="14"></circle>

cxа такжеcyточка определения атрибутаxа такжеyкоординировать.

Видим, что в браузере есть закрашенная черная точка

原型

Далее мы добавляем наш ротcssстиль

.mouth {
    fill: none;
    stroke: #00B51D;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 44, 44;
    transform-origin: center;   /* transform动画时以自身中心作为基点 */
}

соответствующее свойство

css-свойство иллюстрировать здесь
fill Цвет заливки нет (без наполнения)
stroke цвет контура #00B51D
stroke-width ширина контура 5
stroke-linecap Формы на обоих концах открытого пути round
stroke-dasharray Создайте пунктирную линию 44, 44
transform-origin Положение базовой точки повернутого элемента центр (самоцентр)

Сосредоточьтесь здесьstroke-dasharray, значение его свойства может бытьnone,<dasharray>а такжеinherit.

<dasharray>это<length>а также<percentage>Последовательность чисел, разделяйте числа запятыми или пробелами и указывайте длину дефисов и пробелов.

Когда параметр: На самом деле это означает длину пунктирной линии и расстояние между каждой пунктирной линией
Когда есть два или более параметра: один для длины и один для интервала

  • stroke-dasharray = '10' означает: пунктирная линия длинная10,интервал10, затем повторите пунктирную линию длинной10,интервал10
  • stroke-dasharray = '10, 5' означает: длина пунктирной линии10,интервал5, затем повторите пунктирную линию длинной10,интервал5
  • stroke-dasharray = '20, 10, 5' означает: длина пунктирной линии20,интервал10, пунктирная линия длинная5, за которым следует интервал20,пунктирная линия10,интервал5, а затем запустите цикл следующим образом

По формуле длины окружностиL=2πr, радиус окружностиr=14,такL=87.96452≈88, то длину пунктирной линии принимаем равной44,интервал44Нарисуйте пунктирную линию, которая составляет ровно половину окружности круга.

Видно, что наш嘴巴часть сделана

原型

рисовать глаза

Далее приступайте к покраске眼睛, я нарисовал ещеcircle.

<circle class="eye" cx="50" cy="50" r="14"></circle>

原型

мы все еще можем пройтиstroke-dasharrayнарисовать пару глаз

первый嘴巴Закомментируйте, чтобы не повлиять на нашу отладку.

Длина тире штрих-dasharray составляет0, вы можете получить无数个Пунктирный круг. Согласно формуле периметра круга выше, мы можем получить периметр как88, то каждый из нас1/4длина22, затем мы регулируем интервал до66. В это время вертикальное расстояние между двумя точками точно90度

Далее мы добавляем наши глазаcssстиль

.eye {
    fill: none;
    stroke: #00B51D;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 0, 66;
}

原型

Чтобы выровнять рот, поворачиваем влево45度,ДатьeyeплюсtransformАтрибуты

transform-origin: center;
transform: rotate(-45deg);

原型

Итак, мы закончили眼睛охватывать

добавить анимацию

После просмотра анимации загрузки Douban в замедленной съемке (кадр за кадром) бесчисленное количество раз, я наконец нашел закономерность (плачет).

анимация рта

Добавление анимационных эффектов, это также самый захватывающий шаг, давайте сначала посмотрим嘴巴часть

原型

Через анимацию мы можем видеть嘴巴часть вращается两圈, и вращается第一圈, расстояние между двумя сторонами уменьшается до1/4,существует第二圈, интервал возвращается к1/2, а в конце есть абзац停留时间.

Согласно последнему абзацу停留时间а также旋转两圈

мы можем пройтиtransformготово, просто

@keyframes mounthAni {
    80%, 100% {
        transform: rotate(720deg);
    }
}

第一圈Когда расстояние между двумя сторонами уменьшается до1/4, то есть в это времяstroke-dasharrayценность44, 22, а затем вернуться к1/2

@keyframes mounthAni {
    40% {
        stroke-dasharray: 44, 22;   /* 间距改为1/4 */
    }
    80%, 100% {
        stroke-dasharray: 44, 44;   /* 间距恢复为1/2 */
        transform: rotate(720deg);
    }
}

Анимация работает со скоростьюНачните быстро, закончите медленно, поэтому мы используемease-outтак какЗначение функции кривой Безье

так嘴巴Анимация завершена

анимация глаз

原型

Точно так же с помощью анимации мы можем видеть, что眼睛Детали также вращаются两圈, и вращается第一圈, расстояние между двумя сторонами увеличивается до7/8,существует第二圈, интервал возвращается к3/4, а в конце есть абзац停留时间.

@keyframes eyeAni {
    40% {
        stroke-dasharray: 0, 77;    /* 间距改为7/8 */
    }
    80%, 100% {
        transform: rotate(675deg);  /* 间距恢复为3/4 */
        stroke-dasharray: 0, 66;
    }
}

Анимация работает со скоростьюначать и закончить медленно, поэтому мы используемease-in-outтак какЗначение функции кривой Безье

Пока наш眼睛Анимация закончена

Мы объединили две анимации, чтобы завершить анимацию загрузки, имитирующую Douban, что очень просто.

效果图

исходный код

html

<svg width="100" height="100">
    <circle class="mouth" cx="50" cy="50" r="14"></circle>
    <circle class="eye" cx="50" cy="50" r="14"></circle>
</svg>

css

.mouth {
    fill: none;
    stroke: #00B51D;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 44, 44;
    transform-origin: center;   /* transform动画时以自身中心作为基点 */
    animation: mounthAni 2.3s ease-out infinite;
}

.eye {
    fill: none;
    stroke: #00B51D;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 0, 66;
    transform-origin: center;
    transform: rotate(-45deg);
    animation: eyeAni 2.3s ease-in-out infinite;
}

@keyframes mounthAni {
    40% {
        stroke-dasharray: 44, 22;   /* 间距改为1/4 */
    }
    80%, 100% {
        stroke-dasharray: 44, 44;   /* 间距恢复为1/2 */
        transform: rotate(720deg);
    }
}

@keyframes eyeAni {
    40% {
        stroke-dasharray: 0, 77;    /* 间距改为7/8 */
    }
    80%, 100% {
        transform: rotate(675deg);  /* 间距恢复为3/4 */
        stroke-dasharray: 0, 66;
    }
}

Суммировать

CSS3Анимация достаточно мощная, но если вы хотите добиться того же интервала, что и выше, вы можете变大变小анимационные эффекты, используйте толькоCSSЯ так и не понял как это реализовать.Если есть способ,прокомментируйте и расскажите 😀,поэтому я им воспользовалсяSVGДобавитьCSSЧтобы сделать,眼睛Некоторые изначально думали об использованииanimateMotionТолько что закончила, но после долгого прочтения до сих пор не могу им пользоваться🤣, поэтому думала пользоваться только имCSSАнимационный эффект завершил эту анимацию, я не ожидал, что она окажется неожиданно простой, поэтому хочу поделиться с вами методом. Вся анимация загрузки вращается вокругstroke-dasharrayрасширять, использоватьSVGАтрибуты — это действительно верхушка айсберга. Если в приведенном выше содержании есть какие-либо ошибки, я надеюсь, что вы можете дать мне дополнительный совет.

Категории