Android 图片Loading旋转动画效果

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

Android 图片Loading旋转动画效果

猜你喜欢