Волновая анимация распространена, но этот волновой компонент определенно не распространен.

внешний интерфейс CSS Web Components
Волновая анимация распространена, но этот волновой компонент определенно не распространен.

⚠️ Эта статья является первой подписанной статьей сообщества Nuggets, и ее перепечатка без разрешения запрещена.

предисловие

Во время недавней оптимизации проекта была обнаружена огромная нагрузка:78kbизgifдинамическое изображение:

Для чего эта анимация? Это отображение пустоты нашего веб-сайта при запросе каких-то крупномасштабных данных и т. д.Logo, затем какая-то золотая жидкость вроде水漫金山заполнить этоLogo. Поскольку я не могу показать вам нашу компаниюLogo, поэтому я набрал код. Однако, хотя и не ясноLogo, но в то же время это также затруднит посмотреть, какую анимацию это, поэтому я изменил его на знакомыйLogo, Затем упакуйте его с библиотекой компонентов, чтобы увидеть, как выглядит эффект:

Нет, мы фронтенд, зачем такой пошлый логотип? Мы должны получить несколько внешних меток:

По сути, это такая волновая анимация загрузки, которую можно использовать полностьюCSSНапишите это! зачем использовать один78KА гигантская динамичная картинка? подумай об одномVue.jsСколько этому лет? Более того, я помню, что об этом волновом эффекте написано много статей, и я тоже его собрал! Быстро нажмите «Избранное», чтобы найти статьи, которые изначально были добавлены в избранное:

Эти волны смотрят и мыLogoВолна , кажется, не та же самая, так как же реализуются эти волны?

Прочитав эту картинку, вы должны понять, что это на самом деле принцип покрытия, покрытия изначально спокойной водной глади, не похоже ли это на волны? Если вы не видите, чем покрыта куча туманообразных вещей, похожих на водяной пар, посмотрите на картинку ниже, чтобы понять:На самом деле этоdivДобавьте закругленные углы, как Xiaomi, которая потратила 2 миллиона, чтобы изменить закругленные углы.Logoто же самое, затем дайте ему снова вращаться, затем измените цвет крышки и, наконец, используйтеoverflow: hidden;Просто скройте часть за пределами круга:Разве это не умно? Но, к сожалению, у этого метода есть недостаток: его фон должен быть однотонным. На некоторых страницах нашего сайта есть фоновые изображения, что, если подумать, не показательно, так как обложку сразу видно на неровном фоне. Итак, что нам нужно, это настоящий дупло, и после поиска я наконец нашел нужную библиотеку компонентов:fancy-components, что переводится какНеобычная библиотека компонентов. Уже по названию можно догадаться: это не похожеElement UI,Ant DesignПодобно такой библиотеке компонентов, она может предоставить нам более сложные библиотеки компонентов стиля.

Необычная библиотека компонентов

Во-первых, он основан наweb componentsбиблиотека компонентов, независимо от того, являетесь ли выvue,react,angularещеsvelteИ некоторые другие фреймворки, он может хорошо сосуществовать с этими фреймворками, потому что этоJSНативная технология компонентизации. Ни один фреймворк не говорит, что не поддерживает роднойJSчастьAPIДа, кто-то оптимистично относится к этой технологии, а кто-то плохо.

  • могут заменить фреймворки в будущем (эта бредовая идея исходит отОчень популярная статья в Интернете)
  • Поскольку совместимость становится все лучше и лучше, основные фреймворки будут использоватьweb componentsПерепишите свою собственную компонентную систему (такое представление немного надежнее)
  • Из-за хорошей кросс-фреймворка все больше и больше библиотек компонентов будут приниматьweb componentsнаписать (fancy-componentsХороший случай)

Кромеfancy-components, тот, который я часто используюweb componentsкомпонентcss doodle, что переводится какCSS-дудлзначение. Его нельзя рассматривать как библиотеку компонентов, потому что он имеет только один компонент, но он может рисовать калейдоскопический стиль через этот компонент, который также является потрясающим.web componentsКомпоненты:

2021-08-20 22-05-56.2021-08-20 22_06_44.gif

Заинтересованные студенты могут перейти кB站搜索:предварительное обучениеЭто мастер, давайте посмотрим, как достигается вышеуказанный эффект.

Уже существует множество библиотек компонентов, использующихweb componentsВ качестве базовой технологии эта тенденция уже просматривается. Толькоweb componentsО нем редко говорят в Китае, поэтому некоторые библиотеки компонентов, которые хороши в зарубежных странах, не смогли распространиться на все уши.

даже недавно выпущенныйVue3.2тоже вышелdefineCustomElementметод, специально предназначенный для созданияПользовательские элементы (одна из технологий веб-компонентов)из. Уже наметилась тенденция, что эта технология покажет свой потенциал в будущем, а основной причиной, по которой она не загорелась в прошлом, были проблемы с совместимостью.

Но так как было оптимистично, это, безусловно, было плохое, плохие люди думают:

  • Почти все популярные фреймворки имеют свой собственный набор компонентных систем, зачем их использовать?web componentsЧто насчет рефакторинга?
  • Он столько лет не загорался, не то что не давал времени, а не оправдывал возложенных на него ожиданий!
  • несовместимыйIEтехнология не хорошая технология

зачем говоритьweb componentsЯвляется ли идея о том, что в будущем фреймворки могут быть заменены чем-то вроде чуши? Автор, опубликовавший это мнение, считает, чтоjQueryПадение связано с реализациями браузераdocument.querySelectorа такжеdocument.querySelectorAllметод, это не то же самое, чтоjQueryосновной метод$()Есть какие-то похожие, тогда кто еще используетjq. такweb componentsТо же самое верно: главное преимущество современных фреймворков не组件化Какой? Браузеры изначально реализуют компонентизацию, поэтому современные фреймворки будут выглядеть так:jqСюда. (Личное мнение - ерунда)

Но ведь эта статья не оweb componentsДа, это просто библиотека компонентов, которую мы используемfancy-componentsиспользуетсяweb componentsЧтобы инкапсулировать, просто упомяните об этомweb components. Нам просто нужно знать, как использоватьfancy-componentsПросто делать:

в обычных проектах

Обыкновенный проект относится к виду здания непосредственно в папкеHTMLТакой проект, где файл начинает писать код, в нем нет таких навороченных вещей, как инженерия, веб-пакет, бабель. мы создаем новыйHTMLзатем в<script>Напишите на этикеткеtype="module"может быть загружен с использованием модульного синтаксисаfancy-componentsЛа:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>公众号：前端学不动</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html, body {
      height: 100%;
      display: grid;
      place-items: center;
    }
    fc-wave-filter {
      --width: 100px;
    }

    /* :defined 选择器会选择到已定义的元素 */
    /* 但却没有 :undefined 这样的选择器 所以只能用 :not() 选择器来配合使用 */
    /* 这个选择器具体是干嘛用的 可以B站搜索：前端学不动 这位up主 */
    /* 找到他的《自定义元素基础篇》在第 17:25 的位置有讲 */
    :not(:defined) {
      display: none;
    }
  </style>
</head>
<body>
  <!-- 需要在<fc-wave-filter>里指定color这个属性 默认为黑色 -->
  <fc-wave-filter color="#047">
    <!-- 在这里(slot里)放入img图片 -->
    <img src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgc3R5bGU9IndpZHRoOjFlbTtoZWlnaHQ6MWVtO3ZlcnRpY2FsLWFsaWduOm1pZGRsZSIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJjdXJyZW50Q29sb3IiIG92ZXJmbG93PSJoaWRkZW4iPjxwYXRoIGQ9Ik0yNjQuMTI5IDI2MS4yNjJjNS4wMjUtNS45NCA0LjI4NS0xNS4yNS0zLjAwOS0yMS40MS02LjQ3NS01LjQzNS0xNi4wODUtMy45MzgtMjAuMzU0IDEuMTk4bC0zOC4wNzcgNDUuMzIzIDIzLjY2MiAxOS44NjYgMzcuNzc4LTQ0Ljk3N3ptLTQzLjkzNy01MC4wMTljLTYuMTQ0LTUuMTA0LTE1LjU2NS01LjI3Ny0xOS43ODctLjMxNWwtMzYuMjAzIDQzLjE2NiAyMi40MDIgMTguNzk0IDM1Ljc5My00Mi42NjFjNC41MzctNS4zNTcgNC41MDYtMTMuMzQ0LTIuMjA1LTE4Ljk4NHptNTY2LjQxMyAxMzUuODE0bC0yMi40NDktMjcuOTE2IDQ0LjcyNS02NS4zNzgtLjI4My0uMzE1LTczLjIwOCAzMC4xMjEtMjIuNjg2LTI3Ljc1OCA3Ny40OTMtOTkuNzIyIDE5LjEyNSAyMy42My00OC41MjIgNjMuNTA1IDc0LjE4NS0zMS44NyAyMC41MTIgMjUuMzYzLTQ2LjU2OSA2NS45MyA3Mi4yLTM0LjI4IDE5LjEyNiAyMy41OTktMTEzLjY0OSA1NS4wOTF6TTUwNy4xNjQgODA3LjAzOGMtMTY1LjYwNSAwLTI5OS44NzUtMTM0LjI1NC0yOTkuODc1LTI5OS44NzQgMC0xNjUuNTczIDEzNC4yNy0yOTkuODQzIDI5OS44NzUtMjk5Ljg0MyAxNjUuNjIgMCAyOTkuODc0IDEzNC4yNTQgMjk5Ljg3NCAyOTkuODQzIDAgMTY1LjYyLTEzNC4yNTQgMjk5Ljg3NC0yOTkuODc0IDI5OS44NzR6TTEyNi45MjkgMjY0Ljk4bDYwLjI5LTcxLjgyMmMxMi41MDgtMTQuODg3IDI5Ljk2NC0yNi43ODIgNDYuNTUyLTEyLjg0IDUuMTA1IDQuMjcgNy4yOTQgNS42ODggMTMuNTAxIDE3LjA0NiAxLjQ2NSA0LjAwMiAyLjU4NCAxMS4yOTYtLjE4OSAxOC40NDggMTQuNDE1LTguOTY0IDI5Ljc5LTYuMDM0IDM5LjcxNiAzLjYyMyAxNS4yODEgMTQuODU2IDEzLjA2IDMxLjk5Ni0xLjQ2NSA0OS4zMjZsLTYzLjU4MyA3NS43NzYtOTQuODIyLTc5LjU1N3ptMzExLjYxLTIwMy4yNTZoMzcuMjI3bDMzLjYxOSA4OCAzMy42MTktODhoMzcuMTYzdjEyMy41NzNoLTI0LjczNHYtODYuM2wtMzIuNTQ3IDg2LjNoLTI3LjA1bC0zMi40ODQtODYuM3Y4Ni4zSDQzOC41NFY2MS43MjR6bTY4LjYyNS0yMy45OTRDMjQ3LjkxOCAzNy43MyAzNy43MyAyNDcuOTE4IDM3LjczIDUwNy4xNjRjMCAyNTkuMjc2IDIxMC4xODggNDY5LjQ4IDQ2OS40MzQgNDY5LjQ4IDI1OS4zMDggMCA0NjkuNDgtMjEwLjIwNCA0NjkuNDgtNDY5LjQ2NVM3NjYuNDcyIDM3LjcxNSA1MDcuMTY0IDM3LjcxNXptMCA3NDkuOTk0YzE1NC45ODYgMCAyODAuNjA3LTEyNS41OSAyODAuNjA3LTI4MC41Nkg1MDcuMTY0Vjc4Ny43NHptLTI4MC41NzYtMjgwLjU2aDI4MC41NzZWMjI2LjYxOWMtMTU0Ljk3MSAwLTI4MC41NzYgMTI1LjYwNS0yODAuNTc2IDI4MC41NDV6bTI4MC41NzYgNDg5LjYzYy0yNjkuOTU4IDAtNDg5LjY0Ni0yMTkuNjU3LTQ4OS42NDYtNDg5LjYzIDAtMjY5Ljk1OCAyMTkuNjg4LTQ4OS42MyA0ODkuNjQ2LTQ4OS42MyAyNzAuMDA1IDAgNDg5LjY0NSAyMTkuNjcyIDQ4OS42NDUgNDg5LjYzIDAgMjY5Ljk3My0yMTkuNjQgNDg5LjYzLTQ4OS42NDUgNDg5LjYzem0wLTk5Ni43OTRDMjI3LjUgMCAwIDIyNy41MDEgMCA1MDcuMTY0YzAgMjc5LjY2MiAyMjcuNTAxIDUwNy4xOTUgNTA3LjE2NCA1MDcuMTk1IDI3OS42OTMgMCA1MDcuMTc5LTIyNy41MzMgNTA3LjE3OS01MDcuMTk1QzEwMTQuMzQzIDIyNy41IDc4Ni44NTcgMCA1MDcuMTYzIDB6IiBmaWxsPSIjQjlCRUMzIi8+PC9zdmc+" />
  </fc-wave-filter>

  <script type="module">
    // 从 fancy-components 中引入 FcWaveFilter（波浪滤镜）
    import { FcWaveFilter } from 'https://unpkg.com/fancy-components'

    // new 就相当于全局注册了这个组件，相当于 Vue 的 Vue.component('fc-wave-filter', FcWaveFilter)
    new FcWaveFilter()
  </script>
</body>
</html>

Использованы фотографии:WX20210825-165010.png

существуетfancy-componentsодин из них называетсяFcWaveFilterкомпонент, который переводится на波浪滤镜, Тоже очень образный, используйте этот компонент<img>Этикетка может быть обернута следующим образом:

в React-проекте

npm i fancy-components

Сначала введите нужные компоненты в основной файл, а затем в новый:

/* eslint-disable no-new */
import React from 'react'
import ReactDom from 'react-dom'
...
// 从 fancy-components 中引入 FcWaveFilter（波浪滤镜）
import { FcWaveFilter } from 'fancy-components'

// new 就相当于全局注册了这个组件，相当于 Vue 的 Vue.component('fc-wave-filter', FcWaveFilter)
new FcWaveFilter()

Затем при использовании (xxx.jsx):

export default () => (
  <fc-wave-filter color="#047">
    <img src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgc3R5bGU9IndpZHRoOjFlbTtoZWlnaHQ6MWVtO3ZlcnRpY2FsLWFsaWduOm1pZGRsZSIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJjdXJyZW50Q29sb3IiIG92ZXJmbG93PSJoaWRkZW4iPjxwYXRoIGQ9Ik0yNjQuMTI5IDI2MS4yNjJjNS4wMjUtNS45NCA0LjI4NS0xNS4yNS0zLjAwOS0yMS40MS02LjQ3NS01LjQzNS0xNi4wODUtMy45MzgtMjAuMzU0IDEuMTk4bC0zOC4wNzcgNDUuMzIzIDIzLjY2MiAxOS44NjYgMzcuNzc4LTQ0Ljk3N3ptLTQzLjkzNy01MC4wMTljLTYuMTQ0LTUuMTA0LTE1LjU2NS01LjI3Ny0xOS43ODctLjMxNWwtMzYuMjAzIDQzLjE2NiAyMi40MDIgMTguNzk0IDM1Ljc5My00Mi42NjFjNC41MzctNS4zNTcgNC41MDYtMTMuMzQ0LTIuMjA1LTE4Ljk4NHptNTY2LjQxMyAxMzUuODE0bC0yMi40NDktMjcuOTE2IDQ0LjcyNS02NS4zNzgtLjI4My0uMzE1LTczLjIwOCAzMC4xMjEtMjIuNjg2LTI3Ljc1OCA3Ny40OTMtOTkuNzIyIDE5LjEyNSAyMy42My00OC41MjIgNjMuNTA1IDc0LjE4NS0zMS44NyAyMC41MTIgMjUuMzYzLTQ2LjU2OSA2NS45MyA3Mi4yLTM0LjI4IDE5LjEyNiAyMy41OTktMTEzLjY0OSA1NS4wOTF6TTUwNy4xNjQgODA3LjAzOGMtMTY1LjYwNSAwLTI5OS44NzUtMTM0LjI1NC0yOTkuODc1LTI5OS44NzQgMC0xNjUuNTczIDEzNC4yNy0yOTkuODQzIDI5OS44NzUtMjk5Ljg0MyAxNjUuNjIgMCAyOTkuODc0IDEzNC4yNTQgMjk5Ljg3NCAyOTkuODQzIDAgMTY1LjYyLTEzNC4yNTQgMjk5Ljg3NC0yOTkuODc0IDI5OS44NzR6TTEyNi45MjkgMjY0Ljk4bDYwLjI5LTcxLjgyMmMxMi41MDgtMTQuODg3IDI5Ljk2NC0yNi43ODIgNDYuNTUyLTEyLjg0IDUuMTA1IDQuMjcgNy4yOTQgNS42ODggMTMuNTAxIDE3LjA0NiAxLjQ2NSA0LjAwMiAyLjU4NCAxMS4yOTYtLjE4OSAxOC40NDggMTQuNDE1LTguOTY0IDI5Ljc5LTYuMDM0IDM5LjcxNiAzLjYyMyAxNS4yODEgMTQuODU2IDEzLjA2IDMxLjk5Ni0xLjQ2NSA0OS4zMjZsLTYzLjU4MyA3NS43NzYtOTQuODIyLTc5LjU1N3ptMzExLjYxLTIwMy4yNTZoMzcuMjI3bDMzLjYxOSA4OCAzMy42MTktODhoMzcuMTYzdjEyMy41NzNoLTI0LjczNHYtODYuM2wtMzIuNTQ3IDg2LjNoLTI3LjA1bC0zMi40ODQtODYuM3Y4Ni4zSDQzOC41NFY2MS43MjR6bTY4LjYyNS0yMy45OTRDMjQ3LjkxOCAzNy43MyAzNy43MyAyNDcuOTE4IDM3LjczIDUwNy4xNjRjMCAyNTkuMjc2IDIxMC4xODggNDY5LjQ4IDQ2OS40MzQgNDY5LjQ4IDI1OS4zMDggMCA0NjkuNDgtMjEwLjIwNCA0NjkuNDgtNDY5LjQ2NVM3NjYuNDcyIDM3LjcxNSA1MDcuMTY0IDM3LjcxNXptMCA3NDkuOTk0YzE1NC45ODYgMCAyODAuNjA3LTEyNS41OSAyODAuNjA3LTI4MC41Nkg1MDcuMTY0Vjc4Ny43NHptLTI4MC41NzYtMjgwLjU2aDI4MC41NzZWMjI2LjYxOWMtMTU0Ljk3MSAwLTI4MC41NzYgMTI1LjYwNS0yODAuNTc2IDI4MC41NDV6bTI4MC41NzYgNDg5LjYzYy0yNjkuOTU4IDAtNDg5LjY0Ni0yMTkuNjU3LTQ4OS42NDYtNDg5LjYzIDAtMjY5Ljk1OCAyMTkuNjg4LTQ4OS42MyA0ODkuNjQ2LTQ4OS42MyAyNzAuMDA1IDAgNDg5LjY0NSAyMTkuNjcyIDQ4OS42NDUgNDg5LjYzIDAgMjY5Ljk3My0yMTkuNjQgNDg5LjYzLTQ4OS42NDUgNDg5LjYzem0wLTk5Ni43OTRDMjI3LjUgMCAwIDIyNy41MDEgMCA1MDcuMTY0YzAgMjc5LjY2MiAyMjcuNTAxIDUwNy4xOTUgNTA3LjE2NCA1MDcuMTk1IDI3OS42OTMgMCA1MDcuMTc5LTIyNy41MzMgNTA3LjE3OS01MDcuMTk1QzEwMTQuMzQzIDIyNy41IDc4Ni44NTcgMCA1MDcuMTYzIDB6IiBmaWxsPSIjQjlCRUMzIi8+PC9zdmc+" />
  </fc-wave-filter>
)

Будьте осторожны, чтобы не писать теги в верблюжьем регистре:<FcWaveFilter>

Из-за привычки писать компоненты, когда вы захотите использовать компоненты, вы, естественно, подумаете об этом способе написания. Но по факту<fc-wave-filter>так же, как те<div>,<a>,<p>,<ul>,<li>тот же лейбл, принадлежащийHTMLродной лейбл! В конце концов, он использует родную компонентную систему браузера (web components), а не приниматьReactЭто компонентная система, поэтому форма выражения все же отличается, не путайте! И нет необходимости импортировать его перед использованием, как раньше:

// 不需要写成这样：
import { FcWaveFilter } from 'fancy-components'

export default () => (
  <fc-wave-filter color="#047">
    <img src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgc3R5bGU9IndpZHRoOjFlbTtoZWlnaHQ6MWVtO3ZlcnRpY2FsLWFsaWduOm1pZGRsZSIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJjdXJyZW50Q29sb3IiIG92ZXJmbG93PSJoaWRkZW4iPjxwYXRoIGQ9Ik0yNjQuMTI5IDI2MS4yNjJjNS4wMjUtNS45NCA0LjI4NS0xNS4yNS0zLjAwOS0yMS40MS02LjQ3NS01LjQzNS0xNi4wODUtMy45MzgtMjAuMzU0IDEuMTk4bC0zOC4wNzcgNDUuMzIzIDIzLjY2MiAxOS44NjYgMzcuNzc4LTQ0Ljk3N3ptLTQzLjkzNy01MC4wMTljLTYuMTQ0LTUuMTA0LTE1LjU2NS01LjI3Ny0xOS43ODctLjMxNWwtMzYuMjAzIDQzLjE2NiAyMi40MDIgMTguNzk0IDM1Ljc5My00Mi42NjFjNC41MzctNS4zNTcgNC41MDYtMTMuMzQ0LTIuMjA1LTE4Ljk4NHptNTY2LjQxMyAxMzUuODE0bC0yMi40NDktMjcuOTE2IDQ0LjcyNS02NS4zNzgtLjI4My0uMzE1LTczLjIwOCAzMC4xMjEtMjIuNjg2LTI3Ljc1OCA3Ny40OTMtOTkuNzIyIDE5LjEyNSAyMy42My00OC41MjIgNjMuNTA1IDc0LjE4NS0zMS44NyAyMC41MTIgMjUuMzYzLTQ2LjU2OSA2NS45MyA3Mi4yLTM0LjI4IDE5LjEyNiAyMy41OTktMTEzLjY0OSA1NS4wOTF6TTUwNy4xNjQgODA3LjAzOGMtMTY1LjYwNSAwLTI5OS44NzUtMTM0LjI1NC0yOTkuODc1LTI5OS44NzQgMC0xNjUuNTczIDEzNC4yNy0yOTkuODQzIDI5OS44NzUtMjk5Ljg0MyAxNjUuNjIgMCAyOTkuODc0IDEzNC4yNTQgMjk5Ljg3NCAyOTkuODQzIDAgMTY1LjYyLTEzNC4yNTQgMjk5Ljg3NC0yOTkuODc0IDI5OS44NzR6TTEyNi45MjkgMjY0Ljk4bDYwLjI5LTcxLjgyMmMxMi41MDgtMTQuODg3IDI5Ljk2NC0yNi43ODIgNDYuNTUyLTEyLjg0IDUuMTA1IDQuMjcgNy4yOTQgNS42ODggMTMuNTAxIDE3LjA0NiAxLjQ2NSA0LjAwMiAyLjU4NCAxMS4yOTYtLjE4OSAxOC40NDggMTQuNDE1LTguOTY0IDI5Ljc5LTYuMDM0IDM5LjcxNiAzLjYyMyAxNS4yODEgMTQuODU2IDEzLjA2IDMxLjk5Ni0xLjQ2NSA0OS4zMjZsLTYzLjU4MyA3NS43NzYtOTQuODIyLTc5LjU1N3ptMzExLjYxLTIwMy4yNTZoMzcuMjI3bDMzLjYxOSA4OCAzMy42MTktODhoMzcuMTYzdjEyMy41NzNoLTI0LjczNHYtODYuM2wtMzIuNTQ3IDg2LjNoLTI3LjA1bC0zMi40ODQtODYuM3Y4Ni4zSDQzOC41NFY2MS43MjR6bTY4LjYyNS0yMy45OTRDMjQ3LjkxOCAzNy43MyAzNy43MyAyNDcuOTE4IDM3LjczIDUwNy4xNjRjMCAyNTkuMjc2IDIxMC4xODggNDY5LjQ4IDQ2OS40MzQgNDY5LjQ4IDI1OS4zMDggMCA0NjkuNDgtMjEwLjIwNCA0NjkuNDgtNDY5LjQ2NVM3NjYuNDcyIDM3LjcxNSA1MDcuMTY0IDM3LjcxNXptMCA3NDkuOTk0YzE1NC45ODYgMCAyODAuNjA3LTEyNS41OSAyODAuNjA3LTI4MC41Nkg1MDcuMTY0Vjc4Ny43NHptLTI4MC41NzYtMjgwLjU2aDI4MC41NzZWMjI2LjYxOWMtMTU0Ljk3MSAwLTI4MC41NzYgMTI1LjYwNS0yODAuNTc2IDI4MC41NDV6bTI4MC41NzYgNDg5LjYzYy0yNjkuOTU4IDAtNDg5LjY0Ni0yMTkuNjU3LTQ4OS42NDYtNDg5LjYzIDAtMjY5Ljk1OCAyMTkuNjg4LTQ4OS42MyA0ODkuNjQ2LTQ4OS42MyAyNzAuMDA1IDAgNDg5LjY0NSAyMTkuNjcyIDQ4OS42NDUgNDg5LjYzIDAgMjY5Ljk3My0yMTkuNjQgNDg5LjYzLTQ4OS42NDUgNDg5LjYzem0wLTk5Ni43OTRDMjI3LjUgMCAwIDIyNy41MDEgMCA1MDcuMTY0YzAgMjc5LjY2MiAyMjcuNTAxIDUwNy4xOTUgNTA3LjE2NCA1MDcuMTk1IDI3OS42OTMgMCA1MDcuMTc5LTIyNy41MzMgNTA3LjE3OS01MDcuMTk1QzEwMTQuMzQzIDIyNy41IDc4Ni44NTcgMCA1MDcuMTYzIDB6IiBmaWxsPSIjQjlCRUMzIi8+PC9zdmc+" />
  </fc-wave-filter>
)

Пока мы импортируем в основной файл иnewПросто пройти:

import { FcWaveFilter } from 'fancy-components'

/* eslint-disable no-new */
new FcWaveFilter()

в Vue2

существуетReactОдна из приятных особенностей этого заключается в том, что компоненты пишутся не так, как нативные теги, поэтому их легко отличить друг от друга:

import Ul form 'xxx'

export default () => (
  <Ul>
    <li/>
  </Ul>
)

Верблюжьи теги в верхнем регистре являются компонентами, а теги в нижнем регистреHTMLэтикетка, которую относительно легко отличить.

ноVueЭто не одно и то же,VueКомпоненты могут быть написаны либо как camelCase с заглавной буквой, либо как тире со строчной буквой. Итак, вопрос: когда мы пишем компонент, соединенный тире, как он узнает, пишем ли мы компонент или метку?

его подход заключается в том, чтобы положить всеHTMLтак же какSVGПолная пронумерованная метка, до тех пор, пока вы пишете тег не в этом диапазоне, то компоненты по умолчанию у вас есть, если вы не вcomponentsзарегистрирован, то на консоли будет напечатано предупреждение. Итак, мы собираемся рассказатьVue: Для меня это ниHTMLВ рамках этикетки, но неSVGдиапазон тегов, пока еще неVueНе предупреждайте меня о метке компонента, я уверен и уверен, что это не ошибка!

npm i fancy-components

Или сначала зайдите в основной файл, импортируйтеfancy-components:

import Vue from 'vue'
import App from './App'
import { FcWaveFilter } from 'fancy-components'

/* eslint-disable no-new */
new FcWaveFilter()

new Vue({
  render: h => h(App)
}).$mount('#app')

затем используйтеVue.configчтобы настроить, какие теги нужно игнорировать:

import Vue from 'vue'
import App from './App'
import { FcWaveFilter } from 'fancy-components'

/* eslint-disable no-new */
new FcWaveFilter()

// 配置忽略以 fc- 作为开头的元素
Vue.config.ignoredElements = [/^fc-/]

new Vue({
  render: h => h(App)
}).$mount('#app')

когда используешь (xxx.vue):

<template>
  <fc-wave-filter color="#047">
    <img src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgc3R5bGU9IndpZHRoOjFlbTtoZWlnaHQ6MWVtO3ZlcnRpY2FsLWFsaWduOm1pZGRsZSIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJjdXJyZW50Q29sb3IiIG92ZXJmbG93PSJoaWRkZW4iPjxwYXRoIGQ9Ik0yNjQuMTI5IDI2MS4yNjJjNS4wMjUtNS45NCA0LjI4NS0xNS4yNS0zLjAwOS0yMS40MS02LjQ3NS01LjQzNS0xNi4wODUtMy45MzgtMjAuMzU0IDEuMTk4bC0zOC4wNzcgNDUuMzIzIDIzLjY2MiAxOS44NjYgMzcuNzc4LTQ0Ljk3N3ptLTQzLjkzNy01MC4wMTljLTYuMTQ0LTUuMTA0LTE1LjU2NS01LjI3Ny0xOS43ODctLjMxNWwtMzYuMjAzIDQzLjE2NiAyMi40MDIgMTguNzk0IDM1Ljc5My00Mi42NjFjNC41MzctNS4zNTcgNC41MDYtMTMuMzQ0LTIuMjA1LTE4Ljk4NHptNTY2LjQxMyAxMzUuODE0bC0yMi40NDktMjcuOTE2IDQ0LjcyNS02NS4zNzgtLjI4My0uMzE1LTczLjIwOCAzMC4xMjEtMjIuNjg2LTI3Ljc1OCA3Ny40OTMtOTkuNzIyIDE5LjEyNSAyMy42My00OC41MjIgNjMuNTA1IDc0LjE4NS0zMS44NyAyMC41MTIgMjUuMzYzLTQ2LjU2OSA2NS45MyA3Mi4yLTM0LjI4IDE5LjEyNiAyMy41OTktMTEzLjY0OSA1NS4wOTF6TTUwNy4xNjQgODA3LjAzOGMtMTY1LjYwNSAwLTI5OS44NzUtMTM0LjI1NC0yOTkuODc1LTI5OS44NzQgMC0xNjUuNTczIDEzNC4yNy0yOTkuODQzIDI5OS44NzUtMjk5Ljg0MyAxNjUuNjIgMCAyOTkuODc0IDEzNC4yNTQgMjk5Ljg3NCAyOTkuODQzIDAgMTY1LjYyLTEzNC4yNTQgMjk5Ljg3NC0yOTkuODc0IDI5OS44NzR6TTEyNi45MjkgMjY0Ljk4bDYwLjI5LTcxLjgyMmMxMi41MDgtMTQuODg3IDI5Ljk2NC0yNi43ODIgNDYuNTUyLTEyLjg0IDUuMTA1IDQuMjcgNy4yOTQgNS42ODggMTMuNTAxIDE3LjA0NiAxLjQ2NSA0LjAwMiAyLjU4NCAxMS4yOTYtLjE4OSAxOC40NDggMTQuNDE1LTguOTY0IDI5Ljc5LTYuMDM0IDM5LjcxNiAzLjYyMyAxNS4yODEgMTQuODU2IDEzLjA2IDMxLjk5Ni0xLjQ2NSA0OS4zMjZsLTYzLjU4MyA3NS43NzYtOTQuODIyLTc5LjU1N3ptMzExLjYxLTIwMy4yNTZoMzcuMjI3bDMzLjYxOSA4OCAzMy42MTktODhoMzcuMTYzdjEyMy41NzNoLTI0LjczNHYtODYuM2wtMzIuNTQ3IDg2LjNoLTI3LjA1bC0zMi40ODQtODYuM3Y4Ni4zSDQzOC41NFY2MS43MjR6bTY4LjYyNS0yMy45OTRDMjQ3LjkxOCAzNy43MyAzNy43MyAyNDcuOTE4IDM3LjczIDUwNy4xNjRjMCAyNTkuMjc2IDIxMC4xODggNDY5LjQ4IDQ2OS40MzQgNDY5LjQ4IDI1OS4zMDggMCA0NjkuNDgtMjEwLjIwNCA0NjkuNDgtNDY5LjQ2NVM3NjYuNDcyIDM3LjcxNSA1MDcuMTY0IDM3LjcxNXptMCA3NDkuOTk0YzE1NC45ODYgMCAyODAuNjA3LTEyNS41OSAyODAuNjA3LTI4MC41Nkg1MDcuMTY0Vjc4Ny43NHptLTI4MC41NzYtMjgwLjU2aDI4MC41NzZWMjI2LjYxOWMtMTU0Ljk3MSAwLTI4MC41NzYgMTI1LjYwNS0yODAuNTc2IDI4MC41NDV6bTI4MC41NzYgNDg5LjYzYy0yNjkuOTU4IDAtNDg5LjY0Ni0yMTkuNjU3LTQ4OS42NDYtNDg5LjYzIDAtMjY5Ljk1OCAyMTkuNjg4LTQ4OS42MyA0ODkuNjQ2LTQ4OS42MyAyNzAuMDA1IDAgNDg5LjY0NSAyMTkuNjcyIDQ4OS42NDUgNDg5LjYzIDAgMjY5Ljk3My0yMTkuNjQgNDg5LjYzLTQ4OS42NDUgNDg5LjYzem0wLTk5Ni43OTRDMjI3LjUgMCAwIDIyNy41MDEgMCA1MDcuMTY0YzAgMjc5LjY2MiAyMjcuNTAxIDUwNy4xOTUgNTA3LjE2NCA1MDcuMTk1IDI3OS42OTMgMCA1MDcuMTc5LTIyNy41MzMgNTA3LjE3OS01MDcuMTk1QzEwMTQuMzQzIDIyNy41IDc4Ni44NTcgMCA1MDcuMTYzIDB6IiBmaWxsPSIjQjlCRUMzIi8+PC9zdmc+" />
  </fc-wave-filter>
</template>

<script>
export default {
  components: {
    // 不需要在这里进行注册 就把 <fc-wave-filter> 当成一个浏览器原生标签就行
  }
}
</script>

в проекте vue-cli Vue3

Vue3 претерпел большие изменения в написании, нетVueВместо,app:

import { createApp } from 'vue'
import App from './App'
import { FcWaveFilter } from 'fancy-components'

/* eslint-disable no-new */
new FcWaveFilter()

createApp(App).mount('#app')

Так это оригиналVueзаменитьappПросто сделай это:

// 以前
Vue.config.ignoredElements = [/^fc-/]

// 现在
app.config.ignoredElements = [/^fc-/]

К сожалению, нет,Vue3С этим немного сложнее иметь дело, нам нужноvue.config.jsсередина(Если нет, создайте новый):

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                options.compilerOptions = {
                    ...(options.compilerOptions || {}),
                    isCustomElement: tag => tag.startsWith('fc-')
                }
                return options
            })
    }
}

Вот и все!

В проекте Vite Vue3

npm i fancy-components

Приходите к основному файлу импортаfancy-componentsа такжеnewодин раз:

import { createApp } from 'vue'
import App from './App'
import { FcWaveFilter } from 'fancy-components'

/* eslint-disable no-new */
new FcWaveFilter()

createApp(App).mount('#app')

Тогда мы приходимvite.config.js, измените конфигурацию на эту:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: tag => tag.startsWith('fc-')
      }
    }
  })]
})

Рекомендуемые шаблоны Vite

Многие люди используютVite, но не нашелViteВ отличие отvue-cliТаким образом, мы можем выбрать относительно полный проект самостоятельно, используяViteсозданныйVue3Проект можно назвать очень простым.vuex,vue-routerМы не будем упоминать о тех, которых нет, дажеeslint,postcssНекоторые часто используемые вещи недоступны, все нужно экипировать самостоятельно.

Но все также знают, что где есть потребность, там и колесо.Наверняка кто-то подготовил его для нас на GitHub.Наконец-то я нашел проект, отвечающий моим потребностям:GitHub.com/get know DG…

Больше всего мне нравится то, что документы все на китайском, не то чтобы я не умею читать по-английски, просто английский не так удобен, как китайский. Применение:

npx degit GetKnowledgeByGitHub/vite 自己的项目名

Допустим, мы хотим создатьmy-fxxking-appпроект

Затем открываем командную строку и переходим в папку рабочего стола, вводим:npx degit GetKnowledgeByGitHub/vite my-fxxking-appВот и все. в следующий разmy-fxxking-appВ этой папкеnpm installПросто установите зависимости.

После того, как я установил зависимостиyarn devКак только он начинается, первая страница заставляет меня позвонить молодцу! Не могу не восхититься дырой в мозгу автора:

необъяснимый囍чувствовать 😂囍Воздушное чувство. Этот проект используетfancy-componentsЭта библиотека компонентов, прямо как в китайском стиле 🇨🇳 Я также должен дать ей баллstar!

Основное использование

Предположим, у нас естьnpm i fancy-componentsустановлен и уже в основном файле (main.js или index.js) зарегистрирован:

import { FcWaveFilter } from 'fancy-components'

/* eslint-disable no-new */
new FcWaveFilter() // 相当于全局注册了组件 注：web components 没有局部注册组件这一说

и если этоVueПроект также был настроен для игнорированияfc-началоweb components, то нам нужно использовать только<fc-wave-filter>обмотать светло-серым(желательно однотонный) вырезанная картинка:

<fc-wave-filter>
  <img src="xxx.png" />
</fc-wave-filter>

Использованы фотографии:

окончательный эффект:

можно увидеть<fc-wave-filter>Было бы очень разумно добавить для нас эффект волны, но эта волна не то, что нам нужно, потому что мы не указали цвет, поэтому по умолчанию он черный. Черный с этим цветочным узором... Это как анимация загрузки какого-то похоронного сайта...

Этот знак должен знать каждый, верно? Это логотип Huawei, исходный цвет должен быть китайским красным, поэтому мы в<fc-wave-filter>написать вcolorАтрибуты:

<fc-wave-filter color="#dd1028">
  <img src="xxx.png" />
</fc-wave-filter>

Разве это не выглядит намного лучше? кроме как в<fc-wave-filter>написать на этикеткеcolorсвойства, мы также можемCSSнаписать в--colorАтрибуты:

<template>
  <fc-wave-filter>
    <img src="xxx.png" />
  </fc-wave-filter>
</template>

<style scoped>
fc-wave-filter {
  --color: #dd1028;
}
</style>

Эффект тот же. Однако некоторые люди могут не понять, зачем использовать--colorвместоcolorсвойства, потому чтоcolorСвойство управляет цветом шрифта, но не цветом заливки. в то время как фронт--Свойства называются пользовательскими свойствами иfancy-componentsВнутри мы инкапсулируем, где использовать этот пользовательский атрибут. Пользовательский атрибут также называетсяCSS-переменные, если не понятно чтоCSS-переменныеЕсли вы можете нажатьэта ссылкаУзнать его.

⚠️ в тегеcolorсоотношение атрибутов--colorэтоCSS-переменныеПриоритет выше, и лучше не смешивать эти два способа написания.

Этот волновой фильтр очень подходит для плоских иконок Что такое плоская иконка? Сначала рассмотрим контрпример:

Разве этот знак не прикольный? Такое очень трехмерное ощущение, сопровождающееся вспышками отражений на солнце, хоть и красиво в реальности, но для отображения на плоской поверхности не годится:

Я чувствую, что лучше сделать это черной или белой линией в верхнем левом углу на таком плане этажа:

Но это все еще не красиво, потому что есть много линий для описания краев и углов трехмерной формы. Сглаживание лучше быть кратким:

Линии немного грубые... Так что NISSAN в итоге не стал использовать этот логотип, а специально разработал новый ЛОГОТИП, чтобы добиться реального сглаживания:

На этот раз выглядит более приятно для глаз на постере:

Преимущества выравнивания проявляются и при проведении выставок:

Затем мы используем<fc-wave-filter>Приходите в пакет:

Видно, что эффект волны действительно не очевиден, эффект средний, но он не так хорош, как грубый логотип, к которому он привык:

Что это доказывает? Докажите, что тонкие линии не подходят для волновых эффектов? Это не обязательно правда, давайте найдем тонкую граньLogoПытаться:

Так что это доказывает, что линии простые и тонкиеLogoПри использовании эффекта волны эффект средний, линия тонкая, но достаточно сложная, эффект все равно хороший.

что еслиNISSANЭтот знак должен хотетьLogoКак загрузить спецэффекты? У нас есть еще один способ, и это изменить振幅:

Амплитуда на самом деле означает, насколько велика ваша волна, и чем больше амплитуда, тем больше волн. Амплитуда на английском языкеamplitude, так что мы можем<fc-wave-filter>добавить одинamplitudeАтрибуты,amplitude="1"Это эквивалентно тому, что амплитуда в 1 раз превышает амплитуду по умолчанию, любое число, умноженное на 1, равно самому себе, поэтому, если нам нужна большая амплитуда, мы можем задатьamplitude="1.5"Указывает, что амплитуда в 1,5 раза превышает исходную амплитуду. Таким же образом, разве любое число, умноженное на 0, не равно 0? мы даемamplitude="0"Нет, это означает, что амплитуда равна 0, поэтому волна не может подняться:

<fc-wave-filter color="#dd1028" amplitude="0">
  <img src="xxx.png" />
</fc-wave-filter>

Поскольку волн нет, скорость кажется немного медленной. Анимация от пустого до полного по умолчанию составляет 3 секунды, если вы хотите изменить это значение, вам нужно использовать его.durЭто свойствоduration(持续时间)Сокращение для , мы позволяем ему заполниться за 2 секунды:

<fc-wave-filter color="#dd1028" amplitude="0" dur="2">
  <img src="xxx.png" />
</fc-wave-filter>

Вот действительно с большим количествомNISSANСтандартное утверждение об ах: я просто думаю, что этот стандарт более репрезентативенNISSANПлату за рекламу мне не дали, пожалуйста, назовите мне деньги быстро после того, как чиновник увидит это😆

В нашей повседневной жизни некоторые люди всегда намеренно или ненамеренно раскрывают различные бренды.LogoПриходите: например, некоторые люди всегда любят фотографироваться со Starbucks в свои моменты.Logoкофе, что доказывает, что некоторые люди намеренно хотят показать больше некоторых объектов, верно? Затем посмотрите на наш текущий эффект:

Наполнив ее, сразу опорожните ее и снова наполните, верно? Как это может работать? Мы хотим остаться еще немного после того, как наполним ее и покажем ее красивое лицо! Это нужно использоватьdelayсвойства, нам нужно использоватьdelay="1"Чтобы удержать жидкость в ее теле еще на секунду:

<fc-wave-filter color="#006241" delay="1">
  <img src="xxx.png" />
</fc-wave-filter>

картинаdelay,dur,amplitudeЭто числовое свойство поддерживает десятичные дроби, напримерdelay="1"Весь этот номер кажется слишкомНагрузка БНамеренно, как правило, мы даем 0,3 секунды, чтобы отобразить наш логотип. Эффект от превышения этого числа не обязательно хороший, и вы все только что видели этот эффект...

Однако этот компонент не идеален, некоторые метки очень хороши после его обтекания, а некоторые метки не подходят для волновых эффектов.

Вы заметили, что маркеры, которые мы только что показали, в основном имеют некоторые общие черты? Независимо от того, круглый он, квадратный или треугольный, их длина и ширина одинаковы, а значит, они близки к квадрату. Вы должны знать, что некоторые этикетки могут быть очень длинными или очень широкими, и причина такой ширины обычно связана с тем, что изначально они квадратные.LogoСправа от :

Этот вид знака также очень распространен! график слеваLogo+ один текст справаLogo, действие этого стандартного волнового фильтра выглядит следующим образом:

Видно, что волна также сглажена, потому что метка слишком широкая, поэтому давайте изменим амплитуду, чтобы сделать ее в два раза больше исходной волны:

<fc-wave-filter color="#006241" amplitude="2">
  <img src="xxx.png" />
</fc-wave-filter>

Эффект вроде неплохой, не такой плохой, как я думал, но с этим волновым фильтром будет лучше, если он будет немного квадратнее:

этоWindowsЛоготип (окно) и голубые волны действительно выглядят так, будто вода заливает горы за окном.

Расширенное использование

Вы заметили, что все изображения, которые мы используем, являются светло-серыми однотонными изображениями, поэтому они хорошо смотрятся, когда они заполнены более яркими цветами. Что, если мы не используем однотонные изображения, мы используем яркие цветные изображения? :

результат:

Можно видеть, что эффект не очень хорош, потому что волна заполнена в зависимости от того, является ли картина полый или нет, но, как эта картина, есть много деталей в месте без полых, таких как: волосы, шляпа ведьмы, Золотой обруча, юбка и т. Д. ... Но волны покрывают все эти детали, когда они заполнены, и когда они наполняются, то, что мы видим, это просто силуэт, просто наброски. Хотя вы можете сказать из наброски этой маленькой ведьмы傲人身材, но есть ли способ сохранить детали детали, которая не выдолблена? Ответ, конечно, да, наш текущий режим заливки основан на прозрачности по умолчанию, прозрачная часть не заполняется, а непрозрачная часть заполняется, что приводит к черно-белому режиму заливки, который, естественно, подходит для черного и белые этикетки:

А вот картинки с насыщенными цветами не получится.На этот раз нам нужно использовать другой режим: режим яркости. Возьмем для примера изображение маленькой ведьмы:

Мы, люди, животные со зрением и можем различать насыщенные цвета, а как насчет дальтонизма? Они не различают цвета, маленькая ведьма в их глазах вот такая:

Ответ должен быть отрицательным.Мир в их глазах определенно не просто силуэт и очертание.Они также могут различать некоторые детали, но то, как они различают, это яркость: часть кожи, открытая маленькой ведьмой, светлая, золотой обруч в руке и апельсины, похожие на цвет золотого обруча, немного темнее ярких цветов, волосы и юбки темных цветов, одежда и шляпы очень темных цветов, это режим яркости.

Английский шаблонmode, яркость по английски этоluminance,Такmode="luminance"Это режим яркости:

<fc-wave-filter color="#047" mode="luminance">
  <img src="xxx.png" />
</fc-wave-filter>

Цвет, который заполняет режим яркости, — это то, что мы используем.colorЦвет, указанный свойством, будет создавать разную прозрачность только в зависимости от разной яркости:

Хотя это и сделано, детали можно увидеть после заполнения:

Но не чувствуется, что эффект не очень, было бы лучше, если бы заливаемый нами цвет был цветом картинки, вот так:

ноcolorЭтот атрибут можно присвоить только чистым цветам Как писать такие сложные цвета? Нам все еще нужно использовать режим заполненияmodeАтрибуты,modeВсего можно указать четыре значения, а именно:alpha(режим прозрачности),luminance(режим яркости),img(режим изображения),slideshow(режим слайд-шоу).

<fc-wave-filter mode="img">
  <img src="xxx.png" />
</fc-wave-filter>

далmode="img"нет необходимости указыватьcolorатрибут, потому что он заполняется уже не цветом, а изображением:

Почему не так, как раньше:

Раньше это было потому, что нам нужно было использовать входящее изображение в качестве фона, затем генерировать волновую анимацию сплошного цвета и, наконец, накладывать их вместе, что на самом деле эквивалентно:

Но теперь мы ставимmodeустановлен вimg, если бы он был таким же, как и раньше, не стал бы он:

Так как фон одинаковый, а заливка заполнена тем же цветом и формой, в итоге ничего не видно:

То есть когдаmode="img"Когда входящее изображение не используется в качестве фона, в качестве заливки используется только входящее изображение. Что, если мы также хотим фон? легко сделать! Мы можем пройти через две картинки:

Давайте сначала вытащим контур маленькой ведьмы и создадим отдельную картинку:

Затем полная версия маленькой ведьмы передается в качестве первого подэлемента, а контур маленькой ведьмы передается в качестве второго подэлемента:

<fc-wave-filter mode="img">

  <!-- 第一张代表填充图 -->
  <img src="xxx.png" />

  <!-- 第二张代表背景图 -->
  <img src="xxx.png" />

</fc-wave-filter>

окончательный эффект:

как насчет этого? Разве он не супер красавчик? Принцип на самом деле очень прост, а именно:

На самом деле, вы также можете попробовать множество различных эффектов, просто посмотрите на свое творчество и материал и не отставайте:

Но обратите внимание на несколько моментов:

  • Размер двух передаваемых изображений должен быть одинаковым.
  • Два изображения должны быть связаны
  • Позиция должна быть согласована
  • Не ошибитесь в заказе

Нет особого смысла, если мы будем передавать изображения разного размера и нерелевантности:

режим слайд-шоу

Такую сцену мы видели во многих фильмах и анимационных работах: главный герой изначально был мягким и честным человеком, даже если в обычное время над ним издевались, он просто улыбался и проходил, но вдруг что-то случилось: может быть, над ним издевались. тела, может быть, сильный удар, или большая перемена в личности по какой-то причине...

В это время главный герой, который изначально был кротким, начал меняться."坏"Теперь все с удивлением обнаруживают, что главный герой стал еще красивее после ухудшения, как, например, Человек-паук после заражения ядом:

Различные выражения лица заставляют все лицо выглядеть иначе, чем раньше:

Другой пример — Какарот после того, как его подменил плохой парень:

Это очень подходит для режима слайд-шоу.Первоначально я искал материалы с разным выражением лица одного и того же человека с одним и тем же контуром.К сожалению, долго не мог найти, но нашел вот эти три картинки:

goku.png

freeza.png

piccolo.png

Английский слайдslideshow, давайте использовать режим слайд-шоуmode="slideshow"Посмотрим на эффект:

<fc-wave-filter mode="slideshow">
  <img src="孙悟空(卡卡罗特).png" />
  <img src="弗利萨.png" />
  <img src="比克(短笛).png" />
</fc-wave-filter>

Эффект также хорош, представьте, если бы мы могли найти материалы с разными выражениями лица с одинаковым контуром одного и того же персонажа, например, глупую версию Какарот, супер-сайянскую версию Какарот и еще один Какарот, чье тело было заменено на плохой парень, подумай, какой бы был отличный эффект!

Однако текущий эффект заключается в немедленном переходе к следующему лицу после изменения лица. Мы надеемся переключиться на изображение, подобное карусели, а затем остаться на некоторое время, чтобы отобразить его. Какие атрибуты мы должны использовать в это время?delay?

<fc-wave-filter mode="slideshow" delay="2">
  <img src="弗利萨.png" />
  <img src="比克(短笛).png" />
</fc-wave-filter>

Из-за динамической карты Tieshanglai является причиной бесконечного цикла, вы можете не почувствовать, что что-то не так, у нас есть рамка обзора:

Как только появилось первое изображение, оно было прямо вырезано волновым эффектом. На самом деле, мы надеемся, что первое изображение будет отображаться в течение двух секунд перед переключением. Часть изображения в красной рамке является правильной. Он будет отображаться в течение двух секунд, а затем будет отображаться в течение двух секунд, когда он переключится обратно на первый.bug? Не совсем,delayОн в основном не используется в такого рода сценах, но он используется в том, о чем мы говорили ранее и хотели показать это на некоторое время.logoТип сценария:

Хотя мы хотим показать немного большеlogo, но если он задерживается на две секунды без какой-либо заливки, скорее всего, он почувствует, что он застрял или что это статичное изображение. Поскольку многие из этих анимаций применяются к сцене анимации загрузки, пока объем данных не слишком велик или сетевая карта особо не застряла, время загрузки обычно не превышает полсекунды, а в этом полсекунды и на этот раз одну секундуlogoЭффект от постоянного пребывания на месте не очень хороший. такdelayДобавит только эффект задержки в конце анимации.

Но сейчас мы не хотим делать анимацию загрузки, но что, если мы хотим сделать анимацию слайд-шоу? ответintervalимущество, его использование иdelayТочно так же все проходят в номер, а номер задержится на несколько секунд:

<fc-wave-filter mode="slideshow" interval="2">
  <img src="弗利萨.png" />
  <img src="比克(短笛).png" />
</fc-wave-filter>

Единственная разница в том,intervalЗадержка возникает в начале анимации:

Это идеально подходит для нашего эффекта слайд-шоу! Просто помните: заливайте анимации, которые вы хотите отложить.delayСвойства, анимация слайдов используются для задержкиinervalСвойства в порядке.

⚠️ Эти два атрибута лучше не смешивать, потому что если они указаны одновременно, то они будутdelayвступить в силу

Принципиальный анализ

Я считаю, что все должны быть такими же, как яfancy-componentsМне очень любопытно, как добиться такого эффекта.Надо не только уметь им пользоваться, но и понимать принцип его реализации.Открываем консоль и ковыряемся,чтобы понять,что происходит.В первую очередь нужно сделать это:

Затем скройте открытую часть:

Разве это не похоже на волну? Но нам не нужна прямоугольная волна, поэтому давайте посмотрим на другую форму:

Затемните цвет фона немного больше:

Наконец, удалите открытую часть волны:

Затем добавляем светло-серый фон:

Разве ты не говоришь мне?

Так как же нам достичь гротеска? ответclip-pathилиmaskсвойства, если у нас есть такая картина:

Мы хотим, чтобы эта картинка изменила форму, чтобы она стала сердечком ❤️! Тогда нам нужно сначала подготовить ❤️ картинку в форме сердца:

Обратите внимание, что это изображение должно быть выдолблено.pngФормат таков, что часть сердечка непрозрачная, а остальные части прозрачные, а дальше пишем код так:

<template>
  <img src="girl.gif" />
</template>

<style scoped>
img {
  -webkit-mask: url(xxx/heart.png)
}
</style>

为什么会出现一个半桃心❤️呢？ Это потому чтоmaskаналогичныйbackgroundСвойства , будут мозаичными по умолчанию, если вы не хотите мозаичного изображения:

<template>
  <img src="girl.png" />
</template>

<style scoped>
img {
  -webkit-mask: url(xxx/heart.png);
  -webkit-mask-repeat: no-repeat;
}
</style>

Таким же образом, если мы изменим анимацию Miss Sister на анимацию волны, она станет:

Это показывает, что<fc-wave-filter>Этот компонент берет изображение, которое мы передали, в качестве фонового изображения, а затем использует это фоновое изображение в качестве волновой анимации.maskМаскируйте, чтобы волна приняла форму изображения, которое мы передали, и, наконец, сложите изображение, которое мы передали, и волну в форме изображения вместе, чтобы получилось:

Я должен сказать, что эта идея действительно хороша! но<fc-wave-filter>не используетсяCSSизmaskсвойства, ноSVGиз<mask>Метка, поскольку он также реализует различные сложные функции, такие как режим изображения и режим слайд-шоу, он должен использовать более низкий уровеньSVG, достаточно, чтобы увидеть глубокоеSVGОснова, пусть уважение в моем сердце возникнет спонтанно, пойдет к егоGitHubДайте ему немного, надеюсь, он не остыл, потому что никто не обращает внимания на его проект.

самовывоз

На самом деле, мы, обычные люди, тоже можем добиться такого эффекта, предполагая, что все не понимаютSVG, не можем нарисовать волну, то используем тупой метод:

Затем скройте открытую часть:

Ощущение волн уже вылезло, хотя нет<fc-wave-filter>Волны такие реалистичные, ведь это низкопрофильная версия, и ею мы воспользуемся позже.maskЧто еще приписать ей очередную диковинку:

Эта волна действительно не так хороша, как<fc-wave-filter>Выглядит хорошо, но кажется немного фальшивым... Забудьте об этом, не возитесь, давайте использовать чужое:

На этот раз он выглядел более приятным для глаз.

Краткое описание использования

Расширенное использование может быть не таким распространенным, как базовое использование, поэтому давайте сосредоточимся на обзоре базового использования.<fc-wave-filter>Передайте изображение:

<fc-wave-filter>
  <img src="xxx.png" />
</fc-wave-filter>

Это изображение предпочтительно представляет собой вырез светло-серого сплошного цвета:

Ширина и высота компонента — это ширина и высота изображения, которое мы передали. Если вы хотите изменить ширину и высоту компонента, лучше всего использоватьCSSиз--widthа также--heightАтрибуты:

<template>
  <fc-wave-filter>
    <img src="xxx.png" />
  </fc-wave-filter>
</template>

<style scoped>
fc-wave-filter {
  --width: 120px;
  --height: 100px;
}
</style>

использовать--widthа также--heightПреимущество в том, что если вы укажете только одну ширину или только одну высоту, то этот компонент сохранит пропорции изображения, но если вы используетеwidthа такжеheight, если указано только одно, соотношение другого не обязательно правильное.

Тогда вы также можете использовать--colorчтобы указать цвет заливки:

<template>
  <fc-wave-filter>
    <img src="xxx.png" />
  </fc-wave-filter>
</template>

<style scoped>
fc-wave-filter {
  --width: 120px;
  --color: #987129;
}
</style>

кроме как вCSSкитайский язык--color, вы также можете написать в теге компонентаcolorсвойства, эффект тот же:

<fc-wave-filter color="#987129">
  <img src="xxx.png" />
</fc-wave-filter>

⚠️ в тегеcolorсоотношение атрибутов--colorэтоCSS-переменныеПриоритет выше, и лучше не смешивать эти два способа написания.

Всего есть6Отдельные свойства, они:color,dur,amplitude,delay,modeа такжеinterval:

<fc-wave-filter color="xxx" dur="xxx" amplitude="xxx" delay="xxx" mode="xxx" interval="xxx">
  <img src="xxx.png" />
</fc-wave-filter>

Помимо записи этих атрибутов в тег, мы также можем передатьdom.xxxПуть, точно такой же, как и форма предыдущего рабочего DOM:

<template>
  <fc-wave-filter ref="dom">
    <img src="xxx.png" />
  </fc-wave-filter>
</template>

<script>
export default {
  mounted () {
    const { dom } = this.$refs
    
    dom.id = 'xxx'
    dom.className = 'xxx'
    
    dom.color = 'xxx'
    dom.mode = 'xxx'
    dom.dur = 123
    dom.amplitude = 456
    dom.delay = 789
    dom.interval = 666
  }
}
</script>

Эффект тот же.

Но следует отметить, что браузер ядра Google динамически меняется после однократного запуска волновой анимации.color,mode,dur,amplitude,delay,intervalЗначение остановит запуск анимации, что является ответом Google Chrome наSVGизSMILТот, что с поддержкой анимацииbug,火狐а такжеSafariТакой проблемы нет, и в настоящее время нет хорошего решения. Однако есть несколько требований к динамическому изменению волновой картины и других свойств, которые заранее указываются на этикетке.

Если действительно необходимо динамически менять работу волны в соответствии с определенными условиями, такими как использование обычного режима на некоторое время и режима изображения на некоторое время, то мы можем написать два тега, а затем передатьv-ifЧтобы переключить его:

<template>
  <fc-wave-filter :mode="mode">
   <img src="xxx.png" />
  </fc-wave-filter>
</template>

<script>
export default {
  data: () => ({ mode: 'img' }),
  mounted () {
    // 不要这样动态改变 color、mode、dur、amplitude、delay、interval 等属性的值
    setTimeout(() => this.mode = 'alpha', 3500)
  }
}
</script>
<!-- 这种写法在谷歌内核浏览器中有bug -->

<!-- 如果非要根据某些条件动态改变的话 建议写成这样 -->
<template>
  <div>
    <fc-wave-filter v-if="xxx" mode="img">
      <img src="xxx.png" />
    </fc-wave-filter>
    
    <fc-wave-filter v-else mode="alpha">
      <img src="xxx.png" />
    </fc-wave-filter>
  </div>
</template>

Мы также можем пройти:not(:defined)этот селектор для выбораweb componentsеще не сDOMСостояние, когда соединение установлено. что сDOMсвязано, что это:definedСелектор? Это принадлежитweb componentsПункты знаний этой статьи уже очень длинные, поэтому я не буду вдаваться в подробности.BПоиск станции:предварительное обучениеЭтот мастер, найди его«Основы пользовательских элементов»в17:25Место говорит за меняweb componentsЗдесь также получают знания.

API

Атрибуты Китайское значение необязательное значение По умолчанию
color Цвет заливки Нормальные значения цвета CSS 'black'
dur продолжительность анимации Число больше 0 (в секундах) 3
amplitude амплитуда волны Число (кратное исходной ширине волны) 1
delay продолжительность после заполнения Число больше 0 (в секундах) 0
mode режим анимации «альфа» (прозрачность), «яркость» (яркость), «img» (изображение), «слайд-шоу» (слайд-шоу) 'alpha'
interval Переключитесь каждые несколько секунд (подходит для режима слайд-шоу) Число больше 0 (в секундах) 0
CSS-свойства Китайское значение необязательное значение По умолчанию
--color Цвет заливки Нормальные значения цвета CSS black
--width ширина компонента Нормальное значение ширины CSS fit-content
--height высота компонента Нормальное значение высоты CSS без
Категории