Android 图片Loading旋转动画效果

佴德曜
2023-12-01

使用场景:在数据请求或者一些加载的页面中,总需要一些过度的动画效果,很多时候我们都可以在图片中间加一个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,可以去好好学习一下!

Android位图总结_weixin_34055910的博客-CSDN博客

Android开发中Bitmap的全面总结_徐福记456的博客-CSDN博客_android开发bitmap

 类似资料: