Question

我不熟悉Android中的动画（一般情况下），我正在使用库 RichPath ，我想要SVG的 borderlines 动画，然后充满色彩。它的动画很好，但我认为我的SVG需要别的东西，因为它只做外边框，然后填写，我在inkscape基于文本做到了：

所需：

我认为它是修剪路径的一部分因为动画代码：

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）

Answer 1

我已将你的矢量分成3条路径，它适用于我：

爪哇：

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>

在svg上更改/显示修剪路径？

1 个答案: