uniapp-svg-anim

介绍

uniapp 动态svg,有更好实现方式希望一起沟通，由于render.js特性只支持app-vue与h5

软件架构

软件架构说明

安装教程

1. git clone https://gitee.com/siycao/uniapp-svg-anim.git

2. 通过import方式引入组件，如 import liSvgPhoto from '@/components/liUI/li-svg/photo.vue',然后注册：conponents: {liSvgPhoto}, 或使用esaycom规则自动引入，此方法不需要进行注册，仅需在page.json中添加规则， 如： "easycom": { "autoscan": true, //是否自动扫描组件 "custom": { //自定义扫描规则 "^li-svg-(.*)": "@/components/liUI/li-svg/$1.vue" } }

3. 请在app.vue中引入animate.css动画库与svg.scss(所有svg的动画效果均在这个文件中) /*每个页面公共css */ @import 'animate.css'; @import 'svg.scss'; 4.由于组件位于视图层中，故一个组件一个页面仅能加载一次，请将他定义为一个全新的组件 5.自定义svg图标： 基础条件： 仅针对了解svg图标朋友，并且了解svg.js与animate.css。额，没办法，uniapp这玩意原本就不支持svg,很难受 原理：通过svg.vue中的initsvg函数创建svg并设置雷鸣,通过传入的show控制action属性，（/svg.scss中）通过id.action选择器分别两种状态的效果 目前一个组件分为两部分构成，1.svg组件相关的vue文件 2.svg.scss中定义的效果。所学较浅暂时还没有发现更好的方法。

   svg.vue部分：建议直接copy一份原有的svg组件代码，在其基础上进行修改，主要需要修改的有两个地方： 1.第二行的id,由于render.js这种加载方式的缺陷。请保证他的唯一                
   性。2.initsvg函数，函数内部使用svg.js动态创建svg图标，并对他添加相关的属性与类名。
   svg.scss部分： 文件位于根目录，主要是通过svg的id与在initsvg中对每个path等元素创建的class，分别控制两种不同状态的显示效果。
   注意事项： 请保证id的唯一性，不然会有问题

使用说明

1. 本项目基于animate.css svg.js scss render.js构建

2. 兼容性与性能： 仅支持app-vue， h5,不支持小程序。性能： 写了20个一样的组件进行渲染没有发现卡顿问题。

3. 组件说明： 所有组件仅接收两个属性： show: 控制活动与非活动，数值类型： Boolean, size: 图标的大小，例： 1.auto: 自适应 2. 20（单位为px）

4. 引用说明： 推荐使用esaycom规则，

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. Gitee 官方博客 blog.gitee.com
3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
4. GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 https://gitee.com/help
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/