2

我正在尝试使用 AnimatedVectorDrawableCompat 类来实现变形动画。基本上，我正在尝试将动画实现为 Evernote 应用程序 - 注释编辑功能（用户按下编辑按钮和后退按钮变形为勾选按钮）。

我在 .JAVA 文件中完成了以下操作：

private AnimatedVectorDrawableCompat arrowDoneAnimatedVectorDrawable;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_compose_note);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    if (null != getSupportActionBar()) {
        getSupportActionBar().setDisplayShowTitleEnabled(false);          

        arrowDoneAnimatedVectorDrawable = AnimatedVectorDrawableCompat.create(this, R.drawable.animation_vector_consolidated);

       getSupportActionBar().setHomeAsUpIndicator(arrowDoneAnimatedVectorDrawable);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    findViewById(R.id.fab_edit_note).setOnClickListener(this);
}

@Override
public void onClick(View v) {
    if (arrowDoneAnimatedVectorDrawable.isRunning()) {
        arrowDoneAnimatedVectorDrawable.stop();
    } else {
        arrowDoneAnimatedVectorDrawable.start();
    }
}

下面是合并 .XML 到 Morph Back 按钮路径以勾选按钮：

 <?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:igonore="NewApi"
    android:drawable="@drawable/ic_arrow_back_black_24dp">

    <target
        android:animation="@animator/arrow_done_transition"
        android:name="head"/>
</animated-vector>

下面的 .XML 文件是在按钮路径上运行 Animator ：

    <?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@integer/morphing_time"
    android:propertyName="pathData"
    android:valueType="pathType"
    android:valueFrom="M 20.0,11.0 H 7.83 l 5.59,-5.59 L 12.0,4.0 l -8.0,8.0 l 8.0,8.0 L 12.0,20.0 L 12.0,20.0 l 1.41,-1.41 L 7.83,13.0 H 20.0 v -2.0 L 20.0,11.0"
    android:valueTo="M 9.0,16.2 H 9.0 l 0.0,0.0 L 4.8,12.0 l 0.0,0.0 l -1.4,1.4 L 9.0,19.0 L 21.0,7.0 l -1.4,-1.4 L 9.0,16.2 H 9.0 v 0.0 L 9.0,16.2"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    />

我使用VectAlign来对齐两个图标路径。

最后，这就是后退按钮矢量的样子：

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M 20.0,11.0 H 7.83 l 5.59,-5.59 L 12.0,4.0 l -8.0,8.0 l 8.0,8.0 L 12.0,20.0 L 12.0,20.0 l 1.41,-1.41 L 7.83,13.0 H 20.0 v -2.0 L 20.0,11.0"/>
</vector>

我花了大约两天的时间来弄清楚变形概念及其实现，但仍然没有运气。我在这里失踪或做错了什么..

谢谢。

4

0 回答 0