帧动画-loading进度条

2021-05-27  本文已影响0人  Method

帧动画

帧动画是最容易实现的一种动画,这种动画更多的依赖于完善的UI资源,他的原理就是将一张张单独的图片连贯的进行播放,从而在视觉上产生一种动画的效果;有点类似于某些软件制作gif动画的方式。

loading.gif

如上图中的加载动画,代码要做的事情就是把一幅幅的图片按顺序显示,造成动画的视觉效果。

自定义dialog类

class LoadingDialog(context: Context, themeResId: Int) : Dialog(context, themeResId) {

    companion object {
        private lateinit var loadingDialog: LoadingDialog
        private lateinit var animationDrawable: AnimationDrawable
        fun create(context: Context): LoadingDialog {
            loadingDialog = LoadingDialog(context, R.style.LightProgressDialog)
            loadingDialog.apply {
                setContentView(R.layout.view_loading)           //自定义布局
                setCanceledOnTouchOutside(true)
                setCancelable(true)
            }

            val attributes = loadingDialog.window?.attributes
            attributes?.gravity = Gravity.CENTER     //window 位置
            attributes?.dimAmount = 0.4f            //背景透明度
            loadingDialog.window?.attributes = attributes
            val mAnimationIv = loadingDialog.findViewById<ImageView>(mAnimationIv)
            animationDrawable = mAnimationIv.background as AnimationDrawable
            return loadingDialog
        }
    }

    override fun show() {
        super.show()
        animationDrawable.start()
    }

    override fun dismiss() {
        super.dismiss()
        animationDrawable.stop()
    }

}

style

 <!-- 加载弹框样式 -->
    <style name="LightDialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item >
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
        <item name="android:windowSoftInputMode">stateUnspecified|adjustPan
        </item>
    </style>
    <style name="LightProgressDialog" parent="@style/LightDialog">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowNoTitle">true</item>
    </style>

自定义布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/progress_dialog_bg"
    android:gravity="center_horizontal"
    android:padding="40dp">

    <ImageView
        android:id="@+id/mAnimationIv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/progress_dialog_anim" />

</LinearLayout>

progress_dialog_bg

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#7f000000" />

    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />

</shape>


progress_dialog_anim

<?xml version="1.0" encoding="utf-8"?>
<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false"><!--false 执行一次  true执行多次-->
    <item android:drawable="@drawable/light_progress_loading1" android:duration="200"/>
    <item android:drawable="@drawable/light_progress_loading2" android:duration="200"/>
    <item android:drawable="@drawable/light_progress_loading3" android:duration="200"/>
    <item android:drawable="@drawable/light_progress_loading4" android:duration="200"/>
    <item android:drawable="@drawable/light_progress_loading5" android:duration="200"/>
    <item android:drawable="@drawable/light_progress_loading6" android:duration="200"/>
    <item android:drawable="@drawable/light_progress_loading7" android:duration="200"/>
    <item android:drawable="@drawable/light_progress_loading8" android:duration="200"/>
    <item android:drawable="@drawable/light_progress_loading9" android:duration="200"/>
    <item android:drawable="@drawable/light_progress_loading10" android:duration="200"/>
    <item android:drawable="@drawable/light_progress_loading11" android:duration="200"/>
</animation-list>


使用

 LoadingDialog.create(this).show()

github地址

上一篇 下一篇

猜你喜欢

热点阅读