web端动效 PAG

之前写过一篇lottie动效的文章:web端动效 lottie-web 使用,本篇写一下PAG-web的基础使用。

PAG是腾讯开发,支持移动端、桌面端以及Web端的动效工作流解决方案。目标是降低或消除动效相关的研发成本,能够一键将设计师在 AE(Adobe After Effects)中制作的动效内容导出成素材文件,并快速上线应用于几乎所有的主流平台。

  1. 安装 官方文档
yarn add libpag
  1. vue.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 等配置示例, 可以点击 这里 查看。

  1. 使用
    创建一个组件MyPag/index.vue
<template><canvas class="pag" id="pag"></canvas>
</template><script>
import { PAGInit } from 'libpag'export 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()}}
}
</script><style lang="scss" scoped>
.pag {width: 200px;height: 200px;
}
</style>

示例中pag文件路径,测试素材下载
在这里插入图片描述
一个基本的pag动效就出来了
在这里插入图片描述
结合实例方法,加入简单的鼠标事件:移入播放,移出暂停。查看API文档

<template><div class="lottie" @mouseenter="onMouseenter" @mouseleave="onMouseleave"></div>
</template><script>
import lottie from 'lottie-web'export 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)}}}
}
</script><style lang="scss" scoped>
.lottie {width: 200px;height: 200px;
}
</style>

在这里插入图片描述

PAGViewer

目前 PAG 预览支持 Web、macOS 和 Windows 平台,其中 Web 平台为一个页面,macOS 和 Windows 平台为桌面端应用。进入下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/78792.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PostgreSQL 流复制搭建与维护

文章目录 前言1. 配置环境1.1 环境介绍1.2 主库白名单1.3 主库参数配置 2. 流复制搭建2.1 备份恢复2.2 创建复制用户2.3 参数修改2.4 启动并检查2.5 同步流复制2.6 同步复制级别 3. 流复制监控3.1 角色判断3.2 主库查看流复制3.3 延迟监控3.4 备库查询复制信息 前言 PostgreSQ…

一个基本的BERT模型框架

构建一个完整的BERT模型并进行训练是一个复杂且耗时的任务。BERT模型由多个组件组成&#xff0c;包括嵌入层、Transformer编码器和分类器等。编写这些组件的完整代码超出了文本的范围。然而&#xff0c;一个基本的BERT模型框架以便了解其结构和主要组件的设置。 import torch …

shell循环和函数

目录 1.for循环2.while循环3.until循环4.函数 1.for循环 for循环是固定循环&#xff0c;也就是在循环时就已经知道需要进行几次的循环&#xff0c;有事也把for循环成为计数循环。for的语法如下两种&#xff1a; 语法一 for 变量 in 值1 值2 值3 …(可以是一个文件等)do程序do…

【深度学习】 Python 和 NumPy 系列教程(十四):Matplotlib详解:1、2d绘图(下):箱线图、热力图、面积图、等高线图、极坐标图

目录 一、前言 二、实验环境 三、Matplotlib详解 1、2d绘图类型 0. 设置中文字体 1-5. 折线图、散点图、柱状图、直方图、饼图 6. 箱线图&#xff08;Box Plot&#xff09; 7. 热力图&#xff08;Heatmap&#xff09; 8. 面积图&#xff08;Area Plot&#xff09; 9. 等…

RabbitMQ超详细安装教程(Linux)

RabbitMQ超详细安装教程&#xff08;Linux&#xff09; RabbitMq介绍

Go 工具链详解(五):竞态条件检测神器 Race Detector

并发编程可以提高程序的性能和稳定性&#xff0c;但也带来了一些挑战&#xff0c;如竞态条件。竞态条件是指并发程序中的多个线程同时访问共享资源&#xff0c;导致程序行为不确定的问题。为了避免竞态条件的产生&#xff0c;需要使用同步机制&#xff08;如互斥锁、条件变量等…

consul 备份还原导入导出

正文 工作中要保证生产环境部署的consul的集群能够安全稳定地对外提供服务&#xff0c;即使出现系统故障也能快速恢复&#xff0c;这里将讲述部分的备份还原操作及KV的导入导出操作。 备份与还原 配置文件、服务器状态 需要备份的主要有两类数据&#xff1a;consul相关的配置文…

淘客商品动态字符商品id转数字id

{ "code": 200, "data": { "itemId": "700407841432", "itemName": "安踏花苞短裤女五分裤夏季新款速干冰丝高腰宽松裤子透气工装短裤", "itemVideo": { "itemVideoThum…

Layui快速入门之第八节 表格渲染与属性的使用

目录 一&#xff1a;表格的渲染 API 方法配置渲染 模板配置渲染 静态表格渲染 二&#xff1a;表格的属性 基础属性 异步属性 返回数据中的特定字段 表头属性 重载 完整重载 仅数据重载 2.7 获取选中行 设置行选中状态 2.8 获取当前页接口数据 获取表格缓存数…

腾讯云2023年云服务器优惠活动价格表

腾讯云经常推出各种云产品优惠活动&#xff0c;为了帮助大家更好地了解腾讯云服务器的价格和优惠政策&#xff0c;下面给大家分享腾讯云最新云服务器优惠活动价格表&#xff0c;助力大家轻松上云&#xff01; 一、轻量应用服务器优惠活动价格表 1、轻量应用服务器&#xff1a;…

【JAVA - List】差集removeAll() 四种方法实现与优化

一、场景&#xff1a; 二、结论&#xff1a; 1. 四种方法耗时 三、代码&#xff1a; 一、场景&#xff1a; 求差集 List1 - Lsit2 二、结论&#xff1a; 1. 四种方法耗时 初始条件方法名方法思路耗时 List1.size319418 List2.size284900 List..removeAll(Lsit2)1036987ms…

LINQ的内部联接、分组联接和左外部联接

最近在优化定时任务相关的代码&#xff0c;建议是把总查询放到内存中去坐&#xff0c;尽量减少打开的数据库连接 1. 内连接 指的是结果生成两张表可以连接的部分 private void button1_Click_1(object sender, EventArgs e){//初始化Student数组Student[] arrStu new Stude…

群晖Cloud Sync数据同步到百度云、另一台群晖、nextcloud教程

群晖Cloud Sync数据同步到百度云、另一台群晖、nextcloud教程 一、群晖套件中下载Cloud Sync 二、同步到百度云盘 打开Cloud Sync&#xff0c;点击左上角的号&#xff0c;云供应商选择百度云。 这里可以选择双向备份&#xff0c;也可以只上穿到百度云的仅上传本地更改。因为百…

STM32H7 Azure RTOS

STM32H7 是意法半导体&#xff08;STMicroelectronics&#xff09;推出的一款高性能微控制器系列&#xff0c;基于 Arm Cortex-M7 内核。它具有丰富的外设和高性能计算能力&#xff0c;适用于各种应用领域。 Azure RTOS&#xff08;原名 ThreadX&#xff09;是一款实时操作系统…

第36章_瑞萨MCU零基础入门系列教程之步进电机控制实验

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…

LeetCode题解:1720. 解码异或后的数组,异或,JavaScript,详细注释

原题链接&#xff1a; https://leetcode.cn/problems/decode-xored-array/ 解题思路&#xff1a; 异或有如下性质&#xff1a; a ^ a 0a ^ 0 aa ^ b b ^ a 根据题意&#xff0c;已知encoded[i - 1] arr[i - 1] ^ arr[i]&#xff0c;可以做如下转换&#xff1a; encoded[i…

python爬虫经典实例(二)

在前一篇博客中&#xff0c;我们介绍了五个实用的爬虫示例&#xff0c;分别用于新闻文章、图片、电影信息、社交媒体和股票数据的采集。本文将继续探索爬虫的奇妙世界&#xff0c;为你带来五个全新的示例&#xff0c;每个示例都有其独特的用途和功能。 1. Wikipedia数据采集 爬…

Redis 7 第九讲 微服务集成Redis 应用篇

Jedis 理论 Jedis是redis的java版本的客户端实现&#xff0c;使用Jedis提供的Java API对Redis进行操作&#xff0c;是Redis官方推崇的方式&#xff1b;并且&#xff0c;使用Jedis提供的对Redis的支持也最为灵活、全面&#xff1b;不足之处&#xff0c;就是编码复杂度较高。 …

【区块链 | IPFS】IPFS cluster私有网络集群搭建

对于联盟链的业务中搭建一个私有网络的 IPFS 集群还是很有必要的,私有网络集群允许 IPFS 节点只连接到拥有共享密钥的其他对等节点,网络中的节点不响应来自网络外节点的通信。 IPFS-Cluster 是一个独立的应用程序和一个 CLI 客户端,它跨一组 IPFS 守护进程分配、复制和跟踪 …

易基因: MeRIP-seq等揭示组蛋白乙酰化和m6A修饰在眼部黑色素瘤发生中的互作调控|肿瘤研究

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 组蛋白去乙酰化抑制剂(HDACis)在多种恶性肿瘤中显示出令人鼓舞的结果。N6-甲基腺嘌呤(m6A)是最普遍的mRNA修饰&#xff0c;在肿瘤发生调控中起重要作用。然而&#xff0c;对组蛋白乙酰化…