矢量图片库---
http://iconfont.cn/collections
阿里矢量图形库---
http://iconfont.cn/plus/collections/detail?cid=3057
根据上图的方式可以获得drawable类型的xml文件，里面有path，color，height，weigh
- 上面说的是如何导入SVG矢量图型下面来说怎么用
需要关联这个库
//svg函数库
compile 'com.jrummyapps:animated-svg-view:1.0.1'
我们要设置AnimatedSvgView的属性(属性值具体的含义我还没太弄清楚，就不和大家乱说了。)
<com.jrummyapps.android.widget.AnimatedSvgView
android:id="@+id/animated_svg_view"
android:layout_width="180dp"
android:layout_height="180dp"
android:layout_gravity="center"
android:layout_marginBottom="25dp"
app:animatedSvgFillColors="@array/google_glyph_colors"
app:animatedSvgFillStart="1200"
app:animatedSvgFillTime="1000"
app:animatedSvgGlyphStrings="@array/google_glyph_strings"
app:animatedSvgImageSizeX="400"
app:animatedSvgImageSizeY="400"
app:animatedSvgTraceMarkerLength="50"
app:animatedSvgTraceTime="2000"
app:animatedSvgTraceTimePerGlyph="1000"/>
- 需要创建一个枚举类型SVG
public enum SVG {
FISH( new String[]{
"M431.8,145.5c-103.6,-25 -412.6,365.1 -412.6,365.1 -20.2,24.9 -35.3,106.2 12.4,147.9 47.7,41.7 180.4,-43.8 265.4,-70.9 85,-27.1 95.4,41.7 56,85.5 -39.4,43.8 -172.1,81.4 -170,114.7 2.1,33.4 255,160.6 313.1,162.7C554.1,952.6 535.5,170.5 431.8,145.5zM342.2,436.9c-38.7,0 -70.1,-31.6 -70.1,-70.5 0,-38.9 31.4,-70.5 70.1,-70.5 38.7,0 70.1,31.6 70.1,70.5C412.3,405.3 380.8,436.9 342.2,436.9zM1671.9,547.4l297.5,258.3c0,0 -11.8,-617.4 -37.8,-586.5 -26,30.9 0,0 -269.1,199.5 -172.3,-306.3 -1071.8,-346.7 -1071.8,-346.7 39.3,98.6 51.9,947.5 49.6,947.5C1315.5,1078.7 1671.9,547.4 1671.9,547.4zM1662.5,103.9c126.5,38.2 163.1,-145.2 135.2,-93.3 -27.9,51.9 -136.5,21.8 -209.4,-7.3 -72.9,-29 -268.8,140.4 -268.8,140.4C1413.4,61.2 1662.5,103.9 1662.5,103.9zM1831.2,842.9c-26.3,52.7 -135.8,26.2 -209.5,-0.5 -73.8,-26.7 -264.2,149 -264.2,149 91.3,-85.5 341.6,-50.9 341.6,-50.9C1826.7,974.6 1857.5,790.1 1831.2,842.9z"
},
new int[]{
Color.BLACK
},1970,1024
),
GRIL(
new String[]{
"M389.3,667.8C389.3,667.8 211.3,733.7 211.3,623.3 211.3,601.3 233.5,599.5 233.5,556.5 233.5,531.5 144.2,0 522.9,0 877.2,0 790,532.9 790,556.5 790,601.6 812.3,600.1 812.3,623.3 812.3,733.9 634.2,667.8 634.2,667.8 634.2,667.8 611,769.5 790,823.7 1012.3,890.9 990.4,988.9 990.4,1024L33.2,1024C33.2,1024 17.6,890.5 233.5,823.7 408.5,769.5 389.3,667.8 389.3,667.8Z"
},
new int[]{
Color.BLACK
},
1024,1024
), BUSYBOX_LOGO(
new String[]{
"M481,452.9c0,15.5-12.6,28.1-28.1,28.1H59.1C43.6,481,31,468.4,31,452.9V59.1C31,43.6,43.6,31,59.1,31h393.8c15.5,0,28.1,12.6,28.1,28.1V452.9z",
"M256.4,397.8l-0.1-0.1l-119.9-71.4v-115l0,0l120.4,64.2l0,0l0.1,0l0,0V398l0,0l-0.1-0.1L256.4,397.8z",
"M375.7,211.3l-118.8,64.3V398l118.8-71.9L375.7,211.3L375.7,211.3z",
"M375.7,211.3v84.2L312.3,328l-55.5-52.4v0L375.7,211.3L375.7,211.3z",
"M433.3,244.4L375.7,274l-64,32.9l-54.8-31.3v0l118.8-64.3l0,0L433.3,244.4z",
"M255.2,147l120.5,64.3l0,0l54.5-31.3l-54.5-30.7l-63-35.4L255.2,147L255.2,147L255.2,147L255.2,147z",
"M78.6,178.3l57.6-29.6l64-32.9l54.8,31.3v0l-118.8,64.3l0,0L78.6,178.3z",
"M255.1,147l1.8,128.7l-0.1,0l-120.5-64.3L255.1,147z",
"M256.9,275.7L256.9,275.7L255.1,147l0,0l0.1,0l120.5,64.3L256.9,275.7z",
"M256.9,275.7V350l-91-48.6l9.6-6.1l23.8,13.4L256.9,275.7L256.9,275.7z",
"M256.8,275.6L256.8,275.6l-0.1,122.3l0.2,0.1L256.8,275.6L256.8,275.6z",
"M256.8,275.6l-120.5-64.3l0,0l-54.5,31.3l54.5,30.7l63,35.4L256.8,275.6L256.8,275.6L256.8,275.6L256.8,275.6z"
},
new int[]{
0xFF41A4C4,
0xFFD95545,
0xFFC54C3F,
0xFFAA4438,
0xFFF4F3EE,
0xFFF4F3EE,
0xFFF4F3EE,
0xFFD2D1CC,
0xFFDCDAD6,
0xFFC54C3F,
0xFFD95545,
0xFFF4F3EE
},
512, 512
);
public final String[] glyphs;
public final int[] colors;
public final float width;
public final float height;
SVG(String[] glyphs, int[] colors, float width, float height) {
this.glyphs = glyphs;//svg图片的绘制path
this.colors = colors;//svg图片的绘制colors
this.width = width;//svg图片的绘制width
this.height = height;//svg图片的绘制height
}
}
- 有了枚举类就可以进行下一步操作,我们需要MianActivity中获取枚举中的数据对svgView进行添加，简单的代码如下。逻辑很简单就是点击下一个而已。如需完整实现这段代码请自行在Layout里面加俩个Button按钮。
public class MainActivity extends AppCompatActivity {
private AnimatedSvgView svgView;
private int index = -1;
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
svgView = (AnimatedSvgView) findViewById(R.id.animated_svg_view);
svgView.postDelayed(new Runnable() {
@Override public void run() {
svgView.start();
}
}, 500);
svgView.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
if (svgView.getState() == AnimatedSvgView.STATE_FINISHED) {
svgView.start();
}
}
});
svgView.setOnStateChangeListener(new AnimatedSvgView.OnStateChangeListener() {
@Override public void onStateChange(int state) {
if (state == AnimatedSvgView.STATE_TRACE_STARTED) {
findViewById(R.id.btn_previous).setEnabled(false);
findViewById(R.id.btn_next).setEnabled(false);
} else if (state == AnimatedSvgView.STATE_FINISHED) {
findViewById(R.id.btn_previous).setEnabled(index != -1);
findViewById(R.id.btn_next).setEnabled(true);
if (index == -1) index = 0; // first time
}
}
});
}
public void onNext(View view) {
if (++index >= SVG.values().length) index = 0;
setSvg(SVG.values()[index]);
}
public void onPrevious(View view) {
if (--index < 0) index = SVG.values().length - 1;
setSvg(SVG.values()[index]);
}
private void setSvg(SVG svg) {
svgView.setGlyphStrings(svg.glyphs);
svgView.setFillColors(svg.colors);
svgView.setViewportSize(svg.width, svg.height);
svgView.setTraceResidueColor(0x32000000);
svgView.setTraceColors(svg.colors);
svgView.rebuildGlyphData();
svgView.start();
}
}
- GitHub最详细的SvgDemo：
https://github.com/jrummyapps/AnimatedSvgView
网友评论