Принцип работы
pixel2motion начинает с растрового логотипа и разделяет его на независимо движущиеся части. Прежде чем ставить анимацию появления, он восстанавливает эти части как редактируемую SVG-геометрию. Гладкость краёв, правильное негативное пространство и точный силуэт важнее совпадения каждого сглаженного пикселя исходного скриншота.
Результат включает статический логотип, интерактивный HTML-этюд движения и свидетельства проверки. Два этапа связывает требование к последнему кадру: анимация должна завершиться тем же проверенным знаком. Повтор, замедление и управление скоростью помогают оценить хореографию, а хуки временных меток — проверить сложные пересечения и передачи движения.
Ожидаемые результаты
- Редактируемый logo.svg со стабильными идентификаторами анимируемых частей.
- Самостоятельный logo_motion.html с повтором, регулировкой скорости и замедлением.
- Спецификация движения, наложения геометрии и захваченные кадры анимации.
От задания до проверки
- 01Определите действующие элементы
Изучите исходное изображение, отделите знак от словесного логотипа и выберите контекст использования. Зафиксируйте характер бренда и порядок появления до подгонки геометрии.
- 02Подберите простейшую точную форму
Попробуйте примитивы и несколько гладких кривых, прежде чем усложнять контур. Сравните отрисованные наложения и увеличенные края; IoU в источнике — диагностический показатель, а не универсальный порог допуска.
- 03Анимируйте и сравните финальное положение
Стройте движение на стабильных идентификаторах частей, затем проверьте подготовку, действие, пересечения и остановку. Сравните последний кадр со статическим состоянием в том же браузере и при том же размере области просмотра.