1はじめに
開発プロセス中に、ビュービューを表示または非表示にする必要がある状況に遭遇することがよくあります。ビューを非表示または表示するプロセスでアニメーションを追加すると、インタラクションをより親しみやすく動的にすることができます。この記事では、円形の表示アニメーションを使用します。ビューを微妙に非表示または表示します。
2.サーキュラーリビールアニメーションの紹介
サーキュラーリビールアニメーションは、ViewAnimationUtilsクラスによって提供される一種のアニメーションです。ViewAnimationUtils.createCircularReveal（）メソッドを呼び出すことでサーキュラーリビールアニメーションを作成できます。このアニメーションを使用するには、APIレベル21以上が必要です。パラメーターcreateCircularReveal（）メソッドの例は次のとおりです。
//view：使用圆形动画的视图
//centerX：裁剪圆形的中心的X坐标，这个中心是指相对于视图本身
//centerY：裁剪圆形的中心的Y坐标，这个中心是指相对于视图本身
//startRadius：圆形的起始半径
//endRadius：圆形的结束半径
public static Animator createCircularReveal(View view,int centerX, int centerY, float startRadius, float endRadius)
复制代码3.円形の表示アニメーションを使用して、ビューを表示または非表示にします
3.1シンプルなレイアウト
簡単なレイアウトは次のとおりです。
<LinearLayout 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"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:id="@+id/btn_hide_or_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="隐藏或显示"
android:textColor="@color/black"
android:textSize="18sp" />
<ImageView
android:id="@+id/imageView"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="50dp"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>
复制代码3.2円形の表示アニメーションを使用してビューを非表示にします
まず、中心点を基準にしたビューのX座標とY座標を計算し、次にMath.hypot（）メソッドを呼び出して円の半径を計算し、次にViewAnimationUtils.createCircularReveal（imageView、ivXCenter、ivYCenter、circleRadius、0f ）円形のリビールアニメーションを作成し、アニメーション実行用のリスナーを追加し、アニメーションの実行が終了した後にimageView.setVisibility（View.GONE）を呼び出し、最後にアニメーションを開始します。例は次のとおりです。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
int width = imageView.getWidth();
int height = imageView.getHeight();
int ivXCenter = width/2;
int ivYCenter = height/2;
float circleRadius = (float) Math.hypot(ivXCenter, ivYCenter);
Animator circularReveal = ViewAnimationUtils.createCircularReveal(imageView, ivXCenter, ivYCenter, circleRadius, 0f);
circularReveal.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
imageView.setVisibility(View.GONE);
isVisible = false;
}
});
circularReveal.start();
}else {
imageView.setVisibility(View.GONE);
isVisible = false;
}
复制代码3.3円形の表示アニメーションを使用してビューを表示する
円形のリビールアニメーションを使用してビューを表示し、最初にビューの中心点を基準にしたビューのX座標とY座標を計算し、次に円の半径を計算してから、この時点で開始半径である円形のリビールアニメーションを作成します。は0f、終了半径は円の半径です。imageView.setVisibility（View.VISIBLE）を呼び出し、最後にアニメーションを開始します。例は次のとおりです。
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
int width = imageView.getWidth();
int height = imageView.getHeight();
int ivXCenter = width/2;
int ivYCenter = height/2;
float circleRadius = (float) Math.hypot(ivXCenter, ivYCenter);
Animator circularReveal = ViewAnimationUtils.createCircularReveal(imageView, ivXCenter, ivYCenter, 0f, circleRadius);
imageView.setVisibility(View.VISIBLE);
isVisible = true;
circularReveal.start();
}else {
imageView.setVisibility(View.VISIBLE);
isVisible = true;
}
复制代码4.まとめ
使用圆形揭露动画隐藏或显示View，主要是计算出View相对于自身的中心点的X坐标和Y坐标，并计算出圆形半径，在调用ViewAnimationUtils.createCircularReveal()方法创建的时候要注意起始半径和结束半径的填写，隐藏View的时候在动画执行完毕后setVisibility()方法隐藏，显示View的时候，在动画启动前调用setVisibility()方法显示。