自分のプロジェクトに星型を作りたい。 と私はこれを検索しました。今度は、キャンバスを使って最終的に星型にすることができます。星の形を作り、それをアンドロイドでアニメーション化する方法は？
しかし、次に私が望むものは、私にとっては本当に難しいです。それは悪夢だ。 私は試して検索したが、何も私のために働く。
私がしたいものは、背景色のない線で構成する必要があります。 唯一の行.. ..
そして、1行が表現されて消えて、次の行が作成され、再び消えてから、行が作成されて再び消えてしまい、永久にしたいアクション。私はこのアクティビティの画面を別のものに残すまで。
このコードは、私がしばらく取り組んでいたプロジェクトから得たものです。私はそれがあなたが必要とすることをすると思います。
まず、星の線をどのように作成したかについてはわかりません。私はちょうどベクトルdrawablesを使用して、（VectorDrawablesでの作業方法の詳細については、this投稿を参照してください）。かなりあることを行っていないので、私は急いでそれを作ったことを警告する必要があり
警告：この投稿は長くなるだろう
star1.xml
<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:pathData="M20,24L12,0"
android:strokeColor="@color/starColor"
android:strokeWidth="0.1"/>
</vector>
star2.xml
<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:pathData="M4,24L12,0"
android:strokeColor="@color/starColor"
android:strokeWidth="0.1"/>
</vector>
star3.xml
<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:pathData="M0,8L24,8"
android:strokeColor="@color/starColor"
android:strokeWidth="0.1"/>
</vector>
star4.xml
<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:pathData="M20,24L0,8"
android:strokeColor="@color/starColor"
android:strokeWidth="0.1"/>
</vector>
オクラホマ
<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:pathData="M4,24L24,8"
android:strokeColor="@color/starColor"
android:strokeWidth="0.1"/>
</vector>
star5.xml。これですべての必要なドロアブルが得られたので、アクティビティXMLにジャンプしてレイアウトを作成しましょう。ここの基本的なもの。私は5 ImageViewを使用して、異なる星の線を保持しています（アニメーションを作成するのに便利ですが、後で説明するパフォーマンスの問題を引き起こす可能性があります）。私はConstraintLayoutをルートビューとして使用しています。あなたは気づいているかもしれませんが
activity_test.xml
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image1"
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:alpha="0"/>
<ImageView
android:id="@+id/image2"
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:alpha="0"/>
<ImageView
android:id="@+id/image3"
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:alpha="0"/>
<ImageView
android:id="@+id/image4"
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:alpha="0"/>
<ImageView
android:id="@+id/image5"
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:alpha="0"/>
</android.support.constraint.ConstraintLayout>
私はandroid:srcプロパティを使用してImageViewにドロウアブルのいずれかが割り当てられていません。私はあなたが先に進み、それをやってみることをお勧めします。私はプログラムで画像を追加しています。 onCreate方法上記
private ImageView image1, image2, image3, image4, image5;
private Context context;
private int i = 1;
private long duration = 800;
private Handler animHandler;
animHandler次の変数を宣言すると、アニメーションの実行を維持する責任を負うことになるだろう。 iを使用して、ImageViewをアニメーション化するようにしています。その名前が示すように、フィールドdurationはアニメーションに必要な期間を保持します。
ここにコードの残りの部分があります。私は可能な限りコメントを提供します。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
// Initialising the imageview. I'm using SDK 26 so I did not
// require typecasting.
image1 = findViewById(R.id.image1);
image2 = findViewById(R.id.image2);
image3 = findViewById(R.id.image3);
image4 = findViewById(R.id.image4);
image5 = findViewById(R.id.image5);
context = TestActivity.this;
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
setupView(); // This method will initialize all IVs
// and add the vector drawable as bitmap
animHandler = new Handler();
startAnim();
}
}, 200);
}
こっち
private void setVectorDrawable(ImageView imageView, Drawable drawable) {
Bitmap bitmap = Bitmap.createBitmap(imageView.getWidth(),
imageView.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
imageView.setImageBitmap(bitmap);
}
private void setupView() {
setVectorDrawable(image1, ContextCompat.getDrawable(context,R.drawable.star1));
setVectorDrawable(image2, ContextCompat.getDrawable(context,R.drawable.star2));
setVectorDrawable(image3, ContextCompat.getDrawable(context,R.drawable.star3));
setVectorDrawable(image4, ContextCompat.getDrawable(context,R.drawable.star4));
setVectorDrawable(image5, ContextCompat.getDrawable(context,R.drawable.star5));
}
setVectorDrawable setupView、私は5行を保持するために、5種類のビットマップを作成しています。これはあまり問題にならないでしょう。しかし、メモリ内にたくさんのビットマップを持つより大きなプロジェクト（私は69ビットマップを一緒に使用しなければなりませんでした）では、おそらく良い習慣ではありません。 5ビットマップは正常に動作するはずです。
startAnim
private void startAnim() {
runnable.run();
}
実行可能
Runnable runnable = new Runnable() {
@Override
public void run() {
switch (i) {
case 1:
animateStarIn(image1);
break;
case 2:
animateStarIn(image2);
break;
case 3:
animateStarIn(image3);
break;
case 4:
animateStarIn(image4);
break;
case 5:
animateStarIn(image5);
break;
case 6:
animateStartOut(image1);
break;
case 7:
animateStartOut(image2);
break;
case 8:
animateStartOut(image3);
break;
case 9:
animateStartOut(image4);
break;
case 10:
animateStartOut(image5);
break;
}
i++;
if (i == 11) i = 1;
animHandler.postDelayed(runnable, duration);
}
};
private void animateStarIn(ImageView imageView) {
imageView.animate().alpha(1).setDuration(duration).setInterpolator(new AccelerateInterpolator());
}
private void animateStartOut (ImageView imageView) {
imageView.animate().alpha(0).setDuration(duration).setInterpolator(new DecelerateInterpolator());
}
は簡単であるために、私は違っiが保持している値の変数に応じて、異なるImageViewsをアニメーション化します実行可能を作成しています。
もう一度私がこのコードを投稿したことを、私がしばらく取り組んできたプロジェクトから引用してください。それが直接あなたの要件を満たしていない場合でも、私はそれを試してそれを稼働させるためにちょっと試してみることをお勧めします。
編集
このアニメーションはrunnable繰り返しを確保することによって動作します。アニメーションの使用を停止するには
animHandler.removeCallbacks(runnable);
あなたが望むものを正確に行うためのコードは見つからないと思いますが、他のコードを採用してそれを適応させることができます。
キャンバス上で行を1行ずつ描画するコード（たとえば、drawing a starから取得）を使用して、描画する星の行と描画していない行を管理することができますステージを管理する小さな「状態機械」）。
適切な段階で、このビューで簡単なフェードアニメーションを使用してフェーディングを処理できます。
私はこの例を見てきました。 –
うわー..信じられないほどだ。それは完璧です。 「アニメーション化するのに便利だが、後で話すパフォーマンスの問題を引き起こす可能性がある」と言った。私はこれを私のアプリに入れます。パフォーマンスに問題はありますか？それを使用するよりも最適化を行う方が良いですか？たとえば、GIFを作成して添付します。機能は完璧ですが、最後に、パフォーマンスの問題について質問したいと思います。 –
@Julidi私たちが5つの 'ImageView'について話しているのであれば、そのようなパフォーマンスには影響しません。 Androidモニターは7MBが使用されていることを示しています（これはあまりありません）。さらに、この例では 'ImageView'サイズを' 200dp'として使用しています。それを縮小して75dpと言うなら、メモリ使用量は1〜2MBになります。キャンバスに描画するために 'path'を使って作業する方がメモリ効率的ですが、時間がかかります。 –
そしてそれを止める方法は？ –