Анимация с Vue — Конференция Vue Amsterdam 2022 Серия резюме — Седьмой разговор

Добро пожаловать! Рад видеть вас в седьмой части моей серии резюме конференции Vuejs Amsterdam Conference 2022, в которой я делюсь с вами кратким изложением всех докладов.

Вы можете прочитать мою серию статей JSWorld Conference 2022 Summary (в четырех частях) здесь, где я подвел итоги всех докладов первого дня. Вы также можете найти предыдущие доклады конференции Vue Amsterdam 2022 в моем блоге.

(Повторяющееся) введение

Спустя два с половиной года JSWorld и конференция Vue Amsterdam снова прошли в Театре Амстердама с 1 по 3 июня, и у меня был шанс посетить эту конференцию впервые. Я узнал много нового, встретил много замечательных людей, пообщался с отличными разработчиками и прекрасно провел время. В первый день проходила конференция JSWorld, а во второй и третий дни — Vue Amsterdam.

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

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

Очень важный момент

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

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

Здесь вы можете найти программу конференции:

JSWORLD Conference

Анимация с помощью Vue

Рамона Бисковеану — Frontend Developer в SAP

Иногда нашим приложениям нужно немного «вау», и мы можем сделать это с помощью некоторого «движения», просто идеального количества, чтобы сделать их более живыми.

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

Веб-сайты 90-х годов

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

Зачем нужна анимация?

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

Подумайте, как много у нас отвлекающих факторов: уведомления на телефонах, всплывающие окна на сайтах или прыгающие иконки в доке на macOS.

Мы также можем обмануть пользователей, заставив их думать, что наш сайт работает намного быстрее. Мы даем им понять, что наши API быстрее, размещая загрузчики и прогресс-бары. Исследования показывают, что если у вас есть пользовательский загрузчик, то у вас есть шанс задержать людей на нашем сайте дольше.

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

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

Анимация также является мощным инструментом, когда вы пытаетесь рассказать историю.

Vue <Transition />.

В ванильном JavaScript или jQuery вам нужно вручную рассчитывать тайминги и задержки, а также решать, когда добавлять или удалять классы. Но в Vue мы оборачиваем целевой элемент в компонент <Transition />, и он делает многие из этих сложных вещей автоматически. Вот простая анимация затухания:

<transition name="fade">
  <p v-if="show">hello</p>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter-from, .fade-leave-to 
  opacity: 0;
}

Вот как Vue обрабатывает это:

Vue <TransitionGroup />

<TransitionGroup> — это встроенный компонент, предназначенный для анимации вставки, удаления и изменения порядка элементов или компонентов, отображаемых в списке.

Это простой пример скольжения некоторых плиток по экрану:

<transition-group tag="div" class="tile-section" name="list" appear>
  <TileComp
    v-for="(tile, i) in tiles"
    :key="i + 'tile'"
    :header="tile.title"
    :content="tile.content"
    :footer="tile.footer"
  ></TileComp>
</transition-group>

.list-enter-active,
.list-leave-active {
  transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(70px);
}

JavaScript Hooks

CSS — это замечательно, и мы можем многое с его помощью сделать, но иногда этого недостаточно.

Vue предоставляет некоторые хуки для компонента <Transition />.

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
  <!-- ... -->
</Transition>

GreenSock GSAP

GreenSock Animation Platform (сокращенно GSAP) — это мощная библиотека JavaScript, которая позволяет разработчикам и дизайнерам создавать надежные анимации на основе временной шкалы.

Одна из самых важных вещей, которую вы будете часто слышать в GSAP, — это Tween.

Tween — это то, что делает всю работу по созданию анимации — считайте, что это высокопроизводительный задатчик свойств. Вы вводите цели (объекты, которые вы хотите анимировать), длительность и любые свойства, которые вы хотите анимировать, и когда его головка воспроизведения перемещается в новую позицию, он определяет, какие значения свойств должны быть в этот момент, и применяет их соответствующим образом.

Общие методы для создания Tween (все эти методы возвращают экземпляр Tween):

• gsap.to()
• gsap.from()
• gsap.fromTo()

Для простой анимации (без причудливой последовательности), вышеуказанные методы — это все, что вам нужно!

gsap.to(".selector", {toVars});
gsap.from(".selector", {fromVars});
gsap.fromTo(".selector", {fromVars}, {toVars});
// special properties (duration, ease, etc.) go in toVar

Теперь давайте добавим GSAP в наш пример с плитками:

<div class="tile-section">
  <TileComp
    v-for="(tile, i) in tiles"
    :key="i + 'tile'"
    :header="tile.title"
    :content="tile.content"
    :footer="tile.footer"
  ></TileComp>
</div>

import gsap from "gsap";
...
mounted() {
  gsap.from(".tile", {
    duration: 0.5,
    opacity: 0,
    scale: 0,
    y: 200,
    ease: "power2",
    stagger: 0.1,
  });
},

Счетчик анимации Vue

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

Все, что у нас есть в шаблоне, это элемент h1, которому мы передаем форматированное значение и кнопку сброса.

<div>
  <h1 ref="celebrate" class="counter" :class="{ celebrate: isCelebrate }">
    {{ this.numberWithCommas(value) }}
  </h1>
  <button class="restart" @click="restart">Restart</button>
</div>

Нам нужно использовать функцию timeline в GSAP. Считайте ее инструментом для создания последовательности анимации.

import gsap from "gsap";
import confetti from "canvas-confetti";
const tl = gsap.timeline();
const start = 100000;
const end = 3240074;

export default {
  props: {
    msg: String,
  },
  data() {
    return {
      isCelebrate: false,
      value: start,
    };
  },
  mounted() {
    tl.fromTo(
      ".counter",
      {
        innerText: start,
        scale: 0.8,
      },
      {
        innerText: end,
        snap: { innerText: 1 },
        duration: 4,
        ease: "linear",
        onUpdate: () => {
          this.$refs.celebrate.innerText = this.numberWithCommas(
            this.$refs.celebrate.innerText
          );
        },
        onComplete: () => {
          this.celebrate();
        },
      }
    );
  },
  methods: {
    celebrate() {
      this.isCelebrate = true;
      confetti({
        particleCount: 150,
        spread: 100,
        origin: { y: 0.6 },
        colors: ["#647eff", "#42d392"],
        disableForReducedMotion: true,
      });
    },
    numberWithCommas(x) {
      return x.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
    },
    restart() {
      tl.restart();
      this.isCelebrate = false;
    },
  },
};

Переход страницы

В Vue Router 4 синтаксис перехода между страницами немного изменился. Мы больше не оборачиваем маршрутизатор в компонент перехода. Вместо этого мы используем v-slot:

<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component" />
  </transition>
</router-view>

Вот пример перехода страницы:

Для построения этого перехода страницы нам нужен хук enter:

<router-view v-slot="{ Component }">
  <transition
    :key="$route.path"
    @enter="onEnter"
    :css="false"
  >
    <component :is="Component" />
  </transition>
</router-view>

Затем нам нужно зарегистрировать плагин SplitText из GSAP:

import gsap from "gsap";
import SplitText from "gsap/SplitText";

gsap.registerPlugin(SplitText);

gsap.defaults({
  duration: 1,
  ease: "power3.inOut",
});

Затем с помощью плагина мы разделим текст, чтобы его можно было анимировать:

mySplitText(el) {
  return new SplitText(el, { type: "words,chars,lines" });
},

Давайте посмотрим на хук onEnter:

onEnter(el, done) {
  const masterTL = gsap.timeline({
    onComplete: () => {
      done;
    },
  });

  masterTL.add(
    this.enterContentTextAnimation(
      mySplitText(".content-text-header").chars
    )
  );
  masterTL.add(
    this.enterContentTextAnimation(".content-text-body"),
    "-=0.9" //overlap with previous by 0.9s
  );
  masterTL.add(this.imgScaleOut(".content img"), "<");
    //The start of previous animation
},

А здесь вы можете увидеть, как можно вложить временные шкалы GSAP и что делают функции enterContentTextAnimation и imgScaleOut:

enterContentTextAnimation(id) {
  const tl = gsap.timeline();

  tl.fromTo(
    id,
    {
      yPercent: "100",
      opacity: 0,
    },
    {
      yPercent: "0",
      opacity: 1,
      stagger: 0.03,
    }
  );
},

imgScaleOut(id) {
  const tl = gsap.timeline();

  tl.from(id, {
    scale: 1.5,
  });

  return tl;
},

SVG

Анимированные графики могут быть хорошим примером SVG-анимации:

Вот часть кода, которая делает анимацию графика возможной:

watch: {
  data(newValue, oldValue) {
    newValue.map((data, index) => {
      var id = "#arc" + index;
      var d = this.calculateArc(data, index);
      var oldValueD = this.calculateArc(oldValue[index]);
      const tl = gsap.timeline();

      tl.fromTo(
        id,
        {
          attr: { d: oldValueD },
        },
        {
          duration: 0.5,
          attr: { d: d },
          yoyo: true,
        }
      );
    });
  },
},

Важно не злоупотреблять анимацией на вашем сайте. Иногда они полезны, но иногда они могут убить вашу аудиторию.

Конец седьмого разговора

Надеюсь, вам понравилась эта часть, и она может оказаться для вас такой же ценной, как и для меня.

Здесь вы можете найти следующую беседу о Nuxt 3.