Новый фаворит на анимационной дороге — Лотти

внешний интерфейс Командная строка Vue.js

Способность стать новым фаворитом должна иметь свою уникальность, так что же такое Лотти?

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

1. Знакомство с лотереей

Lottie— это библиотека iOS, Android и React Native, которая визуализирует анимацию After Effects в режиме реального времени и позволяет родным приложениям использовать анимацию так же легко, как и статические ресурсы. Лотти использует имяBodymovinРасширение After Effects с открытым исходным кодом экспортирует данные анимации в формат файла JSON. Проще говоря, он использует анимационные данные в формате json для рендеринга на страницу, это так просто, в официальных документах есть много небольших демонстраций, таких как👇


2. Может ли Лотти помочь нам?

Ответ: да, во-первых, студенты-дизайнеры разработали анимационный эффект в Adobe After Effects.Через плагин bodymovin анимацию можно экспортировать в файл json.

Затем разработчики могут преобразовать ранее сгенерированный файл json в анимационный эффект с помощью Lottie.
Таким образом, многие сложные анимационные эффекты могут быть эффективно реализованы.

Это выглядит очень технически, не волнуйтесь, давайте сделаем это тоже

3. Лотти экземпляр

  • Первый шаг — установить vue-cli для создания базового экземпляра vue.
npm install -g vue-cli
vue init webpack test // Создаем файл с именем test
  • Второй шаг — установить vue-lottie
npm install --save vue-lottie
  • Третий шаг - импортировать его в свой файл, конечно, вы также можете импортировать его глобально
import Lottie from 'vue-lottie' 
  • Четвертый шаг — импорт файла json.

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

Дверь в волшебный мир

импортировать в свой файл, как это

import * as animationData from './assets/pumped_up.json'

  • Пятым шагом начал делать анимацию.

Запишите это в свой файл, как холст

<lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>

В отличие от холста, у него должен быть свой метод

data () {
    return {
      defaultOptions: { animationData: animationData },
      animationSpeed: 1,
      anim: {}
    }
  },
  methods: {
    handleAnimation (anim) {
      this.anim = anim
    }
  }

Если вы хотите добавить кнопку паузы, кнопку запуска и так далее, просто напишите так👇

<template>
  <div id="app">
    <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
    <div>
      <p>Speed: x{{animationSpeed}}</p>
      <input
        type="range"
        value="1"
        min="0"
        max="3"
        step="0.5"
        v-on:change="onSpeedChange"
        v-model="animationSpeed">
    </div>
    <button @click="stop">stop</button>
    <button @click="pause">pause</button>
    <button @click="play">play</button>
  </div>
</template>
<script>
import Lottie from 'vue-lottie'
import * as animationData from './assets/pumped_up.json'
export default {
  name: 'app',
  components: {    'lottie': Lottie  },
  data () {
    return {
      defaultOptions: { animationData: animationData },
      animationSpeed: 1,
      anim: {}
    }
  },
  methods: {
    handleAnimation (anim) { 
     this.anim = anim
    },
    // 停止动画
    stop () {
      this.anim.stop()
    },
    // 开始动画
    play: function () {
      this.anim.play()
    },
    // 暂停动画
    pause: function () {
      this.anim.pause()
    },
    // 动画速度
    onSpeedChange () {
      this.anim.setSpeed(this.animationSpeed)
    }
  }}
</script>

Что ж, пора посмотреть на эффект👇 (признаю, что эта анимация немного некрасивая, но поверьте, эффект от бега действительно хорош👍)


  • Шаг 6 Спасибо за высокую оценку

Вышеупомянутый случай очень простой? Я не знаю, позволит ли этот новый обмен получить дверь в новый мир. Во всяком случае, я испытал это. Если вы хотите сделать более крутой эффект, вы можете изучить его внимательно ☺️

Наконец, адрес с открытым исходным кодом прилагается:


Категории