Привет всем, я.Серые лицензииЯ очень рад принести вам сухой урок.
Содержание урока, будь то дизайн или часть кода на 100% оригинально для меня.Код для всех готов.Это просто, что вы можете использовать.Открытый исходный код без авторских прав, каждый может быть уверен~
Я не знаю, когда это началось, многие крупные облачные веб-сайты стали использовать этот очень трехмерный маленький значок,Перемещение и удаление мыши будет иметь интересный маленький эффект.
▲ Главная страница Alibaba CloudHttps://www.aliyun.com/
▲ Эффект перемещения мыши и удаления маленьких значков
▲ Tencent Cloud Home
▲ Эффект перемещения мыши и удаления маленьких значков
Чтобы помочь всем понять процесс реализации этого динамического эффекта, Ах Грей специально написал очень подробный учебник. Научите вас создавать и достигать этих эффектов.Для дизайнеров вы также можете просто научиться делать части значков и позволить программистам напрямую Copy мой код. 100% гарантирует, что ваш дизайн может приземлиться.
Не много ерунды, давайте посмотрим на конечный результат, который я сделал (перейдите по синей ссылке ниже, чтобы проверить):
Https://www.pslkzs.com/demo/cloud/index.html
▲ Это хороший эффект, который я разработал.
Модели в учебнике очень просты, потому что я не могу научить вас моделированию, освещению и рендерингу в течение нескольких часов... Я должен дать вам понять весь процесс реализации в кратчайшие сроки. В будущем вы можете использовать свой собственный способ завершения небольших трехмерных значков и эффектов Alibaba Cloud.
Специальное примечание:Эта статья не имеет ничего общего с Alibaba и Tencent. Я не знаю, как был разработан его дизайн и как был написан код. Я просто использовал свой опыт, чтобы подумать о том, как они делают хорошие результаты, и научил всех делать и достигать подобных эффектов.
Чтобы младшие дизайнеры могли более четко видеть весь процесс, я записал очень подробный видеоурок,Я настоятельно рекомендую вам учиться через видеоЭто гарантирует, что каждый шаг очень ясен. Если вам неудобно смотреть видео в компании, вы также можете напрямую посмотреть наши графические учебники.
-Видео-учебник раздел-
Пожалуйста, вручную скопируйте синюю подчеркиваемую текстовую ссылку ниже и перейдите на станцию b, чтобы проверить.
Учебное видео 1:Повседневная прелюдия"
Https://www.bilibili.com/video/BV1sS4y1o7Yk
Учебное видео 2:Создание небольших моделей с использованием C4D"
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 2
Учебное видео 3:Создание многослойных небольших значков с помощью Adobe Xd"
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 3
Учебное видео 4:Реализация эффектов с кодом"
Https://www.bilibili.com/video/BV1sS4y1o7Yk? P = 4
Неоднократно подчеркивалось, что дизайнер пользовательского интерфейса может не научиться писать код. Вам просто нужно сосредоточиться на том, как сделаны фотографии части доставки. Конечно, больше навыков не сокрушается, и просмотр всего видео в большей степени способствует расширению ваших знаний. Более четко понимать рабочие процессы и отношения между вами и НИОКР,Чем больше вы знаете, тем больше у вас есть право говорить, и никто не может отрицать ваш дизайн ?неосуществимым?.
-Графические учебники части-
Учебник 1:C4D сделать стерео значок
Конечный эффект
Шаг 1Откройте C4D, чтобы создать новый куб.
Шаг 2Используйте инструмент масштабирования, чтобы немного сгладить куб (вы также можете настроить нижний правый угол панели свойств, введите конкретное значение)
Шаг 3Ctrl + C копирует один, Ctrl + V вставляет. Затем перетащите скопированный вверх с помощью мобильного инструмента. Таким образом, вы получаете 2 куба.
Шаг 4Снова используйте инструмент масштабирования, чтобы немного сгладить верхнюю часть.
Шаг 5Скопируйте верхний куб и перетащите вверх. Таким образом, вы закончите всю иконку.
▲ Да, это так просто.
Шаг 6Дважды щелкните красную рамку в левом нижнем углу, чтобы вы могли добавить 1 материал.
▲ Дважды щелкните 3 раза, чтобы вы могли построить 3 новых мяча.
Шаг 7Выберите шарик материала, который вы только что построили, и поменяйте его на белый, оранжевый и черный.
▲ Обратите внимание на левый нижний угол, теперь есть три материальных шара.
Шаг 8Перетащите три мяча материала на три куба.
▲ Обратите внимание на верхний правый угол, у каждого куба есть материальный шар. Таким образом, мы делаем иконки с материалом.
Шаг 9Выберите белый куб сверху. Ключевой кадр для H атрибута K в нижней правой координате в 0 кадре.
Шаг 10В позиции 16-го кадра, K ключевого кадра для атрибута H, измените атрибут на 180 °
Таким образом, вы закончите поверх анимации вращения. Эффект показан ниже:
Таким же образом, оранжевый куб K кадр. Вся анимация готова. Но на этот раз мы позволили оранжевому кубу повернуть назад (атрибут H в 16-м кадре изменен на-180 °), чтобы весь эффект был готов.
Шаг 11Нажмите Рендеринг> Редактировать настройки рендеринга. Затем выберите формат для ввода PNG и обязательно отметьте альфа-канал. Экспортированный PNG является прозрачным фоном.
На шаге 12 кадр, который должен быть выведен, изменен на ?ручной?, начальный кадр равен 0, а конечный кадр равен 16.
▲ Потому что наша анимация сделала 16 кадров.
Шаг 13 Нажмите рендеринг> Добавить в очередь рендеринга.
Шаг 14 Нажмите кнопку рендеринга. Таким образом, 0-16 кадров, в общей сложности 17 изображений будут воспроизведены.
▲ В середине будет голубой индикатор выполнения. В зависимости от конфигурации вашего компьютера, определите скорость рендеринга.
Это 17 изображений, которые хорошо отрисовались, все они имеют прозрачный фон PNG изображения, которые очень идеальны. Мы сделаем некоторые из них в учебнике 3, чтобы доставить их программистам.
Учебник 2 Создание многоуровневого календаря с помощью Adobe Xd
Конечный эффект
Происхождение этого урока заключается в том, что некоторые студенты спрашивают группу WeChat, есть ли быстрый способ сделать это ниже. Поэтому я подумал о функции преобразования 3d в Adobe Xd. Он был оживлен.
▲ Это изображение взят из скриншота группы друзей WeChat. Я не знаю, какой бог сделал это. Вот только для того, чтобы сделать бесплатные учебники, не делать никаких коммерческих, если вы случайно нарушили ваши права или вы не счастливы, я использовал ваши фотографии, вы можете удалить их в частном порядке.
Шаг 1Нарисуйте передний вид календаря в Adobe Xd, я упростил его здесь и нарисовал только 4 закругенных прямоугольника. И получить в группу.
Шаг 2Выберите эту группу и нажмите кнопку 3D преобразования справа.
Перетаскивая значок календаря с ощущением перспективы.
Шаг 3Выберите слой зеленой кнопки и отрегулируйте его ось z до 250. Таким образом, кнопка висит.
Шаг 4Выберите белый прямоугольник и отрегулируйте его ось z до 150. Таким образом, белый прямоугольник также подвешен.
Шаг 5Выберите предпоследний слой и отрегулируйте его ось z до 80.
Таким образом, мы готовы к окончательному эффекту этого действия. Далее нам нужно всего лишь экспортировать несколько изображений, чтобы завершить всю работу.
Шаг 6Выберите эту группу, измените название группы на ?Группа 20?, и Ctrl E экспортирует изображение PNG. Это картина нашего 20-го кадра. Точнее, картина нашего последнего кадра, потому что может быть не так много, как 20 кадров.
Шаг 7Измените ось z нашего третьего уровня на 0 (первоначально это было 80), а затем измените название группы на ?Группа 19?. Ctrl + E экспортирует изображение в 19-м кадре после повторного выбора группы.
Шаг 8Измените ось z белого прямоугольника на 75 (первоначально это было 150), а затем измените название группы на ?Группа 18?. Ctrl + E экспортирует изображение в 18-м кадре после повторного выбора группы.
Шаг 9Измените ось z белого прямоугольника на 0 (первоначально это было 75), а затем измените название группы на ?Группа 17?. Ctrl + E экспортирует изображение в 17-м кадре после выбора группы снова.
Шаг 10Выберите слой зеленой кнопки, измените ось z непосредственно на 0, а затем измените название группы на ?Группа 16?. Ctrl + E экспортирует изображение в 16-м кадре после выбора группы снова.
На сегодняшний день есть 5 фотографий оси Z. Это все анимации, которые поднимают ось Z. Далее мы снова делаем анимированные картинки с углом поворота. После того, как вы выбрали всю группу, вы обнаружите, что трехмерное преобразование, где вращается ось X, вручную отрегулировано нами до 12 °, а поворот оси Y отрегулирован до-43 °.
Шаг 11Поверните ось Y на-33 °, а затем измените название группы на ?Группа 15?. Ctrl + E экспортирует изображение в 15-м кадре после выбора группы снова.
Шаг 12Поверните ось Y на-23 °, а затем измените название группы на ?Группа 14?. Ctrl + E экспортирует изображение в 14-м кадре после выбора группы снова.
Шаг 13Поверните ось Y на-13 °, а затем измените название группы на ?Группа 13?. Ctrl + E экспортирует изображение в 13-м кадре после выбора группы снова.
Шаг 14Поверните ось Y на-0 °, а затем измените название группы на ?Группа 12?. Ctrl + E экспортирует изображение в 12-м кадре после повторного выбора группы.
Мы все сделали анимацию вращения оси Y. Затем мы сделали анимацию вращения оси X. Метод в основном тот же.
Шаг 15Измените поворот оси X на 6 °, а затем измените название группы на ?Группа 11?. Ctrl + E экспортирует изображение в 11-м кадре после выбора группы снова.
Шаг 16Измените поворот оси X на 0 °, а затем измените название группы на ?Группа 10?. Ctrl + E экспортирует изображение в 10-м кадре после выбора группы снова.
Таким образом, весь наш календарь здесь. Все кадры, необходимые для анимации, уже получили. Посмотрите на кучу фотографий, которые только что были сохранены: из группы 10-группа 20 на самом деле только 11 изображений. То есть на самом деле у нас всего 11 кадров.
Ха-ха, может быть, вы не можете думать об этом, наш процесс производства этого эффекта настолько прост и грубым. В процессе создания мы должны смело думать и смело пытаться.Братья помнят: пока вы смелы, мы можем позволить ей взять декретный отпуск!
Учебник по динамическим эффектам Xd заканчивается здесь, и мы сделаем несколько сращивания их в учебном пособии 3 для доставки программистам.
Учебник 3 реализует анимационный эффект перемещения и удаления мыши с помощью кода.
Затем мы сшиваем два эффекта, которые мы сделали ранее, в длинные картинки, которые должны быть доставлены. Вам нужно отрезать лишние пробелы на картинке, а затем сшить их на вертикальном изображении. Пожалуйста, смотрите ниже для деталей:
Этот шаг выше требует, чтобы вы использовали программное обеспечение, такое как PS, чтобы сделать это вручную, и помните ширину, высоту и всего несколько изображений после обрезки. С помощью этих трех ключевых сообщений программист может написать код, чтобы выполнить всю работу.
Затем я буду использовать свой собственный плагин ?Помощник кода с эффектом PS?, чтобы завершить всю работу, и плагин автоматически будет создавать фотографии роста.
Адрес загрузки плагина:
Https://www.pslkzs.com/animate/index.php
Следующий шаг генерируется с помощью плагина.Если вы не используете плагин, это не имеет значения, вы можете сшить фотографии вручную. Ручное сращивание не сложно, это просто проблема.Сшитые растущие картинки являются основой работы PS (или другого программного обеспечения для проектирования). Я не буду писать статьи для объяснения здесь.
Шаг 1Откройте PS, создайте новый пустой документ с разрешением 1920*1080, разрешением 72dpi, и откройте плагин ?Помощник по использованию кода PS?.
Шаг 2Нажмите на первую кнопку плагина, чтобы импортировать. Выберите папку, в которой вы ранее хранили кадры последовательности экспорта C4D (в папке должны быть только картинки png, больше ничего), чтобы все изображения были ?помещены? в PS.
▲ Вы можете видеть на панели слоя в правом нижнем углу, есть 17 картинок от 0 до 16.
Шаг 3Нажмите на вторую кнопку плагина для автоматической сортировки. После нажатия вы получите порядок слоев.
Шаг 4Нажмите третью кнопку плагина, чтобы минимизировать рисунок. Таким образом, пустое место на картинке автоматически обрезается для вас.
Хотя избыточный размер был отрезан, текущая ширина значка все еще составляет более 400 пикселей. Нам нужен только маленький значок, и мы должны уменьшить его в целом.
Шаг 5Изображение> Размер изображения, измените ширину на 100, чтобы весь значок стал меньше.
▲ Не забудьте проверить кнопку с уменьшенным соотношением. Таким образом, ширина и высота в целом уменьшаются.
Шаг 6Нажмите на четвертую кнопку плагина, и он сгенерирует файл, который работает. Он содержит html и длинный сшитый рисунок.
На рабочем столе будет сгенерированная папка с html-файлом и сшитым изображением png. Если вы откроете этот html-файл, вы увидите сгенерированный код.
▲ Помощник кода динамического эффекта-это инструмент для генерации циклического эффекта, но на этот раз нам не нужен этот динамический эффект. Нам просто нужно, чтобы он создал хороший длинный график.
Это длинная картина, которую она создает, и это то, что нам нужно. Очень идеально.
▲ Плагин также очень интимный и дает значимое имя сгенерированной картине. Название изображения: w100h1343steps17.png где w обозначает ширину, h обозначает высоту всей длинной картинки, а steps обозначает количество кадров. То есть: ширина одной маленькой картинки равна 100px, высота составляет 1347/17 = 79, всего 17 кадров. Эта критическая информация используется для программирования.
Вот и все, что делает дизайнер пользовательского интерфейса. Остальная часть выполняется программистом-интерфейсом. Если вы хотите выучить код, или программист в вашей семье не знает, как его реализовать. Вы можете посмотреть это видео, в котором я записан.Написание кода за строкойПроцесс реализации.
Видео-учебник адрес:
鄂公网安备 42010202002647号