动画：绘制矢量圆

Question

问题描述

我想要为矢量图像制作动画。它应该是简单的动画，就像从头开始画圆圈一样。

源代码

<vector android:height="24dp" android:viewportHeight="20.0"
    android:viewportWidth="20.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#000000"
        android:pathData="M10,0C4.5,0 0,4.5 0,10C0,15.5 4.5,20 10,20C15.5,20 20,15.5 20,10C20,4.5 15.5,0 10,0L10,0ZM10,18C5.6,18 2,14.4 2,10C2,5.6 5.6,2 10,2C14.4,2 18,5.6 18,10C18,14.4 14.4,18 10,18L10,18Z"
        android:strokeColor="#00000000" android:strokeWidth="1"/>
</vector>

Answer 1

以下代码的灵感来自 Alex J. Lockwood 关于图标动画技术的博客，特别是他对不确定ProgressBar.

在调整它来绘制红色圆圈时，我遇到了一些问题。例如，它仍然无法aapt:attr在 Android Studio 中使用，但作为一种解决方法，可以将代码放在单独的文件中（见下文）。另一个问题是，与动画结束后相同的路径相比，动画运行时路径的描边宽度看起来更小。您可以通过交换来测试这一点

    android:repeatCount="-1"
    android:repeatMode="reverse"

为了

    android:repeatCount="0"

我对此的真正解决方法是在View红色圆圈的顶部放置另一个只有白色圆圈作为背景且宽度和高度为 48dp 的ImageView圆圈。

下面是如何（重复）画一个圆：

圆（res/drawable/circle_48dp）：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path   
        android:name="redCircle"
        android:fillColor="@android:color/transparent"
        android:strokeColor="@android:color/holo_red_dark"
        android:strokeLineCap="square"
        android:strokeLineJoin="miter"
        android:strokeWidth="4"
    android:pathData="M12,2C6.47,2 2,6.47 2,12s4.47,10 10,10 10,-4.47 10,-10S17.53,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8z"/>
</vector>

动画（res/animator/trim_path）

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="1333"
        android:propertyName="trimPathStart"
        android:repeatCount="-1"
        android:repeatMode="reverse"
        android:valueFrom="1.00"
        android:valueTo="0.0"
        android:valueType="floatType"
        android:interpolator="@android:anim/linear_interpolator">
    </objectAnimator>
</set>

动画矢量可绘制 (res/drawable/avd_circle)

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/circle_48dp">

    <target android:name="redCircle" 
        android:animation="@animator/trim_path">
    </target>
</animated-vector>

布局Activity：

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.vectordrawables.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Animated Circle"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"/>

    <ImageView
        android:id="@+id/iv_animated_circle"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_centerInParent="true"
        android:scaleType="center"
        android:src="@drawable/avd_circle"/>
</RelativeLayout>

最后，如何开始动画onCreate()

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ((Animatable)((ImageView)findViewById(R.id.iv_animated_circle)).getDrawable()).start();
}