Во время моей предыдущей стажировки у меня было требование встроить страницу H5 на стороне Android для реализации голосового ввода и включения анимации и прыгающих мячей во время ввода. Благодаря изучению различных материалов и на основе реальных сценариев спроса его функция была наконец реализована. Давайте рассмотрим и запишем это здесь.
Сначала реализуем отбивание одиночного мяча.
Анализ: мяч начинается сверху, достигает низа в середине периода и, наконец, возвращается наверх, и это бесконечный цикл. Достигается путем объединения относительного позиционирования с ключевыми кадрами CSS3.
<div class="ball"></div>
.мяч {
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 50%;
положение: относительное;
имя-анимации: прыгающий; // Имя анимации анимация-длительность: 1.6s; // Продолжительность одной анимации анимация-итерации-счетчик: бесконечный // Фон бесконечного цикла анимации: rgb(244, 7, 7); цвет}
//Анимация ключевых кадров @keyframes jumping {
0% {
top: 0px; //Изначально вверху}
50% {
верх: 100 пикселей // посередине внизу}
100% {
top: 0px // Наконец возвращаемся наверх}
}Анализ: одновременно прыгают несколько мячей, и их относительное расположение должно быть разным. Во-вторых, в начале анимации каждого мяча есть разница во времени, а во-вторых, в цвете мяча.
/** шары = [1,2,3,4,5] несколько шаров*/
<div v-for="шар в шариках" :key="ball" :class="['ball', `ball${ball}`]"></div> //Публичный стиль извлечения.ball {
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 50%;
положение: относительное;
анимация-имя: прыгающий; // Имя анимации анимация-длительность: 1.6s // Продолжительность одной анимации анимация-итерации-счетчик: бесконечный // Бесконечный цикл анимации};
.ball1 {
@расширить .ball;
слева: 0;
фон: RGB(244, 7, 7);
}
.ball2 {
@расширить .ball;
анимация-задержка: 0,25 с // Задержка анимации слева: 30 пикселей;
фон: RGB(16, 106, 241);
}
.ball3 {
@расширить .ball;
анимация-задержка: 0,5 с // задержка анимации слева: 60 пикселей;
фон: RGB(251, 236, 13);
}
.ball4 {
@расширить .ball;
анимация-задержка: 0,75 с // Задержка анимации слева: 90 пикселей;
фон: RGB(233, 23, 233);
}
.ball5 {
@расширить .ball;
анимация-задержка: 1,0 с // Задержка анимации слева: 120 пикселей;
фон: RGB(6, 247, 6);
}
//Анимация ключевых кадров @keyframes jumping {
0% {
top: 0px; //Изначально вверху}
50% {
верх: 100 пикселей // посередине внизу}
100% {
top: 0px // Наконец возвращаемся наверх}
}Демо
Анализ: мониторинг событий привязки, анимация длительного нажатия кнопки отображается, а анимация отпускания кнопки скрыта.
Наконец пришло время применить его и увидеть достигнутый эффект.
<el-button id="bouncingBallBtn">Голосовой ввод</el-button> <bouncing-ball v-if="showBoucing" />
/** данные showBoucing: false */
смонтирован() {
let theBoucingBtn = document.getElementById("bouncingBallBtn");
//Мобильный терминал theBuncingBtn.addEventListener("touchstart", this.startBoucing, false);
theBuncingBtn.addEventListener("touchend", this.endBoucing, false);
// На стороне ПК theBouncingBtn.addEventListener("mousedown", this.startBoucing, false);
theBuncingBtn.addEventListener("mouseup", this.endBoucing, false);
}
/** Отображение анимации*/
startBoucing (событие) {
событие.preventDefault();
this.showBoucing = правда;
},
/** Скрытие анимации*/
endBoucing (событие) {
событие.preventDefault();
this.showBoucing = ложь;
},На этом завершается статья об анимации CSS3 для реализации нескольких прыгающих мячей (анимация голосового ввода). Для получения дополнительной информации о прыгающих мячах CSS3 выполните поиск по предыдущим статьям на сайте downcodes.com или продолжайте просматривать соответствующие статьи ниже. Надеюсь, вы поддержите даункоды. com больше в будущем!