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();
    }
}

以下は、Morph Back ボタンへの統合された .XML パスから目盛りボタンへのパスです。

 <?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 ファイルは、ボタン パスでアニメーターを実行するためのものです。

    <?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>

モーフィングの概念とその実装を理解するために約 2 日を費やしましたが、まだうまくいきません。ここで行方不明か何か間違っていますか..

ありがとう。

4

0 に答える 0