当前位置: 首页 > news >正文

微信小程序怎么使用JSON动画?

微信小程序怎么使用JSON动画?

前言:

在微信小程序中实现动画有很多种方式,今天主要讲JSON动画

  1. css3动画
  2. jsAPI动画
  3. 使用PAG素材做动画
  4. 使用GIF播放动画
  5. 使用JSON文件做动画

准备工作

  • JSON动画素材
  • 下载lottie-miniprogram插件
  • 创建微信小程序的canvas

详细代码

1. 下载插件

lottie-miniprogram官网

npm install --save lottie-miniprogram

2. 创建canvas节点

<canvas id="canvas" type="2d" ></canvas>

3. 导入节点并初始化JSON动画

	import lottie from 'lottie-miniprogram'
onReady() {this.createSelectorQuery().select('#canvas').node(res => {const canvas = res.nodeconst context = canvas.getContext('2d')canvas.width = 300canvas.height = 300lottie.setup(canvas)lottie.loadAnimation({loop: true,autoplay: true,path: "你的.json", // 替换你的json文件rendererSettings: {context,},})}).exec()
},

这样就大功告成了。

相关文章:

微信小程序怎么使用JSON动画?

微信小程序怎么使用JSON动画&#xff1f; 前言&#xff1a; 在微信小程序中实现动画有很多种方式&#xff0c;今天主要讲JSON动画 css3动画jsAPI动画使用PAG素材做动画使用GIF播放动画使用JSON文件做动画 准备工作 JSON动画素材下载lottie-miniprogram插件创建微信小程序的…...

IOS Swift 从入门到精通:数组,集合,元组,对比,字典,枚举

目录 数组 集合 元组 Arrays vs sets vs tuples 字典 字典默认值 创建空集合 枚举 枚举关联值 枚举原始值 复杂类型:总结 数组 数组是存储为单个值的值的集合。例如,John、Paul、George 和 Ringo 是姓名,但数组可让您将它们分组为单个值,即 The Beatles。 在代…...

TextRank 算法

第1关&#xff1a;Jieba 在关键词提取中的应用 任务描述 本关任务&#xff1a;根据本关所学有关使用 Jieba 库进行关键词提取的知识&#xff0c;编写使用 Jieba 模块进行关键词提取的程序&#xff0c;并通过所有测试用例。 相关知识 为了完成本关任务&#xff0c;你需要掌握…...

压缩wsl的磁盘占用空间

本文说的是wsl 2。 1. 关闭wsl&#xff0c;在cmd窗口中输入如下命令&#xff1a; wsl --shutdown 2. 接着输入&#xff1a;diskpart 这个命令会弹出新的窗口 3. 在新的窗口中输入&#xff1a; select vdisk file"d:\vos\unbutu\ext4.vhdx" 其中的 d:\vos\unbut…...

打破生态「孤岛」,Catizen将开启Telegram小游戏2.0时代?

Catizen&#xff1a;引领Telegram x TON生态的顶级猫咪链游 在区块链游戏领域&#xff0c;吸引玩家的首要因素往往是游戏的趣味性。然而&#xff0c;仅靠趣味性无法评估一个项目的长期价值和发展潜力。真正能在区块链游戏市场中取得长久成功的项目&#xff0c;无一例外都依靠扎…...

C++基础语法:类构造函数

前言 "打牢基础,万事不愁" .C的基础语法的学习 引入 类是实现面向对象思想的主要方法.前面提到:类是函数的变种,类可以通过调用静态方法或者成员函数来实现逻辑.多数情况下使用成员函数.构造函数是生成类对象成员的必须条件,对此做一些构造函数的归纳 构造函数的目…...

Node.js单点登录SSO详解:Session、JWT、CORS让登录更简单

文章目录 一、SSO介绍1、使用SSO的好处 二、中间件介绍1、Express安装导入使用 2、cors安装导入配置 3、express-session安装导入配置使用 4、jsonwebtoken安装导入使用 5、jwt和session对比 三、SSO实现方案1、安装依赖2、结构3、实现原理 三、示例代码1、nodejs端 server/ind…...

提高Java应用稳定性的部署实践

提高Java应用稳定性的部署实践 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在实际的Java开发过程中&#xff0c;应用的稳定性是一个至关重要的问题。无论是…...

简过网:考公务员报班和不报班的区别大吗?

备考公务员&#xff0c;究竟是报班还是不报班呢&#xff1f;一篇文章让你看看两者之间的区别&#xff01; 报不报班&#xff0c;其实这是很多考生都会纠结的地方&#xff0c;其实小编还是建议报个班的&#xff0c;这不仅仅是因为我是做这个行业的&#xff0c;更是因为这么长时…...

文化财经盘立方通达信期货通支撑压力自动画线多空转折指标公式源码

文化财经盘立方通达信期货通支撑压力自动画线多空转折指标公式源码&#xff1a; N:26; M:2; D:5; TR1:MAX(MAX((HIGH-LOW),ABS(REF(CLOSE,1)-HIGH)),ABS(REF(CLOSE,1)-LOW)); ATR:MA(TR1,N); MEDIANN:(HIGH LOW)/2; UP:MEDIANNATR*M; DN:MEDIANN-ATR*M; A:BARSLAST(C…...

重生之我要学后端11--数据库基础概念(持续更新)

数据库 前言一、关系型数据库二、非关系型数据库三、应用场景关系型数据库&#xff08;RDBMS&#xff09;非关系型数据库&#xff08;NoSQL&#xff09;综合因素 前言 后端开发者应该熟悉数据库管理系统&#xff08;DBMS&#xff09;&#xff0c;包括关系型数据库&#xff08;…...

配置 Cmder 到鼠标右键

win Q 快捷键搜索 cmd&#xff0c;以管理员身份运行 在命令行输入 cmder.exe /REGISTER ALL...

kali下安装使用蚁剑(AntSword)

目录 0x00 介绍0x01 安装0x02 使用1. 设置代理2. 请求头配置3. 编码器 0x00 介绍 蚁剑&#xff08;AntSword&#xff09;是一个webshell管理工具。 官方文档&#xff1a;https://www.yuque.com/antswordproject/antsword 0x01 安装 在kali中安装蚁剑&#xff0c;分为两部分&am…...

GIT-LFS使用

0.前言 目前git仓库有很多很大的文件需要管理&#xff0c;但是直接上传&#xff0c;每次clone的文件太大&#xff0c;所有准备使用git-lfs解决。 1、下载和安装 Git LFS 1.1、直接下载二进制包&#xff1a; Releases git-lfs/git-lfs GitHub 安装 Git LFS sudo rpm -ivh…...

免费分享一套SpringBoot+Vue在线水果(销售)商城管理系统【论文+源码+SQL脚本】,帅呆了~~

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringBootVue在线水果(销售)商城管理系统&#xff0c;分享下哈。 项目视频演示 【免费】SpringBootVue在线水果(销售)商城管理系统 Java毕业设计_哔哩哔哩_bilibili【免费】SpringBootVue在线水果(销售)商…...

推荐两款电脑文件处理工具,强大到你不舍得卸载

EasyFileCount EasyFileCount是一款基于Java开发的多功能文件管理工具&#xff0c;旨在帮助用户更轻松地管理和优化他们的文件存储。以下是EasyFileCount的主要功能和特点&#xff1a; 查看文件夹大小&#xff1a;用户可以快速统计和查看文件夹的总大小&#xff0c;实时显示各…...

Python 高级实战:基于自然语言处理的情感分析系统

前言 在大数据和人工智能迅猛发展的今天&#xff0c;自然语言处理&#xff08;NLP&#xff09;作为人工智能的重要分支&#xff0c;已经深入到我们的日常生活和工作中。情感分析作为NLP中的一个重要应用&#xff0c;广泛应用于市场分析、舆情监控和客户反馈等领域。本文将讲述…...

ruby面试题

ruby 基础 1、each、map、collect的区别 each: 仅遍历数组&#xff0c;并做相应操作&#xff0c;数组本身不发生改变。 map:遍历数组&#xff0c;并做相应操作后&#xff0c;返回新数组(处理)&#xff0c;原数组不变。 collect: 跟map作用一样。 collect! map!: 多了一个作…...

Android U Settings 应用中 APN 菜单实现的代码逻辑

功能简介 MobileNetwork移动网络设置页面下有【接入点设置】(APN)。 问题:为什么Controller初始化找不到pref,然后报错。 Note:什么时候切换成Controller的呢?在Android T&U 上还没有更新成kt实现 ,但是已经有Controller的方案。 流程逻辑 1、界面“telephony_a…...

java时间处理工具类

效果 最近7天&#xff1a;2024年6月21日-2024年6月27日过去一周、最近一周&#xff1a;2024年6月16日-2024年6月22日过去三个月&#xff1a;2024年3月-2024年6月近半年、过去半年&#xff1a;2023年12月-2024年6月去年&#xff1a;2023年1月-2023年12月过去3年&#xff1a;202…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据(33个指标)

旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。 今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据&#xff01;该数据集源自2025年4月发表于《地理学报》的论文成果…...