美文网首页
帧动画-loading进度条

帧动画-loading进度条

作者: Method | 来源:发表于2021-05-27 23:33 被阅读0次

    帧动画

    帧动画是最容易实现的一种动画,这种动画更多的依赖于完善的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地址

    相关文章

      网友评论

          本文标题:帧动画-loading进度条

          本文链接:https://www.haomeiwen.com/subject/padjsltx.html