Редактируемая AI-анимация: два проверенных процесса
Создайте, проверьте и скачайте Canvas-цикл и интерактивное SVG-объяснение.
Published · Aixio
Практичный способ создавать редактируемую AI-анимацию — просить небольшой браузерный проект, а не только плоский ролик. В двух отдельных пространствах Aixio Website мы сделали атмосферный цикл Canvas/Web Audio и интерактивный урок SVG, проверили точные кадры на десктопе и мобильной ширине и экспортировали исходники. Оба запускаемых ZIP доступны ниже.
Зачем делать анимацию в исходниках браузера?
Видео удобно публиковать, но изменение текста, времени, кривой или компоновки часто требует новой генерации. Браузерная анимация сохраняет эти решения в HTML, CSS и JavaScript. Редактор может менять файлы, разработчик — проверять таймлайн, а докладчик — сохранять интерактивность.
Общий производственный контракт: оригинальные входы, зафиксированный текст, заданная длительность, управление воспроизведением, сложный контрольный кадр, детерминированный seek(seconds), автономная работа и ZIP с исходниками. Aixio сохранил бриф, рабочие файлы и Website-превью в одном проекте. Тот же технический шаблон можно реализовать в другой среде; проверенное преимущество здесь — связанный процесс сборки и проверки, а не эксклюзивный рендерер.
Процесс 1: атмосферный цикл Tideglass
Аудитория и задача. Редактору соцсетей или звука нужен 24-секундный квадратный фон с оригинальным процедурным саундтреком.
Подготовка входа. Мы задали вымышленное имя Tideglass, четыре названия этапов и палитру из четырёх цветов. Референсов и стороннего аудио не было. Canvas2D подходит для непрерывного генеративного материала, а Web Audio оставляет звук редактируемым и не требует лицензии на внешний сэмпл.
Промпт и выполнение. Первый бриф задал квадрат 1080, точный таймлайн 24 секунды, reduced motion, видимые элементы управления, автономную работу и window.motionReview.seek(seconds). Агент ошибочно запустил генерацию изображения, поэтому мы остановили ход и использовали единственную коррекцию: только код, без медиа и поиска, файлы index.html, styles.css, script.js, README.md.
Приёмка и передача. Неизменённый экспорт на 16.00 секунде показал BLOOM / 03 без предупреждений и ошибок браузера. При 390×844 ширина документа совпала с окном, Canvas не вышел за границы. Результат — автономный проект с исходниками, контролем проверки, процедурным звуком и заметками по записи.
Скачать ZIP Tideglass. SHA-256 указан в манифесте контрольных сумм.
Ограничения. Мы не проверяли уровень звука, шов цикла по пикселям, принудительный reduced motion и экспорт видео. Собранное Aixio-превью about:srcdoc запустило внешний defer-скрипт до появления DOM-целей. Неизменённые экспортированные файлы работали, дефект встроенного превью не исправлен.
Процесс 2: интерактивное объяснение кубической кривой Безье
Аудитория и задача. Преподавателю или developer advocate нужен интерактивный материал для доклада, статьи и мобильной ссылки.
Подготовка входа. Мы дали оригинальный план из пяти частей и стандартную формулу кубической кривой Безье. SVG/DOM лучше Canvas, потому что точки, подписи, фокус, перетаскивание и адаптивный текст должны оставаться адресуемыми и редактируемыми.
Промпт и выполнение. В отдельном новом Website-пространстве выполнен кодовый бриф на 35 секунд с перетаскиваемыми контрольными точками, клавиатурной настройкой, линиями построения, этапом касательной, адаптивной компоновкой и тем же API проверки. За один ход созданы index.html, styles.css, app.js, README.md.
Приёмка и передача. Неизменённый экспорт на 21.00 секунде показал построение, касательную, t = 0.60, B(0.60), координаты и формулу без предупреждений и ошибок. При 390×844 формула и SVG остались в пределах окна. Результат — адаптивный автономный урок с редактируемым SVG, детерминированным таймлайном и удобным управлением для выступления.
Скачать ZIP Безье. SHA-256 указан в манифесте контрольных сумм.
Ограничения. Мы не проверяли реальное перетаскивание, клавиатурное изменение точек, принудительный reduced motion и экспорт видео. В собранном превью повторилась проблема порядка скриптов, а экспортированный исходник рендерился нормально.
Что меняется и что переносится
Рендерер зависит от задачи: Canvas и Web Audio для атмосферы, SVG и DOM для доступного объяснения. Меняются длительность, формат, сложный кадр и критерии проверки.
Переносится производственный контракт: подготовить оригинальные входы, зафиксировать текст и длительность, открыть чистое управление временем, назвать сложный кадр, повторно перейти к нему, проверить десктоп и мобильный экран, передать ZIP. Метод сработал в двух заметно разных брифах, но не доказывает надёжность всех моделей, пакетную автоматизацию или публичный сохранённый Skill.
Стоимость, сбой и честные границы
Tideglass стоил 0.9805 кредита за остановленную попытку и коррекцию. Безье стоил 29.4821. После второго хода интерфейс показывал 28.4688, но отложенные списания подняли итог до 30.4626 — на 0.4626 выше разрешённого лимита 30. Новых платных действий не было.
Это проверенный ручной рецепт, а не сохранённый Aixio Skill или автоматический конвейер. Запланированный третий адаптивный сюжет не отправлялся после исчерпания лимита. Два скачиваемых проекта реальны; скрытого третьего результата и готового видео нет.
Как повторить рецепт
- До открытия пространства определите аудиторию, применение, длительность, формат и фиксированный текст.
- Выберите Canvas для непрерывного материала, SVG/DOM для подписанной геометрии, CSS/DOM для компоновочной анимации.
- Требуйте автономные файлы, видимое управление, reduced motion и
window.motionReview.seek(seconds). - Укажите сложное контрольное время и элементы, которые обязаны быть видны.
- Запустите экспорт без изменений и повторите переход к кадру с холодной загрузки и после другой отметки.
- Проверьте десктоп и ширину 390px, затем экспортируйте ZIP до записи или монтажа.
Точные промпты и настройки · Рецепт процесса · Начать Website в Aixio
Для сравнения посмотрите наш эксперимент с дугой камеры из одного изображения.
Источники
Популярным источником идеи стал проект автора Riso Window Seat, его заметки о фильме и контракт инструментов. Мы адаптировали детерминированную проверку, а не композицию, брендинг или недоступный исходный промпт. Bang Motion независимо рекомендует стилевой бриф, короткий текст и проверку ключевых кадров; его Skill не устанавливался и не тестировался в Aixio. Доступность опирается на руководство W3C по анимации и технику reduced motion C39.
Вопросы
Можно ли экспортировать эту AI-анимацию в видео?
Готовые проекты в первую очередь являются редактируемыми браузерными артефактами. Запись экрана или Canvas-поток могут быть следующим шагом, но мы их не проверяли, и они не заменяют ZIP с исходниками.
Почему не использовать один длинный кинематографический промпт?
Бриф заранее фиксирует задачу, таймлайн, сложный кадр, управление и передачу. Дефекты становятся наблюдаемыми, а коррекции — конкретными, вместо зависимости от приятного впечатления при полном воспроизведении.
Это Aixio Skill?
Нет. Это ручной рецепт, проверенный на двух проектах. Сохранённый Skill и автоматический конвейер не использовались, поэтому мы не заявляем повторение в один клик.