使用场景:在数据请求或者一些加载的页面中,总需要一些过度的动画效果,很多时候我们都可以在图片中间加一个loading的旋转图片,以前也做过,今天做的时候噼里啪啦敲了半天结果运行没效果,所以今天总结下这个啷个做的。
例子:我们要加载一个webView,需要在加载前的空白页面中间加一个旋转的loading图片,结束后就消失。
布局xml:就是一个全屏的webView+居中的loading图片
第一个方法:使用Android自带的 AnimationUtils.loadAnimation
代码:
anim文件下的动画xml:
<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0"//旋转的起始角度 android:toDegrees="359"//旋转的终点角度 android:pivotX="50%"//旋转的X中心,50%就是中间 android:pivotY="50%"//旋转的y中心,50%就是中间 android:duration="1000"//每次动画执行的时间,越小转的越快 android:repeatCount="-1"//执行次数,-1就是无限次 /> url = "www.baidu.com" url?.let { webView.loadUrl(it) } context?.let { val a = AnimationUtils.loadAnimation(it, R.anim.blv_loading_white_policy) a.interpolator = LinearInterpolator()//匀速执行 webViewLoading.startAnimation(a)//view.startAnimation 执行动画 } webView.onLoading = { _, isFinish ->//只是个回调面,进度达到100%就结束动画,图片隐藏 if (isFinish) { webViewLoading.clearAnimation() webViewLoading.visibility = View.GONE } }
关键属性:
1.interpolator:俗称插值器,负责控制动画变化的速率,使得基本的动画能够以匀速、加速、减速、抛物线等等各种变化。
AccelerateDecelerateInterpolator,效果是开始和结束的速率比较慢,中间加速;
AccelerateInterpolator,效果是开始速率比较慢,后面加速;
DecelerateInterpolator,效果是开始速率比较快,后面减速;
LinearInterpolator,效果是速率是恒定的;
AnticipateInterpolator,效果是开始向后甩,然后向前;
AnticipateOvershootInterpolator,效果是开始向后甩,冲到目标值,最后又回到最终值;
OvershootInterpolator,效果开始向前甩,冲到目标值,最后又回到了最终值;
BounceInterpolator,效果是在结束时反弹;
CycleInterpolator,效果是循环播放,速率是正弦曲线;
TimeInterpolator,一个接口,可以自定义插值器。
2.clearAnimation(),一定记得要调用,不然会使得webViewLoading.visibility = View.GONE这句话无效,他还是会展示
3.animation.setFillAfter(true);//动画终止时停留在最后一帧,如果设置为false,则会回到最开始的位置,有些场景会很不好看,例如网易云播放时的旋转图片。
第二个方法:使用RotateAnimation
代码:这儿的webViewLoading为一个ImageView,这儿就不需要给一个anim文件了,直接在xml里配置了src属性,就是一张普通的图片。
override fun initView() { url = UTownRepo.userPrivatePolicyHtmlUrl url?.let { webView.loadUrl(it) } initAndStartAnim() webView.onLoading = { progress, isFinish -> if (isFinish) { stopAnim() } } } override fun onDestroyView() { webView.destroy() super.onDestroyView() } private fun initAndStartAnim() { // 创建旋转动画 animation = RotateAnimation( 0f, 360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f ) animation!!.duration = 1000 // 动画的重复次数 animation!!.repeatCount = Animation.INFINITE // 设置为true,动画转化结束后被应用 animation!!.fillAfter = true animation!!.interpolator = LinearInterpolator() // 开始动画 webViewLoading.startAnimation(animation) } private fun stopAnim() { if (animation != null) { animation?.cancel() } animation = null webViewLoading.clearAnimation() webViewLoading.visibility = View.GONE }
eg:animation只是操作View 的位图表示(bitmap representation),而不是真正的改变View的位置,位图就是bitmap,关于bitmap,可以去好好学习一下!