2017-08-26 30 views
0

我是新來的動畫在android(和一般),我使用庫RichPath,事情是,我想要的SVG的邊界線動畫,然後填充顏色。 它的動畫不錯,但我覺得我的SVG需要別的東西,因爲它只是在做外邊框,然後填寫,我做了它在Inkscape的基於文本:在svg上更改/顯示修剪路徑?

like this

期望:

enter image description here

我asuming這是一些有關的,因爲代碼的微調路徑動畫:

RichPathAnimator.animate(svg) 
      .trimPathEnd(0, 1) 
      .duration(800) 
      .animationListener(new AnimationListener() { 
       @Override 
       public void onStart() { 
        a1.setFillColor(Color.TRANSPARENT); 
       } 

       @Override 
       public void onStop() { 
       } 
      }) 

我的矢量資源:

<path 
    android:name="a1" 
    android:pathData="m10.511,2.596q0.869,0 1.569,0.418 0.711,0.406 1.118,1.129 0.418,0.711 0.418,1.592v2.517q0,0.248 -0.169,0.418 -0.158,0.158 -0.406,0.158 -0.248,0 -0.418,-0.158 -0.158,-0.169 -0.158,-0.418v-0.418q-0.395,0.485 -0.96,0.756 -0.564,0.271 -1.219,0.271 -0.813,0 -1.479,-0.406 -0.655,-0.406 -1.039,-1.118 -0.373,-0.722 -0.373,-1.603 0,-0.881 0.406,-1.592 0.406,-0.722 1.118,-1.129 0.722,-0.418 1.592,-0.418zM10.511,7.846q0.564,0 1.016,-0.271 0.463,-0.282 0.722,-0.756 0.26,-0.485 0.26,-1.084 0,-0.598 -0.26,-1.084 -0.26,-0.485 -0.722,-0.756 -0.452,-0.282 -1.016,-0.282 -0.564,0 -1.027,0.282 -0.452,0.271 -0.722,0.756 -0.26,0.485 -0.26,1.084 0,0.598 0.26,1.084 0.271,0.474 0.722,0.756 0.463,0.271 1.027,0.271z" 
    android:fillColor="#3768d2" 
    android:strokeColor="#3768d2" 
    android:strokeWidth="0.26458332" /> 

在此先感謝(Y)

+0

PI輕鬆發佈[mcve]。人們爲了重現問題而需要做的工作越多,獲得幫助的可能性就越小。 –

+0

@PaulLeBeau我上傳了回購,你可以在[this_github](https://github.com/JonathanJumper/balance)的初始提交中的登錄屏幕(唯一一個)看到問題,歡呼 – Jumper

+0

你使用了什麼程序創建原始的SVG?是否有素描? –

回答

0

我已經分手的載體分爲3路,並與我的作品:

的Java:

RichPath outPath = richPathView.findRichPathByName("outPath"); 
RichPath innerPath = richPathView.findRichPathByName("innerPath"); 
RichPath filledPath = richPathView.findRichPathByName("filledPath"); 
filledPath.setFillColor(Color.TRANSPARENT); 

RichPathAnimator 
      .animate(outPath, innerPath) 
      .trimPathStart(1, 0) 
      .duration(800) 
      .thenAnimate(filledPath) 
      .fillColor(Color.TRANSPARENT, 0xff3768d2) 
      .duration(800) 
      .start(); 

XML:

<?xml version="1.0" encoding="utf-8"?> 
<vector 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:width="48dp" 
    android:height="48dp" 
    android:viewportHeight="24" 
    android:viewportWidth="24"> 

    <path 
     android:name="outPath" 
     android:pathData="M12,1.7c1.9,0,3.6,0.5,5.2,1.4c1.6,0.9,2.8,2.1,3.7,3.7c0.9,1.6,1.4,3.3,1.4,5.3v8.3c0,0.5-0.2,1-0.6,1.4 
    c-0.3,0.3-0.8,0.5-1.3,0.5s-1-0.2-1.4-0.5c-0.3-0.4-0.5-0.8-0.5-1.4V19c-0.9,1.1-1.9,1.9-3.2,2.5c-1.2,0.6-2.6,0.9-4,0.9 
    c-1.8,0-3.4-0.4-4.9-1.3c-1.4-0.9-2.6-2.1-3.4-3.7C2.1,15.7,1.7,14,1.7,12s0.4-3.7,1.3-5.3C4,5.2,5.2,3.9,6.8,3 
    C8.3,2.1,10.1,1.7,12,1.7L12,1.7z" 
     android:strokeColor="#3768d2" 
     android:strokeWidth="0.5"/> 


    <path 
     android:name="innerPath" 
     android:pathData="M12,19c1.2,0,2.4-0.3,3.4-0.9c1-0.6,1.8-1.5,2.4-2.5c0.6-1.1,0.9-2.3,0.9-3.6c0-1.3-0.3-2.5-0.9-3.6 
    c-0.6-1.1-1.4-1.9-2.4-2.5C14.4,5.3,13.3,5,12,5S9.6,5.3,8.6,5.9c-1,0.6-1.8,1.4-2.4,2.5C5.7,9.5,5.4,10.7,5.4,12 
    c0,1.3,0.3,2.5,0.9,3.6c0.6,1,1.4,1.9,2.4,2.5C9.6,18.7,10.8,19,12,19z" 
     android:strokeColor="#3768d2" 
     android:strokeWidth="0.5"/> 


    <path 
     android:name="filledPath" 
     android:fillColor="#3768d2" 
     android:pathData="M12,1.7c1.9,0,3.6,0.5,5.2,1.4c1.6,0.9,2.8,2.1,3.7,3.7c0.9,1.6,1.4,3.3,1.4,5.3v8.3c0,0.5-0.2,1-0.6,1.4 
    c-0.3,0.3-0.8,0.5-1.3,0.5s-1-0.2-1.4-0.5c-0.3-0.4-0.5-0.8-0.5-1.4V19c-0.9,1.1-1.9,1.9-3.2,2.5c-1.2,0.6-2.6,0.9-4,0.9 
    c-1.8,0-3.4-0.4-4.9-1.3c-1.4-0.9-2.6-2.1-3.4-3.7C2.1,15.7,1.7,14,1.7,12s0.4-3.7,1.3-5.3C4,5.2,5.2,3.9,6.8,3 
    C8.3,2.1,10.1,1.7,12,1.7L12,1.7z M12,19c1.2,0,2.4-0.3,3.4-0.9c1-0.6,1.8-1.5,2.4-2.5c0.6-1.1,0.9-2.3,0.9-3.6 
    c0-1.3-0.3-2.5-0.9-3.6c-0.6-1.1-1.4-1.9-2.4-2.5C14.4,5.3,13.3,5,12,5S9.6,5.3,8.6,5.9c-1,0.6-1.8,1.4-2.4,2.5 
    C5.7,9.5,5.4,10.7,5.4,12c0,1.3,0.3,2.5,0.9,3.6c0.6,1,1.4,1.9,2.4,2.5C9.6,18.7,10.8,19,12,19z"/> 

</vector>