SVG羔沙，即Scalable Vector Graphics 矢量圖,首先你要有SVG矢量圖雁仲，然后使用AndroidStudio轉(zhuǎn)化為Vector使用
阿里巴巴矢量圖標(biāo)庫(kù)
http://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=5673
一個(gè)在線制作SVG矢量圖的網(wǎng)站
http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Feditor.method.ac%2F&h=2000&c=&n=
使用studio創(chuàng)建Vector Asset,將制作好的svg圖片導(dǎo)入進(jìn)去疗我，就會(huì)自動(dòng)生成vector代碼。
QQ圖片20180117155645.png
這里使用上面的網(wǎng)站寫(xiě)了幾個(gè)字
捕獲的.PNG
然后點(diǎn)擊view生成代碼
捕獲.PNG
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<path d="m-182,-534c0,-2 1,-2 1,-4c0,-2 0,-5 0,-9c0,-5 0,-10 0,-14c0,-3 0,-7 0,-10c0,-4 0,-8 0,-14c0,-4 0,-10 0,-14c0,-4 0,-7 0,-11c0,-2 0,-4 0,-5l0,-1l0,-1l0,-1" id="svg_3" stroke-width="1.5" stroke="#000" fill="none"/>
<path d="m140,73c1,0 6.44479,2.82523 18,10c20.14001,12.5052 50.91733,21.06679 82,37c27.92908,14.31665 54.88806,33.20422 73,43c18.88568,10.21425 29.22623,15.22884 32,21c0.4332,0.90131 0,3 0,6c0,3 -2.1973,9.89465 -8,21c-6.21323,11.89099 -12.66855,25.27441 -21,35c-10.59064,12.36279 -21.40729,20.29865 -40,28c-8.76468,3.63046 -25,6 -40,6c-15,0 -28.38516,1.43124 -42,-3c-9.3653,-3.04816 -16.79626,-7.16125 -20,-11c-2.86551,-3.4335 -4.48584,-8.89398 -6,-17c-1.48038,-7.92519 -1.54794,-15.01366 -1,-26c0.50063,-10.0374 4.95915,-18.83815 14,-29c11.75967,-13.2178 27,-22 46,-33l21,-10l10,-7" id="svg_4" stroke-width="1.5" stroke="#000" fill="none"/>
</g>
</svg>
我們只使用path中對(duì)應(yīng)的內(nèi)容替換我們自己的vector 中android:pathData=""中的內(nèi)容就可以了南捂。注意去掉最后面的內(nèi)容
id="svg_4" stroke-width="1.5" stroke="#000" fill="none"碍粥，只使用path d=" "中的內(nèi)容。
<vector android:height="24dp" android:viewportHeight="1024.0"
android:viewportWidth="1024.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path
android:name="name1"
android:strokeWidth="10"
android:strokeColor="#f00"
android:fillType="nonZero"
android:pathData="m835,208c-1,3 -1.52017,3.32367 -3,5c-2.38617,2.703 -4.87604,4.34315 -10,6c-3.9231,1.26855 -11.00705,3.93839 -20,5c-8.00665,0.94519 -17.0174,2.44077 -26,3c-8.04669,0.50096 -17.06766,3.0291 -24,4c-7.20975,1.00977 -11.03873,1.51945 -14,2c-3.12143,0.50655 -5.07611,0.61731 -6,1c-1.30655,0.5412 -1.22977,2.02675 -1,3c0.51373,2.17625 3,4 5,6c2,2 5.20682,4.81265 7,7c2.28589,2.78833 4,6 8,10c2,2 6.19028,5.88153 8,9c1.12234,1.93399 2,4 3,4c1,0 0,-4 0,-7c0,-2 0.95517,-5.54916 2,-9c0.57956,-1.91418 0.61731,-3.07611 1,-4c0.5412,-1.30655 0.69345,-2.4588 2,-3c0.92389,-0.38269 3.14682,1.86325 5,4c3.276,3.77728 3.69254,5.186 5,7c2.48071,3.4418 3.34619,3.70547 5,6c1.30746,1.814 1,0 2,-2c1,-2 1.48627,-2.82376 2,-5c0.22977,-0.97324 0.69345,-1.4588 2,-2c0.92389,-0.38269 1.4588,-0.69345 2,-2c0.38269,-0.92389 1.4588,-0.69345 2,-2c0.38269,-0.92389 0.77023,-1.02676 1,-2c0.51373,-2.17625 2,-2 3,-2c1,0 2.44806,-1.57719 5,0c1.9021,1.17557 2.71899,3.31021 6,6c2.78833,2.28589 6,5 8,7c2,2 4,4 5,5c1,1 1,2 0,2c-2,0 -5,0 -9,0c-6,0 -11.01028,-0.45316 -21,0c-11.03403,0.50052 -22.06238,1.42111 -34,3c-11.0838,1.46594 -23,2 -33,2c-9,0 -16,0 -23,0c-4,0 -7,0 -8,0c-1,0 -1.29562,1.01459 -1,4c0.50244,5.07422 1.79861,10.04453 3,15c1.71527,7.07516 3.53375,13.09662 5,19c0.76227,3.06903 1.78986,6.07843 3,9c0.85571,2.06586 1.59012,-2.31812 4,-5c5.22021,-5.80942 13.27304,-7.37546 23,-12c9.29825,-4.42072 19.84436,-9.45712 31,-13c10.86688,-3.45117 24.97119,-4.49963 38,-5c12.99042,-0.4989 28,0 41,0c12,0 26,0 38,0c10,0 19.12628,-1.32376 26,0c5.28802,1.01837 8,2 8,3c0,2 0.68927,3.08026 0,6c-1.02747,4.35251 -6.76306,7.38055 -13,11c-5.802,3.36703 -11.96765,4.11688 -19,6c-7.96558,2.133 -16.03894,2.2117 -24,3c-10.14841,1.00488 -18.01071,3.61288 -25,4c-9.04153,0.50076 -18.04379,3.11316 -27,4c-10.14841,1.00488 -17.00906,2.92987 -25,4c-7.00851,0.93857 -10.87857,1.49347 -14,2c-2.96127,0.48056 -4,0 -6,0c-2,0 -5,0 -11,0c-4,0 -7,0 -9,0c-1,0 0.19156,0.90921 7,-1c7.33292,-2.05627 17.90213,-5.57422 28,-7c11.92334,-1.68353 22.02011,-2.43289 30,-3c7.05328,-0.50125 10.58578,-0.58578 12,-2c0.70709,-0.70709 1.4588,-0.69345 2,-2c0.38269,-0.92389 0.4595,-2.0535 0,-4c-0.51373,-2.17624 -0.77023,-4.02676 -1,-5c-0.51373,-2.17624 -2.1731,-3.14728 -3,-2c-1.30746,1.814 -2.91232,5.03067 -4,8c-1.85226,5.05658 -5.19669,8.89349 -10,18c-4.17285,7.91122 -9,16 -14,25c-5,9 -9,15 -15,24c-4,6 -8.34457,11.74283 -12,17c-3.3288,4.78738 -5.03552,8.50424 -8,13c-1.55704,2.3613 -2.77023,3.02676 -3,4c-0.51373,2.17624 -2.15372,-0.37814 0,-5c2.70456,-5.80392 5.724,-9.22272 9,-13c3.70639,-4.2735 7.41092,-7.69238 12,-11c3.62799,-2.6149 8.6113,-5.89682 17,-9c7.73401,-2.86099 13.76108,-5.41589 17,-7c5.68146,-2.77872 7.50424,-2.03552 12,-5c3.54193,-2.33554 5.56134,-3.89737 11,-6c4.75598,-1.83868 9.92767,-3.23172 16,-5c3.95868,-1.15277 5.07611,-1.61731 6,-2c1.30655,-0.5412 1,4 1,8c0,5 -0.06473,10.39783 -3,16c-2.32053,4.42889 -4.21167,7.71411 -7,10c-2.18735,1.79318 -3,3 -6,3c-1,0 -3,0 -4,0c-3,0 -6.38687,-0.9176 -9,-2c-1.84775,-0.76538 -6.32367,-2.52017 -8,-4c-2.703,-2.38617 -2.61731,-3.07611 -3,-4c-0.5412,-1.30655 0.00751,-2.12219 1,-2c4.09222,0.50378 11.09116,4.79568 18,8c12.17105,5.64493 22.53745,12.93536 38,20c12.66873,5.78818 26.95453,11.11984 40,16c10.96271,4.10104 20.92767,6.23172 27,8c3.95868,1.15277 5,1 6,0l0,-3 "/>
<path
android:name="name2"
android:strokeWidth="10"
android:strokeColor="#f00"
android:fillType="nonZero"
android:pathData="m531,514c1,0 1,3 1,7c0,7 0,15 0,23c0,11 0.49951,21.96597 1,33c0.45313,9.98972 0,19 0,30c0,8 0,17 0,26c0,8 0,15 0,22c0,7 0,13 0,17c0,4 0,7 0,9c0,2 0,3 0,4c0,1 -0.27069,-2.94189 -1,-7c-1.60175,-8.9126 -4.86163,-19.03867 -8,-30c-2.87372,-10.03702 -5,-17 -7,-23c-2,-6 -3.99023,-8.79025 -5,-16c-0.2774,-1.98068 -2.56348,-7.70251 -5,-13c-1.32135,-2.87296 -3.4588,-5.69345 -4,-7c-0.38269,-0.92389 -0.4588,-1.69345 -1,-3c-0.38269,-0.92389 -0.07611,-2.38269 -1,-2c-1.30658,0.5412 -3.74109,6.72696 -6,14c-3.02484,9.73911 -8.40619,21.78302 -12,29c-3.39478,6.81729 -3.96857,14.41208 -6,18c-1.39355,2.4613 -1.61731,4.07611 -2,5c-0.5412,1.30655 -1.28589,1.78833 1,-1c2.68976,-3.28101 9.64868,-7.15442 19,-15c8.6673,-7.2717 17.09467,-13.87576 25,-20c5.06189,-3.92142 12.88855,-7.19409 18,-10c1.96014,-1.07602 2,-2 3,-2c1,0 3.10828,-1.13464 9,0c5.28802,1.01837 8.69342,4.4588 10,5c1.84778,0.76538 3.22418,0.90283 4,3c1.43048,3.867 1.64502,9.1113 4,16c1.742,5.09564 3.48627,8.82376 4,11c0.45953,1.9465 0,3 0,4c0,1 2,2 2,3c0,1 0.4588,1.69345 1,3c0.38269,0.92389 0,3 1,5l0,1l0,1l1,1"
/>
<path
android:name="name3"
android:strokeWidth="10"
android:strokeColor="#f00"
android:fillType="nonZero"
android:pathData="m786,489c0,1 0.11584,2.96384 1,6c1.15271,3.95868 1.11584,8.96384 2,12c1.15271,3.95868 4.48621,8.82375 5,11c0.68921,2.91975 2.29285,6.29289 3,7c0.70715,0.70711 2.04297,0.28978 3,0c3.45081,-1.04483 12,-8 20,-12c8,-4 16,-9 22,-12c6,-3 8.45886,-3.69344 9,-5c0.38269,-0.92387 0.51123,1.22218 -1,4c-3.05994,5.62465 -8.83643,10.16916 -14,15c-7.76257,7.26234 -15.2262,9.37653 -27,14c-11.24695,4.41656 -20.96155,8.15811 -33,11c-8.9729,2.11821 -18.01056,4.89008 -29,6c-9.00952,0.90997 -16.05353,2.5405 -18,3c-2.17627,0.51373 -5.04291,1.71021 -6,2c-3.45087,1.04483 -6.05353,2.5405 -8,3c-2.17627,0.51373 -4.87866,0.87869 -7,3c-0.70709,0.70709 1,1 8,1c8,0 25.04279,1.20511 42,0c21.15985,-1.50378 34.97498,-5.49973 50,-6c11.99341,-0.39932 23.08655,-4.61938 25,0c0.54114,1.30655 -1.86719,3.13904 -5,6c-5.76721,5.26675 -14.03333,10.92743 -25,16c-17.05249,7.88751 -33.89429,15.42087 -57,21c-8.96198,2.16397 -22,2 -31,2c-6,0 -11,-2 -11,0c0,1 2,0 3,0c3,0 7,0 14,0c10,0 22,0 37,0c16,0 30,0 46,0c13,0 24,3 24,0c0,-2 -3.11829,-1.52814 -4,-2c-3.17896,-1.70129 -4.08948,-4.87183 -7,-7c-5.1687,-3.77945 -8.31006,-5.33749 -11,-7c-2.40601,-1.487 -4.29285,-2.29291 -5,-3c-0.70715,-0.70709 -0.29285,-2.70709 -1,-2c-1.41418,1.41422 -1.41638,7.27505 -4,12c-4.12708,7.5477 -6.47144,14.25101 -10,21c-4.37103,8.36029 -10.51062,16.26401 -15,24c-3.61945,6.23697 -8.8819,12.07278 -12,17c-3.85614,6.09344 -7,9 -9,11c-2,2 -4.07611,3.61731 -5,4c-1.30658,0.5412 -2.14807,-0.22836 -1,-3c1.0824,-2.61313 3,-4 5,-6c2,-2 2.69342,-2.4588 4,-3c0.92389,-0.38269 1.69342,-0.4588 3,-1c1.84778,-0.76538 2.69342,-0.4588 4,-1c0.92389,-0.38269 1.69342,-0.4588 3,-1c0.92389,-0.38269 3,0 5,0c3,0 4,0 6,0c4,0 9,0 15,0c7,0 17.06165,2.74414 30,6c11.05701,2.78244 24.49658,8.73627 39,12c9.80469,2.20639 23.97437,5.10541 32,7c8.9729,2.11823 14,3 15,3l1,0"
/>
<path
android:name="name4"
android:strokeWidth="10"
android:strokeColor="#f00"
android:fillType="nonZero"
android:pathData="m422.75,215c2,0 6,0 10,0c6,0 15,-2 26,-2c11,0 23,0 35,0c11,0 23,0 37,0c11,0 19,0 28,0c10,0 17,0 22,0c5,0 7,0 8,0c1,0 0,1 -1,2c-1,1 -0.63345,3.02248 -1,6c-0.50378,4.09221 -4,9 -5,15c-1,6 -3.49875,12.94672 -4,20c-0.28357,3.98993 -1.49875,10.94672 -2,18c-0.56711,7.97989 -1.90884,17.05972 -3,27c-1.00601,9.16449 -5,20 -5,30c0,8 -1,18 -1,27c0,9 0,17 0,26c0,7 0,16 0,21c0,6 0,10 0,14c0,4 0,7 0,10c0,1 0,4 0,5c0,2 0,4 0,5c0,1 0.70709,2.29291 0,3c-0.70709,0.70709 -4.09341,-3.93079 -10,-12c-5.08104,-6.94141 -6.67499,-15.62003 -10,-21c-1.487,-2.40601 -4,-6 -5,-10c-1,-4 -2.48625,-5.82376 -3,-8c-0.4595,-1.9465 -0.77025,-4.02676 -1,-5c-0.51375,-2.17624 -1.2565,-3.797 -2,-5c-1.66251,-2.69 -1.48625,-3.82376 -2,-6c-0.22975,-0.97324 -0.9176,-1.38687 -2,-4c-0.76537,-1.84775 -1.1731,-3.85272 -2,-5c-2.6149,-3.62799 -3,-4 -5,-7c-2,-3 -3.9176,-4.38687 -5,-7c-0.38269,-0.92389 -1.34619,-2.70547 -3,-5c-1.30745,-1.814 -3.32367,-3.52017 -5,-5c-2.703,-2.38617 -5.31076,-5.53491 -7,-7c-2.38896,-2.07193 -3.69344,-2.4588 -5,-3c-0.92387,-0.38269 -3,-2 -5,-4c-1,-1 -3,-3 -4,-4c-4,-4 -4.34619,-4.70547 -6,-7c-2.6149,-3.62799 -3.1731,-5.85272 -4,-7c-2.6149,-3.62799 -2.61731,-4.07611 -3,-5c-0.5412,-1.30655 -0.80292,-1.99026 -1,0c-0.50244,5.07422 -2.73259,10.06363 -5,19c-1.79044,7.05652 -3.39827,16.0874 -5,25c-1.4586,8.11618 -2.93839,15.00705 -4,24c-0.94519,8.00665 -2.38908,16.03748 -3,21c-0.50377,4.09222 -1,6 -1,7c0,1 -2.95045,-0.00461 -4,-11c-0.95494,-10.00439 -4.49904,-19.95331 -5,-28c-0.4971,-7.98453 0,-18 0,-25c0,-8 1.19028,-14.88153 3,-18c2.24469,-3.86798 0.22884,-7.22623 6,-10c0.90131,-0.4332 3.31076,-3.53491 5,-5c2.38896,-2.07193 5.5387,-2.60645 8,-4c3.58792,-2.03146 6.9258,-2.49756 12,-3c2.9854,-0.29562 8,0 11,0c3,0 5,0 8,0c1,0 2.29289,-0.70709 3,0c0.70711,0.70709 0.47427,1.14935 1,2c1.17557,1.9021 2,2 3,3c0,0 -0.22975,1.02676 0,2c1.02748,4.35251 3.49623,6.90778 4,11c0.61092,4.96252 0,9 0,14c0,5 0.49756,8.92578 1,14c0.39415,3.98053 0,8 0,11c0,3 0,4 0,6c0,2 0,3 0,4c0,1 -0.61731,2.07611 -1,3c-0.5412,1.30655 -0.41885,2.41885 -2,4c-1.58115,1.58115 -2.1731,1.85272 -3,3c-1.30745,1.814 -1.87856,2.49347 -5,3c-1.97418,0.32037 -5.15224,-0.76538 -7,0c-1.30656,0.5412 -2,1 -4,1c-1,0 -3,0 -5,0c-1,0 -2,0 -3,0c-1,0 -2,0 -5,0c-1,0 -4,-1 -4,0c0,1 4,0 6,0c1,0 4,0 5,0c1,0 2,0 3,0l1,0l-1,0"
/>
這時(shí)生成的vector就可以直接作為一個(gè)imageview的背景使用了黑毅。
<ImageView
android:id="@+id/imageView"
app:srcCompat="@drawable/ic_duigou"
/>
然后給SVG圖片加動(dòng)畫(huà)嚼摩。每一個(gè)path設(shè)置了name。name1矿瘦，name2枕面，name3，name4.給每一個(gè)path添加動(dòng)畫(huà)
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_duigou">
<target
android:name="name1"
android:animation="@animator/anim_cross_line" />
<target
android:name="name2"
android:animation="@animator/anim_cross_line1" />
<target
android:name="name3"
android:animation="@animator/anim_cross_line2" />
<target
android:name="name4"
android:animation="@animator/anim_cross_line3" />
</animated-vector>
動(dòng)畫(huà)
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="together"
android:interpolator="@android:anim/accelerate_interpolator">
<objectAnimator
android:duration="5000"
android:valueFrom="0.5"
android:valueTo="0"
android:propertyName="trimPathStart"
android:repeatCount="infinite"
/>
<objectAnimator
android:duration="5000"
android:valueFrom="0.5"
android:valueTo="1"
android:propertyName="trimPathEnd"
android:repeatCount="infinite"
/>
<!--常用Interpolator類：-->
<!--AccelerateInterpolator：動(dòng)畫(huà)從開(kāi)始到結(jié)束缚去，變化率是一個(gè)加速的過(guò)程潮秘。-->
<!--DecelerateInterpolator：動(dòng)畫(huà)從開(kāi)始到結(jié)束，變化率是一個(gè)減速的過(guò)程易结。-->
<!--AccelerateDecelerateInterpolator：動(dòng)畫(huà)從開(kāi)始到結(jié)束枕荞，變化率是先加速后減速的過(guò)程。-->
</set>
然后引用的時(shí)候直接引用cross_anims.xml即可(animated-vector)
<ImageView
android:id="@+id/imageView"
app:srcCompat="@drawable/cross_anims"
/>
在代碼中播放動(dòng)畫(huà)
ImageView imageView = (ImageView) view;
Drawable drawable = imageView.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
運(yùn)行效果如下
GIF.gif
簡(jiǎn)單記錄一下自己的測(cè)試使用步驟搞动，求別拍磚躏精。
參考http://www.reibang.com/p/e3614e7abc03
