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

Anime+Vue<svg画线动画>从安装到入门使用

1.安装Anime并全局使用

npm install animejs --saveimport anime from "animejs";

2.在阿里巴巴矢量图标库复制(或者下载)svg到页面中,注意:画线动画svg图标stroke属性必须有颜色值。不然看到个毛线!

<template>
<div>
<svgt="1629686834603"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="5211"width="200"height="200"id="one"><pathd="M689.536 192c26.816 0 50.794667 16.64 60.202667 41.706667l78.08 207.978666 67.754666-39.125333 27.562667 47.786667-50.709333 29.269333a64.213333 64.213333 0 0 1 27.157333 52.522667v202.368a64.298667 64.298667 0 0 1-64.298667 64.298666h-27.648V874.666667h-55.146666v-75.861334H255.957333V874.666667H200.853333v-75.861334H173.184a64.298667 64.298667 0 0 1-64.32-64.298666v-202.368a64.213333 64.213333 0 0 1 27.2-52.522667L85.333333 450.346667l27.584-47.786667 67.733334 39.104 78.08-207.957333A64.298667 64.298667 0 0 1 318.933333 192h370.602667z m145.728 342.954667H173.184v199.552h662.101333v-199.552z m-556.288 50.090666a41.386667 41.386667 0 1 1 0 82.752 41.386667 41.386667 0 0 1 0-82.752z m455.125333 0a41.386667 41.386667 0 1 1 0 82.752 41.386667 41.386667 0 0 1 0-82.752z m-44.565333-328.746666H318.933333l-79.402666 211.52h529.386666l-79.36-211.52z m-79.573333 46.037333v62.058667h-206.869334v-62.08h206.869334z"p-id="5212"fill-opacity="null"stroke-opacity="null"stroke-width="10"stroke="#f00"fill="none"></path></svg>
</div>
</template>

3.js代码

let path_one = document.querySelectorAll("#one path");
for (let i = 0; i < path_one.length; i++) {anime({targets: path_one[i],delay: i * 100,strokeDashoffset: [anime.setDashoffset, 0],easing: "easeInOutSine",duration: 3000,loop: 1,// complete: function () {//动画完成时事件,你可以写下一个动画哦// },});
}

效果图

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

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

2021多校第二场F 简单计算几何模板(球体相交体积)

简单板子题题意代码题意 [原题链接](https://ac.nowcoder.com/acm/contest/11253/F) 大致题意&#xff1a; 有A&#xff0c;B&#xff0c;C&#xff0c;D四个点&#xff08;三维坐标&#xff09;和k1&#xff0c;k2两个常数 在空间上取一点P1使 |AP1|/|BP1|k1 &#xff08;所有…...

NoSQL NewSQL

OldSQLNewSQLNoSQL分类关系型关系型非关系型非关系型应用场景交易型&#xff1a;实时&#xff0c;面向应用&#xff0c;关注热数据交易型&#xff1a;实时&#xff0c;面向应用&#xff0c;关注热数据分析型&#xff1a;非实时&#xff0c;面向统计分析&#xff0c;关注全部数据…...

C语言之重定向和文件(更新中)

一、C程序中要包含stdio.h头文件才可以直接使用putchar()、getchar()函数、printf()函数&#xff0c;scanf()函数&#xff0c;它们都是C语言标准I/O包的成员。 二、ANSI C 和后续的C标准都规定输入是缓冲的。缓冲区的大小取决于系统&#xff0c;常见大小512字节和4096字节。 缓…...

链表 + 数组模拟链表

链表的指针实现 1.指针 #include<iostream> using namespace std; int main(){int a 5;int *p; // int 型的指针double *q; //double 型的指针p &a;// cout << p 指向 acout << *p << endl; //间接输出 areturn 0; }2.申请动态内存&#xff08…...

第一次动手构建 Linux 内核(未完待续)

目录背景机器参数参考链接操作流程步骤1&#xff1a;下载 Linux 内核源码步骤 2&#xff1a;解压源码步骤 3&#xff1a;下载所需软件包步骤 4&#xff1a;内核配置步骤 5&#xff1a;开始构建&#xff01;未完待续背景 这两天读《UNIX传奇&#xff1a;历史与回忆》这本书&…...

2021年Java开发爆款推荐!docker部署tomcat

一.java基础面试知识点 java中和equals和hashCode的区别 int、char、long各占多少字节数 int与integer的区别 探探对java多态的理解 String、StringBuffer、StringBuilder区别 什么是内部类&#xff1f;内部类的作用 抽象类和接口区别 抽象类的意义 抽象类与接口的应用…...

阿里P8大牛亲自讲解!java静态变量和实例变量

Redis主从复制 概念 Redis的主从复制概念和MySQL的主从复制大概类似。一台主机master&#xff0c;一台从机slaver。master主机数据更新后根据配置和策略&#xff0c;自动同步到slaver从机&#xff0c;Master以写为主&#xff0c;Slave以读为主。 主要用途 读写分离&#xff1…...

品牌应该如何把握抖音电商的红利:深度拆解花西子如何通过抖音电商一年销售1亿+

最近抖音电商正在逐渐起势&#xff0c;前一阵子老赵去参加了抖音的电商大会和千川大会&#xff0c;从这两个会的火爆程度我们就可以看出&#xff0c;越来越多的品牌正在涌向抖音电商平台&#xff0c;并且越来越重视这个平台。抖音电商将是品牌们的新战场&#xff0c;这个平台让…...

Layui快速入门(2021.06.15)

第一步&#xff1a;下载layui文件 第二步&#xff1a;新建项目&#xff0c;导入下载的文件夹 第三步&#xff1a;参考文档开发 1.layui入门html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>la…...

Mysql异常之Communications link failure

前天线上出现数据数据抖动&#xff0c;收到大量异常告警&#xff0c;都要疯了&#xff0c;数据库出现大量异常&#xff0c;肯定第一件事就是看下数据库监控数据&#xff0c;发现有一个从分片执行时间有一个50多秒的操作&#xff0c;这里肯定有问题了&#xff0c;第一时间找了db…...

储备未完待续

储备 如何精准熬一人份的粥 如何快速晾凉一碗粥 3M手套和钢铁侠 洗手盆三件套 三种门锁、两个门锁 制作书签的一种方法 摩托车和汽车的排气筒 变形金刚和巴巴爸爸 横向冲击和纵向冲击 我和图书馆 影响我的三本书 曲黎敏、亨利我们会追上你的、穷理查历书...

如何成为一个成功的 Java 开发人员?

【此文章转自乐字节】 如果你是一名成功的Java程序员&#xff0c;那么在任何公司中的Java开发人员中&#xff0c;你都有机会获取一席之地。 前言 在当今时代&#xff0c;有很多编程语言可能会塑造我们的未来。然而&#xff0c;当我们开始学习编程时&#xff0c;我们总是从C语…...

代理和负载均衡的详细说明是什么

对客户端提供的代理服务&#xff0c;在客户端无法直接访问服务端的情况下&#xff0c;星池StarPool通过配置代理服务器的方式访问服务端。在整个过程中&#xff0c;客户端请求首先发送到代理服务器&#xff0c;代理服务器再将请求发送到服务端后将结果返回给客户端。从服务端角…...

使用DNSObserver检测DNS安全漏洞

关于DNSObserver DNSObserver是个功能强大的DNS服务&#xff0c;该工具使用Go语言开发&#xff0c;可以帮助广大研究人员轻松检测各种类型的盲注漏洞。它可以监控渗透测试人员所搭建服务器的带外DNS交互信息&#xff0c;并通过Slack发送查询通知。DNSObserver可以帮助我们寻找的…...

为什么自己干了这么多活,最后功劳都是别人的?

【本文只针对IT行业技术岗】 一、粉丝留言 自己每天加班到10点&#xff0c;有时候都到凌晨&#xff0c;周6基本全勤&#xff0c;公司项目忙的时候周日还去加班&#xff0c; 做过的项目无数&#xff0c;很多项目都给公司带来了丰厚的利润。 年底年终奖比别人少了一个月&…...

pytest(10)-参数化详解

先看如下情况&#xff0c;即为了测试一个函数&#xff0c;列举了三个测试用例&#xff0c;每个用例其实就是参数不同而已 在test_example.py 文件中编写如下代码&#xff1a; def add(a,b):return (ab)def test_1():assert add(3,5)8def test_2():assert add(2,4)7def test_3(…...

防(反)浏览器指纹技术之指纹浏览器揭秘

什么是指纹浏览器? 首先&#xff0c;这个指纹并不是上班打卡的指纹&#xff0c;也不是你家指纹锁的指纹&#xff01; 这里指的浏览器指纹是指通过浏览器的各种信息&#xff0c;如系统字体、屏幕分辨率、浏览器语言、时区等等&#xff0c;无需 cookie 等技术&#xff0c;就能…...

2021全球暑期量子学习日程汇总,谷歌量子夏季研讨会正在报名中

今日小暑&#xff0c;虽酷热&#xff0c;但学习热忱不减&#xff0c;尤其是在各个科技巨头和高等院校接连发布了量子暑期班的招募通告后&#xff0c;大家可以妥善安排&#xff0c;“错峰出行”。 近日&#xff0c;谷歌也发布了暑期会议相关通告&#xff0c;其量子夏季研讨会 (…...

STM32使用STM32CubeMX配置引脚中断

前言 嵌入式系统中&#xff0c;外部中断&#xff0c;是一个比较常见的功能。中断的灵活使用&#xff0c;大大增强了系统的实时性。使用STM32 最新的HAL库&#xff0c;如何配置一个引脚中断呢&#xff1f; 配置中断 可以借助STM32提供的可视化软件&#xff1a;STM32CubeMX&#…...

最新出炉,头条三面技术四面HR,看我如何一步一步攻克面试官?

最开始面的头条游戏中台&#xff0c;当时是第一次面试&#xff0c;没有经验&#xff0c;导致算法题虽然有思路&#xff0c;但是没有写出最优解&#xff0c;直接挂了。后来又被捞起来&#xff0c;因为此时已有阿里的offer&#xff0c;所以胆子也大起来了&#xff0c;收拾心情开始…...

分享:关于 JVM 内存的 N 个问题和定位工具

JVM的内存区域是怎么划分的? JVM的内存划分中,有部分区域是线程私有的,有部分是属于整个JVM进程;有些区域会抛出OOM异常,有些则不会,了解JVM的内存区域划分以及特征,是定位线上内存问题的基础。那么JVM内存区域是怎么划分的呢? 首先是程序计数器(Program Counter Re…...

以太坊基础入门

以太坊特点 • 以太坊是“世界计算机”&#xff0c;这代表它是一个开源的、全球分布的计算 基础设施 • 执行称为智能合约&#xff08;smart contract&#xff09;的程序 • 使用区块链来同步和存储系统状态以及名为以太币&#xff08;ether&#xff09;的加密 货币&#xff0…...

Centos8.0系统升级到最新版本

一 &#xff0c;Centos8.0更换国内源&#xff08;阿里源&#xff09; 1&#xff0c; 备份旧的配置文件 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup2&#xff0c;进入cd /etc/yum.repos.d cd /etc/yum.repos.d3&#xff0c;下载新的 Ce…...

政产学研各界推动软件和信息技术服务业增速发展

​日前&#xff0c;工业和信息化部发布的最新数据显示&#xff0c;上半年&#xff0c;我国软件和信息技术服务业业务收入呈加快增长态势&#xff0c;完成软件业务收入44198亿元&#xff0c;同比增长23.2%&#xff0c;近两年复合增长率为14.7%。 从利润水平来看&#xff0c;上半…...

代理和负载均衡的详细说明是什么

对客户端提供的代理服务&#xff0c;在客户端无法直接访问服务端的情况下&#xff0c;星池StarPool通过配置代理服务器的方式访问服务端。在整个过程中&#xff0c;客户端请求首先发送到代理服务器&#xff0c;代理服务器再将请求发送到服务端后将结果返回给客户端。从服务端角…...

假期学习之HTML

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 一、HTML是什么&#xff1f; 二、HTML标签 1、<head></head>中标签介绍 2、<body></body>中标签介绍 3、语义化标签 4、列表标签…...

Unity学习笔记3-8.23-8.29

摄像机属性...

js面向对象 —— 继承

二、继承 ES6之前并没有给我们提供extends继承。我们可以通过 构造函数原型对象 模拟实现继承,被称为组合继承。 2.1 、call() 调用这个函数并且修改函数运行时的this指向 ● thisArg :当前调用函数this的指向对象 ● arg1 , arg2 :传递的其他参数 2.2、借用构造函数继承父…...

axios跨域问题

项目配置 vue-cli3vue2element-ui-2.15.3 在网上找了很多方案&#xff0c;但是都没有生效&#xff0c;最后是前端添加了一段代码&#xff0c;后台添加了一段代码 解决了 添加了headers的配置 const instance axios.create({// baseURL: http://mall.huolida.com/,// baseUR…...

Visual Studio

Visual Studio 2019 Enterprise&#xff08;企业版&#xff09;&#xff1a;BF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio 2019 Professional&#xff08;专业版&#xff09;&#xff1a;NYWVH-HT4XC-R2WYW-9Y3CM-X4V3Y...

dbc2000 注册机|dbc2000 注册码注册机下载

点击下载来源&#xff1a;dbc2000 注册机 dbc2000 注册机是同名源程序软件的注册机软件&#xff0c;该源程序软件是一款应用于数据库搭建以及数据写入的数据库架设工具&#xff0c;它拥有强大的数据写入功能&#xff0c;在作为应用程序使用时&#xff0c;它不仅可以充当数据属性…...

秋招面经第八弹:网易二面-数据开发工程师

秋招第八弹&#xff1a;网易二面-数据开发工程师 写在最前&#xff1a;秋招以来一直在冲&#xff0c;因为事情比较多&#xff0c;对于笔试面试一直没有复盘&#xff0c;现在靠仅存的记忆把面试的一些问题记录下来&#xff0c;尽可能记录出能回忆到的问题&#xff0c;但可能记的…...

安卓课程格子APP

https://download.csdn.net/download/weixin_57836618/73810452 功能演示&#xff1a; 查看所有课程 点击主页面空白处即可添加课程 添加课程之后查看课程 查看双周课程 查看单周课程 6.查看课程详情...

强化学习——格子世界

强化学习——格子世界 项目源码地址&#xff1a;https://gitee.com/infiniteStars/machine-learning-experiment 1. 实验内容 2. 实验代码 import numpy as np import matplotlib.pyplot as plt from matplotlib.table import Table from xml.dom.minidom import Document #手…...

华为机试 - 跳格子游戏

目录 题目描述 输入描述 输出描述 用例 题目解析 算法源码 题目描述 地上共有N个格子&#xff0c;你需要跳完地上所有的格子&#xff0c;但是格子间是有强依赖关系的&#xff0c;跳完前一个格子后&#xff0c;后续的格子才会被开启&#xff0c;格子间的依赖关系由多组st…...

php 爬课程表信息,Ruby爬取教务系统生成课程表

我为什么要虐自己最近觉得课程格子广告越来越多&#xff0c;乱七八糟的东西越来越多&#xff0c;完全失去了一开始的存在价值&#xff0c;并且没有电脑端app&#xff0c;想查看课程必须拿出手机&#xff0c;而我使用电脑频率要比手机高&#xff0c;所以才有了折腾的动力。于是我…...

android 课程表 ui,UICollectionViewLayout实现课程表布局

因为项目中有课程表的相关模块&#xff0c;第一时间想到用UICollectionView。然而后期的需求越来越复杂&#xff0c;每个格子需要展示的内容越来越多&#xff0c;所以不得不寻找合适的解决方案。最后发现自定义UICollectionViewLayout可以实现我的需求。先放效果图&#xff1a;…...

Android自定义View课程表,Android 自定义View课程表表格

自己闲下来时间写的一个课表控件使用的自定义LinearLayout 里面View都是用代码实现的 最终效果如下图 写的可能有问题希望多多指点创建一个自定义LinearLayout 控件用来装载课程的信息和课程的周数 和节数大概的布局三这样的根据上面的看来觉得总体布局我分了两个 上面的星期是…...

java课程设计设计_java课程设计

1. 团队课程设计博客链接https://www.cnblogs.com/choco1ate/p/12172223.html2.本组课题及本人任务本组课题&#xff1a;泡泡堂(炸弹人)游戏本人任务&#xff1a;Box类(游戏地图中的每个方格)Bomb类(游戏过程中的)游戏玩家输赢信息的文件储存3.需求分析Box类&#xff1a;该类为…...

《课程格子》的一个笔试题目

题目如下&#xff0c;感觉很适合喜欢琢磨的程序员&#xff0c;也是考验你编码风格的时候。 Lets make a tower defense game&#xff08;塔防游戏):1. You have 1 tower, with H health and D dps(damage per second).2. There are n attackers, each with h_i health and d_i …...

Android仿照超级课程表 or 课程格子 一键提取课表功能(方正系统)

参考文章http://blog.csdn.net/sbsujjbcy ,本文仿照‘ 安卓弟 提供的android 项目实战——打造超级课程表一键提取课表功能文章&#xff0c;对他的代码进行了修改和补充&#xff0c;为什么要修改呢&#xff1f;原因是安卓弟的那个源码版本过于老旧&#xff0c;很多方法已经过…...

一篇文章搞懂数据仓库:数据治理(目的、方法、流程)

目录 1、什么是数据治理 2、数据治理的目的 3、数据治理的方法 4、数据质量8个衡量标准 5、数据治理流程 1、什么是数据治理 数据治理&#xff08;Data Governance&#xff09;是组织中涉及数据使用的一整套管理行为。由企业数据治理部门发起并推行&#xff0c;关于如何制…...

1、基础数据

数据类型理解为固定内存大小的别名。 数据类型是创建变量的模子。 2、有符号与无符号 数据类型的最高位用于标识数据的符号。 最高位为1&#xff0c;表明这个数为负数。 最高位为0&#xff0c;表面这个数为负号。 有符号数的表示法&#xff1a; 在计算机内部用补码表示有…...

第一篇 基础数据篇

debug模式 基本数据类型 数据0开头为8进制 ox代表16进制 在数据后加L可以把数据转化为long类型 浮点数存在舍入误差&#xff0c;很多数字不能精确表示&#xff0c;如果需要进行不产生舍入误差的精确数字计算&#xff0c;需要使用bigdecimal类&#xff0c;精确运算尽量避免使用…...

3.基础数据类型

参考资料&#xff1a; C语言中文网&#xff1a;http://c.biancheng.net/ 《C语言编程魔法书基于C11标准》 视频教程&#xff1a;C语音深入剖析班&#xff08;国嵌 唐老师主讲&#xff09; 数据在内存中的存储 计算机要处理的信息是多种多样的&#xff0c;如数字、文字、符号、…...

基础数据分析方法

&#xff08;一&#xff09;公式法 所谓公式法就是针对某个指标&#xff0c;将指标拆解为另外两个指标的和或乘积&#xff08;或同一指标不同维度&#xff09;&#xff0c;逐层下钻&#xff0c;直至无法分解 举例&#xff1a;分析某商场的销售额降低原因 销售额 会员销售额…...

PyTorch 迁移学习 (Transfer Learning) 代码详解

PyTorch 迁移学习 代码详解概述为什么使用迁移学习更好的结果节省时间加载模型ResNet152冻层实现模型初始化获取需更新参数训练模型获取数据完整代码概述 迁移学习 (Transfer Learning) 是把已学训练好的模型参数用作新训练模型的起始参数. 迁移学习是深度学习中非常重要和常用…...

什么是自主系统?

根据系统在三个方面的属性(即熟练性、可信赖性和灵活性)定义了一个自主系统:●一个自主系统的设计应确保在作战期间&#xff0c;在给定的环境、任务以及设想的队友之中的熟练性。理想的熟练性属性包括现场智能性、自适应认知、多智能体突现&#xff0c;以及从经验中学习。●一个…...

JDK 14如期发布,16个新特性快速预览

JDK 14已经于2020年3月17日如期发布。本文介绍JDK 14特性。 JEP 305: instanceof的模式匹配&#xff08;预览&#xff09; 通过对instanceof运算符进行模式匹配来增强Java编程语言。 模式匹配允许程序中的通用逻辑&#xff0c;即从对象中有条件地提取组件&#xff0c;可以更简…...

西门子estop指令_西门子6RA80直流调速器调试步骤和参数设置

西门子6RA80直流调速器简要调试步骤一、送电前检查装置和电机1、 辅助电源系统送电检查2、 接地线和辅助电源零线检查3、 电机绝缘检查和编码器安装检查4、 电机电枢绕组和励磁绕组对地绝缘和电阻检查5、 检查装置风机和柜顶风机电源和转向6、 检查电机风机电源和转向7、 装置电…...