Android image loading rotation animation effect

Usage scenario: In data requests or some loaded pages, some excessive animation effects are always needed. Many times we can add a loading rotating picture in the middle of the picture. The operation has no effect, so I will summarize what I did today.

Example: We want to load a webView, we need to add a rotating loading picture in the middle of the blank page before loading, and it will disappear after the end.

Layout xml: it is a full-screen webView+centered loading picture

The first method: use Android's own AnimationUtils.loadAnimation

code:

Animation xml under the anim file:

<?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
            }
        }

Key attributes:

1. Interpolator: Commonly known as an interpolator, it is responsible for controlling the rate of animation change, so that the basic animation can change at a constant speed, acceleration, deceleration, parabola, etc.

• AccelerateDecelerateInterpolator, the effect is that the speed of the start and end is relatively slow, and the speed is accelerated in the middle;
• AccelerateInterpolator, the effect is that the starting speed is relatively slow, and then accelerates;
• DecelerateInterpolator, the effect is that the starting speed is relatively fast, and then slows down;
• LinearInterpolator, the effect is that the rate is constant;
• AnticipateInterpolator, the effect is to start throwing backwards and then forwards;
• AnticipateOvershootInterpolator, the effect is to start to throw back, rush to the target value, and finally return to the final value;
• OvershootInterpolator, the effect starts to swing forward, rushes to the target value, and finally returns to the final value;
• BounceInterpolator, the effect is to bounce at the end;
• CycleInterpolator, the effect is to play in a loop, and the rate is a sinusoidal curve;
• TimeInterpolator, an interface to customize the interpolator.

2.clearAnimation(), you must remember to call it, otherwise it will make the sentence webViewLoading.visibility = View.GONE invalid, and it will still display

3.animation.setFillAfter(true);//Stay at the last frame when the animation terminates. If it is set to false, it will return to the initial position. Some scenes will be very ugly, such as the rotating picture when Netease Cloud plays.

The second method: use RotateAnimation

Code: The webViewLoading here is an ImageView, there is no need to give an anim file here, and the src attribute is directly configured in the xml, which is an ordinary picture.

  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 just manipulates the bitmap representation of the View, rather than actually changing the position of the View. A bitmap is a bitmap. About bitmap, you can learn about it!

Android bitmap summary - Weixin_34055910's Blog - CSDN Blog

A comprehensive summary of Bitmap in Android development