vue2引入lottie动画

news2024/9/30 23:29:41

        说明下:如果你是vue3的话请移步:https://blog.csdn.net/qq_67801847/article/details/128386661,这里只针对vue2.

同时动画官网链接:lottie官网

        实现思路:

                1. 安装lottie-web (版本无所谓)

                

                 2. 在使用的页面引入组件

                

# 引入组件
import lottie from "lottie-web"

# 引入动画
import animationData from "../../assets/a.json";

                 3.实例创建及挂载

 

    const container = this.$refs.animationContainer
      const options = {
        animationData: animationData,
        loop: true,
        autoplay: true
      }
      this.animation = lottie.loadAnimation({
        container: container,
        renderer: 'svg',
        ...options
      })

页面代码:

        

    <diV>
      <div class="donghua" ref="animationContainer"> </div>
    </diV>

 

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

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

相关文章

一起来看看音频转文字怎么弄吧

从前有一个名叫小明的学生&#xff0c;他在学校里总是很喜欢录制各种有趣的音频&#xff0c;包括老师的讲课、同学们的笑声&#xff0c;以及校园里的各种声音。有一天&#xff0c;他在课堂上录下了老师的授课内容&#xff0c;想着晚上回家后再将它们转换成文字&#xff0c;便于…

网络安全(黑客)学习手册

1.什么是网络安全&#xff1f; 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一是市场需求量高&#xff1b; 二则是发展…

Python+大数据开发拿到25k的offer!

随着95后、00后的登场&#xff0c;80后好似成为“古早”的存在&#xff0c;看似被生活磨平了棱角的他们&#xff0c;其实也在渴望重新“支棱”起来。今天分享的这位80后的逆袭故事&#xff0c;希望你能感受到他的力量…… 学科 | Python大数据开发 校区 | 北京 薪资 | 25k 我…

【深度学习之YOLO8】视频流推断

官方V8模型下载 需要准备两个东西 simsun.ttc字体包YOLOv8官方模型成品 ScreenCapture屏幕图像类 import cv2 import mss import numpy as npclass ScreenCapture:"""parameters----------screen_resolution : Tuple[int, int]屏幕宽高&#xff0c;分别为x&a…

5.2.11.添加读写接口

5.2.11.添加读写接口 5.2.11.1、在驱动中添加 5.2.11.2、在应用中添加 5.2.11.3、测试 1. app.c #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h>#define FILE "/dev/test" // 刚才mknod创建的设…

K8S中网络如何通信

Kubernetes 提出了一个自己的网络模型“IP-per-pod”&#xff0c;能够很好地适应集群系统的网络需求&#xff0c;它有下面的这 4 点基本假设&#xff1a; 集群里的每个 Pod 都会有唯一的一个 IP 地址。Pod 里的所有容器共享这个 IP 地址。集群里的所有 Pod 都属于同一个网段。…

WT588F02B-8S 血压计语音芯片如何选型?低功耗语音ic方案

一、血压计语音提示方案需求设计&#xff1f; 血压计语音提示方案的需求设计是为了实现在测量血压过程中&#xff0c;通过语音提示用户操作指引、测量结果和健康建议等功能。以下是血压计语音提示方案需求设计的主要需求&#xff1a; &#xff08;1&#xff09;测量操作引导 …

QT---day1(QT的介绍、常用类及组件)

代码&#xff1a; #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//设置窗口尺寸this->setFixedSize(600,500);//设置窗口标题this->setWindowTitle(&q…

【MySQL】库和表的操作

目录 一、库的操作 1.1创建数据库 1.2创建数据库案例 1.3字符集和校验规则 &#xff08;1&#xff09;查看系统默认字符集以及校验规则 &#xff08;2&#xff09;查看数据库支持的字符集 &#xff08;3&#xff09;查看数据库支持的字符集校验规则 &#xff08;4&…

万向节死锁

要理解万向节死锁的产生原因&#xff0c;首先要理解欧拉角变换&#xff0c;欧拉角变换是基于最初始的坐标进行变换而非变换后的坐标进行变换。 欧拉角变换需要空间中的三个角&#xff08;即变换后每个轴的偏移量&#xff09;&#xff0c;另外还有每个轴的变换顺序。值得注意的…

SpringSecurity6--认证和授权的原理

SpringSecurity6–认证和授权的原理&#xff0c;项目gitee地址在文章末尾。 文章目录 一、Spring Security简介二、Spring Security框架中认证流程中几个非常重要的类1、 FilterChainProxy2、 AbstractAuthenticationProcessingFilter3、 UsernamePasswordAuthenticationFilter…

打开Android device monitor

X:\assdk\tools monitor.bat 双击 更新到最新

如何优雅地下载huggingface上模型,以llama2模型下载为例

背景 由于llama2模型的下载需要经过官方的授权&#xff0c;这就需要登陆hugging face的&#xff0c;对模型页面进行申请。等待审核通过后&#xff0c;才能够下载。如果在单纯用 git lfs 的方式进行下载&#xff0c;需要输入账号和密码。为了更快速地进行下载&#xff0c;既能够…

Java刷题记录(小白边刷边学)7.25

Java刷题记录&#xff08;小白边刷边学&#xff09;7.25 1 最长公共前缀 题目分析: 首先一定需要创建一个数组存储最长公共前缀的值 为了方便比较&#xff0c;先把strs的第一个字符串放进新的数组中即strs[0] 因此比较时从strs【1】开始 数字j需要小于两个被比较的字符串的长度…

视频超分新方法--助力实现高清wav2lip数字人

文章目录 前言一、解决方案详解总结前言 ` 随着人工智能的不断发展,数字人技术也越来越重要,很多人都开启了学习模型 但是使用神级模型wav2lip生成的数字人嘴部不清晰怎么办。 很影响使用效果,接下来教大家如何优化这个问题,如下图所示: 一、解决方案详解 因为wav2lip是…

Centos8+Jenkins+微信小程序前端自动发布体验版

文章目录 **一、 实现&#xff1a;****二、项目&#xff1a;****三、环境配置&#xff1a;****四、步骤&#xff1a;****五、遇到的问题** 一、 实现&#xff1a; jenkins打通微信开发平台&#xff0c;自动上传代码 二、项目&#xff1a; 微信小程序原生开发 三、环境配置&…

PowerPoint如何修改“默认保存路径”?

很多时候&#xff0c;我们做好PPT后都要保存&#xff0c;一般会保存在创建PPT的文件夹里&#xff0c;或者另外设置保存的路径。 如果经常需要制作PPT&#xff0c;又不想每次都要重新选择保存位置&#xff0c;我们可以创建或修改“默认保存路径”&#xff0c;这样每次关闭PPT后…

集群及LVS简介、LVSNAT模式原理、LVSNAT模式配置、LVSDR模式原理、LVSDR模式配置、LVS错误排查

day01 day01集群LVS配置LVS NAT模式配置LVS NAT模式步骤LVS DR模式配置LVS DR模式 集群 将很多机器组织到一起&#xff0c;作为一个整体对外提供服务 集群在扩展性、性能方面都可以做到很灵活 集群分类&#xff1a; 负载均衡集群&#xff1a;Load Balance高可用集群&#x…

wangeditor编辑器配置

vue项目中使用编辑器&#xff0c;轻量&#xff0c;操作栏选取自己需要的 官网地址&#xff1a;用于 Vue React | wangEditor 使用在vue项目中引入 npm install wangeditor/editor --savenpm install wangeditor/editor-for-vue --save 封装成组件使用 <template>&…

[LitCTF 2023]作业管理系统

打开环境后是一个登录框&#xff0c;还以为是sql注入&#xff0c;但是尝试之后没有回显&#xff0c;尝试一下弱密码爆破咯 爆出都是admin 进入后可以看到很多选项&#xff0c;都是可以访问的 &#xff0c;说明这道题还有很多解决方法 我们可选择上传文件&#xff0c;没有任何过…