Причина, по которой я связался с этим инструментом разработки, заключалась в потребностях проекта. Сначала я занимался разработкой для Android. Позже, поскольку фронтенд-разработчиков компании было недостаточно, я начал разрабатывать мобильные веб-страницы и пришел в контакт с Vue. Позже я ушел из разработки интерфейса, поэтому мне пришлось снова взять на себя. Веб-разработка не очень хорошо знакома с самим CSS. Каждый раз, когда я разрабатываю учебники Baidu CSS, я разрабатывал их после введения Hype3 дизайнером пользовательского интерфейса .Официальный сайт продукта,Эта страница разработана с помощью Hype3.Конечно,она еще не адаптирована к мобильному терминалу.Очень удобно использовать эту IDE для адаптации к мобильному терминалу.Ниже скажу,что она была адаптирована и раньше,но т.к. босс стиля официального веб-сайта не удовлетворен, поэтому пользовательский интерфейс Дизайн изменил дизайн страницы, а мобильный дизайн еще не вышел, поэтому адаптации пока нет После долгих сплетен я начну представлять моя разработка с Hype3.Официальный сайтнекоторые переживания.
PS: В настоящее время у Hype3, кажется, есть только версия для Mac, студентам Windows, возможно, придется подождать, или вы можетеУстановите виртуальную машину Mac
Hype3Сообщество
В настоящее время у Hype3 не так много внутренних обучающих ресурсов.Китайское сообщество Hype3Я тоже не чувствую себя очень активным.Официальный сайт Hype3довольно активно.ФорумВы также можете общаться с другими людьми, но китайского языка нет.Для тех, кто не силен в английском (таких как я), вы можете использовать Google для перевода страницы и едва ее понимать! Другие коммуникационные сообщества пока не нашли!
Применимая сцена
После моего первоначального использования я чувствую, что эта IDE подходит для дизайнеров для создания прототипов продуктов, потому что она имеет встроенную временную шкалу анимации, которая может создавать богатые анимационные эффекты во многих аспектах.Однако из-за моих ограниченных возможностей мне все еще нужно чтобы использовать временную шкалу анимации. Я не умею и не могу делать много эффектов, но дизайнерам должно быть легко начать работу; кроме того, это также подходит для разработки интерфейса, но я думаю, что это не подходит для сложных бизнес-сценариев, подходит для некоторых официальных сайтов продуктов, продвижения продуктов, статических веб-страниц и других подобных страниц, конечно, это не означает, что разработка бизнес-страниц невозможна, потому что она может ссылаться на внешние скрипты, а также может встраивать HTML, то есть он может импортировать некоторые часто используемые фреймворки, такие как Vue, jQuery, Element-UI и т. д., они взаимодействуют друг с другом, но есть некоторые проблемы, о которых будет подробно рассказано. ниже.
Введение в Hype3.
1. Интерфейс
Это интерфейс разработки Hype3, слева направо:
1. Сценарий
Сцена эквивалентна странице в Интернете, мы можем настроить несколько сцен и переключаться между ними.
2. Макет
В каждом сценарии могут быть несколько макетов, и несколько макетов соответствуют различным шигам точек останова, которая может быть использована для адаптации к терминальным устройствам различных размеров.
3. Вид макета
Здесь будут отображаться все элементы страницы, и вы можете настроить положение, размер и т. д. элементов, перетаскивая их,
Под макетом находится временная шкала анимации. Вы можете выбрать элемент на ней, затем открыть временную шкалу, перетащить временную шкалу, чтобы установить продолжительность анимации, а затем изменить положение и размер элемента для автоматического создания анимации, не это легко?
4. Проверка
С помощью этих инспекторов мы вносим изменения в стиль элементов сцены и компонентов, например, точно устанавливаем положение и размер элемента, устанавливаем размер шрифта и цвет текста, устанавливаем событие щелчка элемента, событие наведения мыши, а также устанавливаем имя класса элемента и удостоверение личности и т. д.
5. Ресурсы
Это для размещения файлов ресурсов, изображений, аудио и видео, функций, шрифтов и сторонних скриптов, на которые мы ссылаемся, и т. д. Следует отметить, что здесь указаны все пути ресурсов на диске, и ресурсы не будут скопирован в проект. Поэтому, если вы измените ресурс в пути ссылки, он будет синхронно обновлен здесь и будет упакован в проект, когда он будет окончательно опубликован в формате HTML.
6. Панель инструментов
Вышеуказанная панель инструментов может вставлять нужные нам элементы, либо группировать несколько элементов, что аналогично Adobe XD.После группировки положение элементов в группе относительно этой группы, также можно группировать элементы или группы.Преобразование в символы , смысл символов на самом деле в том, что вы можете повторно использовать компонент, преобразовать его в символы и скопировать их в несколько.Пока вы настраиваете стиль символа, все скопированные символы будут меняться соответственно.Есть также концепция постоянные символы. Повторное использование в сценах, например, преобразование кнопки в постоянное совпадение, тогда независимо от того, сколько сцен вы переключаете, совпадение всегда будет существовать в установленной вами позиции; кроме того, вы можете настроить положение элемента с помощью «переднего " и "задние" кнопки Иерархия или z-индекс.
Подробное введение
Сначала поговорим об адаптивной верстке, то есть адаптации мобильного терминала, в Hype3 она называется адаптивной версткой, при установке ширины брейкпойнта подгружаются разные лейауты.
После добавления адаптивного макета справа появляется дополнительный макет, в новом макете мы можем разрабатывать страницы, подходящие для этого макета.
Адаптивный макет в основном состоит в том, что два ресурса макета являются общими, но идентификаторы компонентов в макете не могут повторяться.
шашка
Это то, что мы часто используем, и 90% операций выполняются здесь:
1. Рукописи
Как видите, здесь вы можете установить заголовок веб-страницы, вы также можете отредактировать заголовок HTML, вы можете добавить файлы js и css, на которые мы ссылались в заголовке, поддержка локальная и сетевая, я имею в виду Vue и другие фреймворки. здесь, это подробно описано ниже, как его использовать, он также может отображать предупреждения о совместимости для различных браузеров.При настройке стиля элементов, если они не совместимы с установленными вами версиями браузера, будут подробные подсказки.
2. Сценарий
Здесь вы можете установить размер страницы, установить ширину точки останова, увеличить адаптивный макет, управлять временной шкалой анимации, добавить мониторинг событий страницы, таких как загрузка страницы, выгрузка и т. д.
3. Метрики
Это для установки положения, ширины, высоты, масштабирования, поворота и т. д. элемента, которые можно использовать в сочетании с анимацией. Верхний обзор контента — это фактически настройка переполнения атрибута. Необходимо обратить внимание на вариант регулируемого макета, который заключается в установке элемента на странице.Как меняется положение при изменении ширины и высоты?Настройка на картинке выше заключается в том, что независимо от того, как изменяется ширина, элемент всегда центрируется по горизонтали. Точно так же вы можете установить и другие изменения.При наведении курсора мыши на предварительный просмотр он будет динамически изменяться, сообщая вам положение элемента.Как оно будет меняться.
Он также может установить поведение масштабирования элемента, просто выберите внутреннюю часть горизонтальной или вертикальной стрелки, чтобы при изменении ширины и высоты элементы заполнялись динамическим изменением ширины и высоты, то есть для изменения ширина и высота, немного сложно понять эту часть, вам нужно сделать это самостоятельно, чтобы действительно понять.
4. Элементы
Здесь можно установить некоторые атрибуты элемента.Если в данный момент выбрано видео, вы также можете добавить сюда исходный формат видео.
5. Типография
Здесь можно установить размер шрифта, тип шрифта, выравнивание текста и т. д.
6. Операция
Вы можете добавить некоторые общие слушатели событий, но после моего теста я обнаружил, что событие «при входе в область просмотра» кажется ненадежным, то есть, хотя вы устанавливаете это событие для элемента внизу страницы, когда страница загружается , такого события нет, при скольжении на позицию этого элемента также будет срабатывать событие "вход в область просмотра", также есть событие "при выходе мыши", которое будет срабатывать только на текущая страница, то есть, когда вы запускаете событие «наведение мыши» элемента, если вы переключаете окна, а затем отводите мышь, событие «наведение мыши» не будет срабатывать в это время, поэтому вам нужно использовать его с осторожностью. Как правило, используются эти два события. Переключение стилей элементов можно передатьdiv:hoverЧтобы контролировать, как обращаться к стилю css, будет представлено ниже.
7. Физические величины
Я не использовал это много, поэтому я мало что знаю об этом. Это должно быть для придания элементам физических свойств. Это должно быть очень полезно для создания некоторых динамических эффектов. Для получения подробной информации вы можете перейти кОфициальная документация сайтаУзнать о.
8. Идентичность
Здесь можно установить идентификатор и имя класса элемента.После настройки мы можем управлять стилем элемента, ссылаясь на файл css, написанный нами.Однако следует отметить, что, поскольку Hype3 будет присоединять некоторые элементы при создании HTML Атрибуты, такие как цвет, ширина и т.д., в это время, если мы пропишем те же атрибуты в css, мы не сможем их покрыть, потому что Hype3 генерирует все встроенные стили, а мы пишем внешние стили, и приоритет не такой выше, чем встроенные стили, поэтому нам нужно добавить!important, поэтому его можно перезаписать.
Рекомендуется добавлять внешние стили css, написанные вами!important, чтобы предотвратить неизвестные ошибки.
Введение в средство проверки находится здесь, и вы можете самостоятельно изучить другие способы его использования.
Далее поговорим о ссылках на внешние скрипты и встроенный HTML.
Этот аспект очень практичен для тех, у кого есть предыдущий опыт веб-разработки, потому что мы все еще можем быть знакомы с некоторыми функциями в виде кода, и в это время «HTML-виджеты» могут показать свои таланты.
Последний код, сгенерированный HTML-виджетом, на самом деле является iFrame我们可以用其他编辑器编写iframe的代码，然后拷贝到Hype3里面，这样就可以使用一些第三方提供的功能了，比如Element-UI 的carousel走马灯效果。
Similarly, we can also write some JS files and CSS files yourself, then add it to Hype3, Hype will automatically give us a reference to our head HTML. This editing header HTML in the introduction document has been mentioned, careful classmates It should have been обнаруженный.
Hype3最终生成的HTML项目，这些自定义的js和css文件和HTML小组件生成的iframe都在同一个目录下，它们之间也可以互相调用，所以可扩展性还是很高的。
временная шкала анимации
После прочтения этой диаграммы GIF, и AE не похож, точно так же, как изображение выше на самом деле представляет собой новую временную шкалу анимации, сначала выберите элемент, затем нажмите красную кнопку рядом с временной шкалой, чтобы начать запись фильма, перетащите элемент управления временной шкалой на долгое время фильм, и на этот раз вы можете свободно перемещать выбранные вами элементы, изменять размер, поворачивать на 360 градусов и так далее, некоторые операции, и, наконец, сгенерированная анимация, нажмите кнопку воспроизведения, вы только что сделали элементы операции будет воспроизводиться, может затем в любой момент времени будет добавлена операция:
Когда анимация воспроизводится до этого момента времени, заданная вами операция будет выполнена.
Многие свойства анимации могут быть установлены, и функция анимации по-прежнему очень мощная, но вам нужно изучить ее самостоятельно. Если вы знакомы с AE, вам будет легко начать работу. Поскольку я мало что знаю об анимации, я представит его здесь в первую очередь.
Приведенная выше временная шкала анимации также может динамически управляться с помощью сценариев при ее запуске:
Кроме того, некоторые свойства документов, сцен и макетов можно получить и задать в скрипте, например, здесь можно получить объект элемента по ID элемента.
Fypedocument.GetCentlebyID (ID)
Поиск текущего документа указанного идентификатора ввода идентификатора идентификатора «Уникальный идентификатор элемента» и возвращает DOM HTML-элемент. Это похоже на типичное «документ. GetElementById», но версия API должна использоваться, поскольку шумилью вьюльку может переназначить ID при столкновении конфликтов.
Некоторые вопросы и идеи
1. Проблема срабатывания события "отсутствие мыши", о которой мы упоминали ранее, является довольно большой проблемой. По сути, это событие немного безвкусно, потому что пока окно переключается, оно не будет запущено. В настоящее время ваш стиль пользовательского интерфейса может быть все еще застрял на триггере события «при наведении курсора мыши», как показано.
2. Встроенный редактор ресурсов не удобен в использовании, нет подсказки для написания js и css, его можно только скопировать в других редакторах, что очень громоздко.
3. Не подходит для глубокой разработки
4. Я лично считаю, что можно добавить функцию аналогичную библиотеке компонентов.Некоторые компоненты могут быть разработаны и представлены самими разработчиками, а другие могут быть загружены и добавлены в Хайп для использования.Например функция карусели может быть инкапсулирована, а потом когда мы его используем Вам нужно только выбрать этот компонент при вставке, а затем вы можете использовать его.Хотя это может быть реализовано с помощью встроенной анимации Hype3, это все еще немного сложно для тех, кто не знаком с производство анимации Это также может быть реализовано через виджеты HTML, но это немного Это немного громоздко Если у него будет эта функция, я считаю, что эта IDE будет более мощной.
Эпилог
Так как я тоже использую его в первый раз, я могу не очень хорошо понять его в некоторых местах, и я не понимаю его достаточно хорошо в некоторых местах.Я надеюсь, что вы простите меня.Вы можете обсудить и исправить это , и развивайтесь вместе!
Если вам это нравится, пожалуйста, не стесняйтесь дать мне большой палец вверх, чтобы поддержать меня.Если что-то не так, вы можете исправить меня.Если у вас есть какие-либо вопросы, вы можете оставить сообщение ниже, и я отвечу, как только как я это вижу! Спасибо, что прочитали эту статью! Надежда может помочь вам! 🌹🌹🌹
