Эта запись была опубликована в среду, 6 июня 2018 г., в 00:35 и находится в рубрикеjs-экземпляр. прочитано 447 раз, сегодня 22 раза
by zhangxinxu from Ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу
Эта статья может быть воспроизведена полностью, но при этом должны быть сохранены первоначальный автор и источник.
1. Интерактивный эффект плавающего окна WeChat
После обновления WeChat я обнаружил, что есть дополнительная функция плавающего окна. Официальное чтение учетной записи, оно появится по умолчанию после отката просмотра веб-страниц. Нажмите еще раз, чтобы вернуться к тому, что вы только что прочитали. В результате у меня никогда не возникнет проблем с ответом на сообщение моей жены и переключением назад, чтобы найти то, что я только что прочитал. Лично я считаю, что это очень полезная функция.
Его интерактивный эффект также получил высокую оценку многих людей.
Например, окно сожмется в плавающую кнопку, а плавающую кнопку можно перетащить в правый нижний угол, чтобы отменить плавающее окно.
Эти интерактивные эффекты могут быть достигнуты даже с помощью веб-интерфейса.
Нет, я пробовал, и на написание демо и отладку ушёл 1 час.
Вы можете нажать здесь:Интерактивная демонстрация плавающего окна веб-страницы WeChat
Или отсканируйте этот код:Описание взаимодействия
Если вы заходите на страницу из настольного браузера, откройте инструменты разработчика и просмотрите в мобильном режиме.
Проведите по странице вправо, чтобы увидеть следующие эффекты:
В этот момент отпустите палец (или мышь), и перемещенная страница сожмется в кнопку наложения.
Нажмите эту плавающую кнопку еще раз, и страница расширится по кругу в виде маски. GIF выглядит следующим образом:
Во-вторых, ключ к реализации эффекта
Ключ к эффекту в том, что страница сжимается в плавающую кнопку.
Использование CSS3clip-pathАтрибуты.
О CSS3clip-pathЧтобы начать работу со свойствами, вы можете обратиться к моей предыдущей статье: "Введение в свойство обтравочной маски CSS3/SVG clip-path path".
в,есть демоПочти понял «форму» этого эффекта усадки.
Эффект следующий GIF:
В демонстрации имитации WeChat я также использую круговое отсечение, синтаксис такой:
.example {
clip-path: circle(radius at x, y);
}radiusУказывает размер радиуса отсечения,x, yОтносится к координатам центра обтравочного круга.
В этой демонстрации, поскольку она обрезана относительно центра плавающей кнопки, сама страница также будет перетаскиваться пальцем.radiusтак же какx, yВсе динамичны, в чем сложность взаимодействия.
Конкретную реализацию см. в исходном коде демонстрационной страницы. Это очень хороший учебный материал. Код очень чистый и написан для этого эффекта. Нет избыточности, а также есть комментарии.
Вот поворот
Позже я внимательно посмотрел на достигнутый здесь эффект микроканала, он оказался неправ, и выглядит с использованием овальной огранки, а не круглой, т.е.ellipse, синтаксис следующий:
.example {
clip-path: ellipse(radius-x, radius-y at x, y);
}Менять мне лень, все равно эффект есть, чтобы показать. Хорошо использовать круглую форму, но если вы используете ее в реальных проектах, вас могут слегка пожурить, когда кто-то ругает вас за плагиат, ведь различия все-таки есть.
В-третьих, реализация других интерактивных эффектов
Приведенная выше демонстрация обеспечивает основное взаимодействие. Весь эффект плавающей рамки также включает в себя другие эффекты, в том числе перетаскивание плавающей кнопки, в том числе перемещение в правый нижний угол, чтобы отменить плавающую рамку. Не волнуйтесь, с этим легко справиться.
1. Перетащите плавающую кнопку и потяните край
Друзья, которые следят за моими статьями, должны меня знатьподелился одним раньшеЕще лучше этого эффекта реализовано взаимодействие кнопки отсоса плавающего края, причем эффект следующий - с физическим столкновением.
Скриншот с пропущенным кадром, посетите этот адрес:m.qidian.com/, в режиме мобильного телефона вы можете испытать это на себе.
Код напрямую с открытым исходным кодом:GitHub.com/read-share/i…
Он также очень прост в использовании:
① Добавьте JS-файлы, например:
<script src="Inertia.js"></script>②. Привязка
new Inertia(ele);Тогда поздравляю, эффект есть!
2. Перетащите кнопку, чтобы отменить всплывающее окно и получить интерактивный ответ.
Этот эффект также был введен ранее, следует сказать, что он появился, начиная с "На основе перетаскивания HTML5 для реализации вставки, сортировки и удаления перетаскивания модулей."Эта статья.
Удаление очень похоже на удаление плавающего фрейма здесь, в WeChat.
Перетащите, появится кнопка удаления, перейдите к кнопке удаления, кнопка удаления имеет интерактивные изменения:
Адрес демонстрационного опыта можно щелкнуть здесь:Перетащите, чтобы выполнить сортировку и удаление вставки модуля.
Соответствующий интерактивный код JS можно найти в исходном коде страницы.
В-четвертых, окончательный итог
В начале есть основная демонстрация, виджет с открытым исходным кодом и демонстрация удаления. Эти 3 экземпляра могут в основном охватывать эффект взаимодействия с плавающей рамкой WeChat. Я считаю, что у всех не будет необходимости реализовывать эту функцию. Каждый может преуспеть, изменив логику.
Однако, несмотря на то, что есть функции, финальные детали реализации анимации должны быть сделаны как WeChat, Скажу вам, вы потратите лишнюю половину времени, а лишняя половина времени на самом деле для опыта фронт-энд техников. делить.
Например, создание демонстрационного примера в начале этой статьи заняло один час, но если вы хотите использовать его в Интернете, по оценкам, это займет еще час или два. важно для пользовательского опыта.
Упомяну лишь два момента:
- Когда веб-страница сжимается до плавающей кнопки, сама веб-страница фактически имеет анимацию, которая постепенно становится средне-серой в целом.Этого можно добиться, накрыв ее серой маской и изменив прозрачность на 0-1. Когда я реализовал это, я был ленив и использовал фильтр оттенков серого напрямую. По эффекту все ок, если не особо увлеченный пользователь, то и этот эффект проходим. Но если вы ищете очень естественный анимационный эффект, тон также должен быть идеальным переходом, тогда вам действительно нужно найти способ сделать всю веб-страницу серой вместо оттенков серого.Обычно, чем больше вы добиваетесь эффекта, тем больше деталей, тем дороже больше времени и энергии. 50% времени и энергии позволяют достичь 80% эффекта, а если вы хотите сохранить идеальный эффект 10-20%, вам нужно 50% энергии.
- Когда веб-страница восстанавливается с помощью плавающей кнопки, за реализацией WeChat остается только черный или темно-серый цвет. А когда реализовал, опять поленился, при развороте страницы углы прозрачны, а информация о странице внизу прямо выдолблена. Реализация не такая подробная, как у WeChat.
Что такое хорошее взаимодействие? Это взаимодействие, которое пользователь не воспринимает, чтобы пользователь воспринимал его как должное, оно должно быть таким. Но сделать это очень сложно.В качестве примера возьмем интерактивный анимационный эффект.Страница сжимается в маленькую кнопку,и конечный эффект нужно "принимать как должное",будь то положение,размер,прозрачность,оттенок и т.д. его эффект перехода Все это должно быть очень естественным, но требует много времени и энергии, особенно эффекта, которого никто не достигал раньше.
Поэтому, когда мы хвалим превосходный интерактивный опыт продукта, это должно быть результатом большой тяжелой работы.Продукт ценится и продвигается, а разработка имеет технологии и стремление. С этой точки зрения, опыт продукта сам по себе является конкурентным преимуществом, которое трудно превзойти конкурентам.
Спасибо за чтение, добро пожаловать на обмен!
(Конец этой статьи) // Хотите награду? нажмитездесь. Есть что сказать? нажмитездесь.
Статьи по Теме