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在Icon Animation Techniques的博客，特别是他对不确定ProgressBar的实施。

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

进行测试

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

代表

    android:repeatCount="0"

我真正的hacky解决方法是将另一个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>

动画矢量drawable（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();
}

动画：绘制矢量圆

问题描述

源代码

1 个答案: