Главная / Программирование и IT / Создай интерактивный drag-and-drop интерфейс на UniApp с анимацией стирки

Создай интерактивный drag-and-drop интерфейс на UniApp с анимацией стирки

Описание промпта

Готовый код для UniApp: перетаскивание карточек в 'стиральную машину', звуковые эффекты, анимация исчезновения и всплывающие уведомления.

Что делает этот промпт

Генерирует код компонента UniApp с логикой drag-and-drop, анимациями и звуковым сопровождением для имитации процесса стирки.

Преимущества

Экономит время на настройку базовой механики взаимодействия, обеспечивает плавный UX и готовую структуру для масштабирования.

Для кого подходит

Разработчики на UniApp, фронтенд-инженеры, создающие интерактивные мобильные интерфейсы.

Инструкция по использованию промпта

Скопируй код в компонент UniApp. Убедись, что пути к аудиофайлам корректны. Настрой размеры зон сброса под свой дизайн.

Что нужно предоставить

Знание Vue.js, опыт работы с событиями касания в UniApp, наличие аудиофайлов для звуковых эффектов.

Что ожидать в результате

Рабочий прототип с перетаскиваемыми карточками, анимацией исчезновения, звуком и обновлением статистики.

Рекомендации

Для продакшена добавь обработку ошибок и оптимизацию производительности анимаций. Звуки лучше загружать асинхронно.

Ограничения

Зависит от поддержки touch-событий в целевой платформе (WeChat, iOS, Android). Может требовать полифиллов для старых версий.

Переменные

UPPER_ASCII

Обязательная

Промпт открыт для всех. Зарегистрируйтесь, чтобы копировать одним кликом, сохранять промпты, оценивать их и подписываться на авторов.

Текст промпта

ChatGPT / Claude / Llama Войти для копирования

Выступи в роли опытного разработчика на UniApp. Твоя задача — создать интерактивный drag-and-drop интерфейс, где карточки перетаскиваются в зону 'стиральной машины'.

Требования к реализации:
1. Используй нативные события touch/drag для UniApp.
2. Реализуй визуальную обратную связь при перетаскивании.
3. Добавь фоновую анимацию пузырьков.
4. При сбросе карточки в зону: проигрывай звук 'gulp-gulp', плавно скрывай карточку (fade-out), показывай всплывающее сообщение 'Clean!'.
5. Обновляй счетчик внизу экрана: 'Cleaned X items today'.

Стиль: чистый, модульный код. Используй {{UPPER_ASCII}} для констант. Не используй сторонние библиотеки, если это возможно.

Создай интерактивный drag-and-drop интерфейс на UniApp с анимацией стирки

Поделитесь в социальных сетях

Комментарии