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 日を費やしましたが、まだうまくいきません。ここで行方不明か何か間違っていますか..
ありがとう。