# uniapp-svg-anim

**Repository Path**: mikedone/uniapp-svg-anim

## Basic Information

- **Project Name**: uniapp-svg-anim
- **Description**: uniapp 动态svg,有更好实现方式希望一起沟通，由于render.js特性只支持app-vue与h5
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-12-11
- **Last Updated**: 2021-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)