[Статьи о плагинах Vue3] Библиотека анимации GSAP и плагин предварительного просмотра изображений

Библиотека анимации GSAP

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

Адрес официального сайта: https://greensock.com/

Справочная статья 1: https://www.jianshu.com/p/a8e150f0e569

Справочная статья 2: https://devpress.csdn.net/vue/62ed1cdc7e66823466180802.html

Платформа цифрового управления
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Кейс системы разрешений Vue
адрес личного блога

Установить

npm install gsap --save

Импортируйте, где необходимо

import {TweenMax} from 'gsap'

Четыре библиотеки анимации GSAP

вставьте сюда описание изображения

TweenLiteЭто основное ядро GSAP, которое используется для создания базовых анимаций и является основой для различных других модулей. Как правило, это будет соответствовать plugins/CSSPluginанимации элементов DOM (то есть анимации, с которой мы наиболее знакомы).
TimelineLiteЭто контейнер анимации, называемый временной шкалой, который используется для упорядоченной организации и управления несколькими анимациями.
TimeLineMaxДа TimelineLite, обновленная версия на TimelineLiteоснове , может иметь более продвинутую организацию и контроль.
TweenMaxЭто пакет сбора GSAP, который, помимо первых трех, также включает pluginsчасто используемые плагины и easingдополнения к функциям упрощения.

пример

<template>
  <div>
    <div class="box" ref="box"></div>
  </div>
</template>

<script>
import {TweenMax} from 'gsap'

export default {
  name: "test",
  mounted(){
    const box=this.$refs['box'];
    new TweenMax(box,3,{
      x:600,
      alpha:0.4
    })
  }
}
</script>

<style lang="stylus" scoped>
.box{
  width 200px
  height 200px
  background-color green
}
</style>

вставьте сюда описание изображения

Плагин предварительного просмотра изображений Viewer.js

Китайский документ: https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4 %BB%B6v-просмотрщик%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6 %94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/

Демонстрационный адрес: https://fengyuanchen.github.io/viewerjs/

Справочная статья: https://blog.csdn.net/ZHANGYANG_1109/article/details/121355523

viewer.js — это плагин предварительного просмотра изображений с открытым исходным кодом и очень мощными функциями:

Поддержка сенсорных событий мобильного устройства
Поддержка отзывчивая
Поддержка увеличения/уменьшения масштаба
Поддержка вращения (аналогично вращению изображений Weibo)
Поддержка горизонтального/вертикального флипа
Поддержка движения изображения
поддержка клавиатуры
Поддержка полноэкранного режима слайд-шоу (можно использовать в качестве хранителя экрана)
Поддержка миниатюр
Поддержка отображения заголовка
Поддерживает несколько пользовательских событий

Установить

Поскольку вам все еще нужно использовать viewer.js после запуска проекта, установите производственную зависимость, то есть -S. Обратите внимание, что это v-viewer, а не viewerjs.

npm install v-viewer -S

вставьте сюда описание изображения
Глобальная конфигурация
Viewer.setDefaults используется для изменения конфигурации по умолчанию, например, если я не хочу отображать панель инструментов и заголовок, то я установлю toolbar: false и title: false в Viewer.setDefaults, тогда панель инструментов будет не отображаться во время предварительного просмотра.Другие свойства Это также может быть установлено таким образом. Если не задано, это свойство по умолчанию.
код импорта main.js

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  // 需要配置的属性 注意属性并没有引号
  title: false,
  toolbar: false
})

Используется внутри компонента

<template>
  <viewer>
    <img v-for="(decImg, index) in descImgs" :key="index" :src="decImg" style="width: 200px;height: 200px">
  </viewer>
</template>

<script>
export default {
  data () {
    return {
      descImgs: [ 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ]
    }
  }
}
</script>

Эффект

Поскольку панель инструментов конфигурации: false, title: false устанавливается во время глобальной конфигурации. Таким образом, при предварительном просмотре нет заголовка и панели инструментов.
вставьте сюда описание изображения
Если это динамически полученное изображение, то вы должны обратить внимание на проблему асинхронности. Может быть такое явление, что картинка не может быть предпросмотра, то есть нет реакции на нажатие. Вы можете обратиться к: Vue + ElementUI + Viewer После перелистывания страницы изображение не может быть предварительно просмотрено.Проблема асинхронной связи компонента Vue «родитель-потомок»

Приложение: общие параметры конфигурации:

'inline': true, // 是否启用inline模式
'button': true, // 是否显示右上角关闭按钮
'navbar': true, // 是否显示缩略图底部导航栏
'title': true, // 是否显示当前图片标题，默认显示alt属性内容和尺寸
'toolbar': true, // 是否显示工具栏
'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true
'fullscreen': true, // 播放时是否全屏，默认true
'loading': true, // 加载图片时是否显示loading图标，默认true
'loop': true, // 是否可以循环查看图片，默认true
'movable': true, // 是否可以拖得图片，默认true
'zoomable': true, // 是否可以缩放图片，默认true
'rotatable': true, // 是否可以旋转图片，默认true
'scalable': true, // 是否可以翻转图片，默认true
'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true
'transition': true, // 使用 CSS3 过度，默认true
'keyboard': true, // 是否支持键盘，默认true
'zoomRatio': 0.1, // 鼠标滚动时的缩放比例，默认0.1
'minZoomRatio': 0.01, // 最小缩放比例，默认0.01
'maxZoomRatio': 100, // 最大缩放比例，默认100
'url': 'data-source' // 设置大图片的 url