前端实现看到一个网页的效果很cool（参考https://tympanus.net/Development/SVGDrawingAnimation/index2.html）,决定自己去实现以下这个效果，并且封装成一个js插件供大家简单去实现该效果；
目前，已经实现了三种效果（描绘容器的边框，描绘线状统计图样式，描绘饼状统计图样式）；
使用方法：
1、首先引入jquery和svg.js
2、然后引入svg.webInitAnimation.js
3、定义自己的dom元素
4、选择想要绘制的样式添加到class属性中
如下
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="svg.js"></script>
<script type="text/javascript" src="svg.webInitAnimation.js"></script>
</head>
<body class="bg-fill" style="background-color:#07263B;margin:0;padding:0;">
<div style="margin-top:20px;text-align:center;">
<span class="init_border">fdsgfsdgfdsg</span>
</div>
<span class="init_border" style="margin-left:100px;">fdsafdas</span>
<div class="init_chartline init_border" style="margin-left:400px;margin-top:50px; background-color: red; width:300px;height:200px;"></div>
<div class="init_pie" style="margin-left:200px;margin-top:50px; background-color: red; width:300px;height:300px;"></div>
</body>
</html>
用法解释：
首先如果你想要背景色填充动画样式，在body节点添加bg-fill类，并且设置body的背景色，如果不需要该效果则不需添加样式和class
边框描绘：选择你想要描绘边框的dom在class中添加init_border类即可，
线状统计图样式：选择你需要绘制该样式的dom添加init_chartline类即可，
饼状统计图样式：选择你需要绘制该样式的dom添加init_pie类即可
以上的样式效果可以在同一dom上添加，最好是init_border和其他样式配合使用
注意：
在边框描绘样式中如果选择的是文字的边框，请确保选择的dom是完整包围文字的，最好选择行内元素，块状元素（例如<div style="width:100%;text-align:center;">testtext</div>）则不能确点描绘的是文字的边框而是div块状元素的边框了
后续会添加更多的样式效果请关注我的github
时间： 2024-11-09 20:01:37