一.什么是揭露动画?
Circulal Reveal(揭露动画): 官方将这一动画称为揭露效果,它在官网中的描述是这样的:
当您显示或隐藏一组 UI 元素时,揭露动画可为用户提供视觉连续性。[ViewAnimationUtils.createCircularReveal()](https://developer.android.com/reference/android/view/ViewAnimationUtils.html?hl=zh-cn#createCircularReveal(android.view.View, int, int, float, float))
方法让您能够为裁剪区域添加动画以揭露或隐藏视图。
二、使用场景:
1.从一个活动过渡到另一个活动时,对活动布局内容进行动画处理.
2.在活动之间的过渡中对共享元素进行动画处理.
3.对同一活动内的实体更改进行动画处理.
三、揭露动画怎么用?
官网有一个工具类ViewCenterUtils,本文改成kotlin版本了,毕竟现在google推荐使用kotlin,具体代码如下:
/**
* @author: njb
* @date: 2020/2/23 0023 20:48
* @desc: 揭露动画工具类
*/
object ViewCenterUtils {
private var mX = 0
private var mY = 0
//得到视图中心
@JvmStatic
fun getViewCenter(view: View): IntArray {
val top = view.top
val left = view.left
val bottom = view.bottom
val right = view.right
val x1 = (right - left) / 2
val y1 = (bottom - top) / 2
val location = IntArray(2)
view.getLocationOnScreen(location)
val x2 = location[0]
val y2 = location[1]
val x = x2 + x1
return intArrayOf(x, y2)
}
//设置开始动画
@JvmStatic
fun setActivityStartAnim(activity: Activity, view: View?, intent: Intent) {
view!!.post {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
mX = intent.getIntExtra("x", 0)
mY = intent.getIntExtra("y", 0)
//对控件View进行判空,防止后台时间过长activity被回收后启动
val animator = createRevealAnimator(activity, view, false, mX, mY)
animator.start()
}
}
}
/**
* 此方法让您能够为裁剪区域添加动画以揭露或隐藏视图
* 参数主要是涉及到了动画开始的x,y坐标,以及圆形揭露的半径变化startRadius->endRadius。
*/
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
private fun createRevealAnimator(activity: Activity, view: View, reversed: Boolean, x: Int, y: Int): Animator {
var a = x
var b = y
val measuredHeight = view.measuredHeight
val screenWidth = activity.windowManager.defaultDisplay.width
val screenHeight = activity.windowManager.defaultDisplay.height
if (screenWidth - x > x) {
a = screenWidth - x
}
if (screenHeight - y > y) {
b = screenHeight - y
}
val hypot = Math.hypot(a.toDouble(), b.toDouble()).toFloat()
val startRadius: Float = if (reversed) hypot else 0F
val endRadius: Float = if (reversed) 0F else hypot
val animator = ViewAnimationUtils.createCircularReveal(view, x, y, startRadius, endRadius)
animator.duration = 800
animator.interpolator = AccelerateDecelerateInterpolator()
if (reversed) {
animator.addListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {}
override fun onAnimationEnd(animation: Animator) {
view.visibility = View.INVISIBLE
activity.finish()
}
override fun onAnimationCancel(animation: Animator) {}
override fun onAnimationRepeat(animation: Animator) {}
})
}
return animator
}
}
四、简单使用:
public class MainActivity extends AppCompatActivity {
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
//getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, RvFrag.newInstance()).commitAllowingStateLoss();
}
private void initView() {
imageView = findViewById(R.id.tv_go);
//点击跳转到下一个页面
imageView.setOnClickListener(v -> {
int[] viewCenter = ViewCenterUtils.getViewCenter(imageView);
Intent intent = new Intent(MainActivity.this, SecondActivity.class);
intent.putExtra("x", viewCenter[0]);
intent.putExtra("y", viewCenter[1]);
startActivity(intent);
});
}
}
activity_main:布局代码
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity"
android:background="@color/white"
android:orientation="vertical"
android:gravity="center">
<FrameLayout
android:id="@+id/fl_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="@+id/tv_go"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/b1"
app:layout_constraintTop_toBottomOf="@+id/fl_container"/>
</LinearLayout>
五、第二个页面
/**
* @author: njb
* @date: 2020/2/23 0023 20:50
* @desc:
*/
public class SecondActivity extends AppCompatActivity {
private LinearLayout constraintLayout;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
initView();
}
private void initView() {
constraintLayout = findViewById(R.id.cl_input);
if (getIntent() != null && getIntent().getExtras() != null) {
ViewCenterUtils.setActivityStartAnim(this, constraintLayout, getIntent());
}
}
}
activity_second布局代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/cl_input"
android:background="@mipmap/b1">
</LinearLayout>
最后完成的效果图如下:
以上就是揭露动画的简单使用,后面会加上点击返回按钮也有动画效果,欢迎大家讨论,如有问题,及时指正.