杞县网站建设,常州城投建设招标网站,厦门物业备案建设局登什么网站,如何创建网站快捷方式到桌面之前写过一篇lottie动效的文章#xff1a;web端动效 lottie-web 使用#xff0c;本篇写一下PAG-web的基础使用。
PAG是腾讯开发#xff0c;支持移动端、桌面端以及Web端的动效工作流解决方案。目标是降低或消除动效相关的研发成本#xff0c;能够一键将设计师在 AE#x…之前写过一篇lottie动效的文章web端动效 lottie-web 使用本篇写一下PAG-web的基础使用。
PAG是腾讯开发支持移动端、桌面端以及Web端的动效工作流解决方案。目标是降低或消除动效相关的研发成本能够一键将设计师在 AEAdobe After Effects中制作的动效内容导出成素材文件并快速上线应用于几乎所有的主流平台。
安装 官方文档
yarn add libpagvue.config.js 加入以下代码
// ...
const path require(path)
const CopyWebpackPlugin require(copy-webpack-plugin)module.exports defineConfig({// ...configureWebpack: {plugins: [// ...new CopyWebpackPlugin({patterns: [{from: path.resolve(__dirname, ./node_modules/libpag/lib/libpag.wasm),to: ./js/}]})]}
})简单的接入示例和 Vue / React / PixiJS 等配置示例 可以点击 这里 查看。
使用 创建一个组件MyPag/index.vue
templatecanvas classpag idpag/canvas
/templatescript
import { PAGInit } from libpagexport default {data () {return {pagView: null}},created () {this.initPag()},methods: {async initPag () {const url /static/like.pag // pag文件放在了静态文件夹下 /public/staticconst PAG await PAGInit()const { PAGFile, PAGView } PAG// 示例 fetch 请求const buffer await fetch(url).then(res res.arrayBuffer())const pagFile await PAGFile.load(buffer)document.getElementById(pag).width pagFile.width()document.getElementById(pag).height pagFile.height()this.pagView await PAGView.init(pagFile, #pag)this.pagView.setRepeatCount(0)this.pagView.play()}}
}
/scriptstyle langscss scoped
.pag {width: 200px;height: 200px;
}
/style示例中pag文件路径测试素材下载 一个基本的pag动效就出来了 结合实例方法加入简单的鼠标事件移入播放移出暂停。查看API文档
templatediv classlottie mouseenteronMouseenter mouseleaveonMouseleave/div
/templatescript
import lottie from lottie-webexport default {props: {animationData: {type: Object,required: true},autoplay: {type: Boolean,default: true},loop: {type: Boolean,default: true}},data () {return {lottie: null}},mounted () {this.intLottie()},methods: {intLottie () {let { animationData, autoplay, loop } thisif (!autoplay) {loop false}this.lottie lottie.loadAnimation({container: this.$el, // 渲染容器renderer: svg, // 渲染方式loop, // 是否循环autoplay, // 自动播放animationData // lottie json文件})},onMouseenter () {if (!this.autoplay) {this.lottie.setDirection(1)this.lottie.play()this.lottie.addEventListener(complete, e {this.lottie.stop()})}},onMouseleave () {this.lottie.removeEventListener(complete)if (!this.autoplay) {this.lottie.setDirection(-1)}}}
}
/scriptstyle langscss scoped
.lottie {width: 200px;height: 200px;
}
/stylePAGViewer 目前 PAG 预览支持 Web、macOS 和 Windows 平台其中 Web 平台为一个页面macOS 和 Windows 平台为桌面端应用。进入下载
