Android动画----Scale,从屏幕底部弹出的高仿支付宝弹出框动画效果

程序员文章站 2022-05-31 15:58:49

...

　　要做一款让用户喜欢的APP，适当的动画元素是必不可少的，因此接下来的要学习和记录一系列Android动画相关的知识，梳理一下一些比较含糊的知识点。
Scale动画
　　
　　Scale是Android的尺寸缩放动画，继承自基类Animation
　　
Scale的属性

　　直接参照代码中的注释(ps：方便说明，直接使用#作为注释符）

<?xml version="1.0" encoding="utf-8"?>  
<scale xmlns:android="http://schemas.android.com/apk/res/android"  
    android:fromXScale="0.0"           #起始x尺寸比例  
    android:toXScale="1.4"             #最终x尺寸比例
    android:fromYScale="0.0"           #起始y尺寸比例
    android:toYScale="1.4"             #最终y尺寸比例
    android:pivotX="50%"               #缩放起点x轴坐标，取值可以是数值（50）、百分数（50%）、百
                                        分数p（50%p），当取值为数值时，缩放起点为View左上角坐标
                                        加具体数值像素，当取值为百分数时，表示在当前View左上角坐
                                        加上View宽度的具体百分比，当取值为百分数p时，表示在View
                                        左上角坐标加上父控件宽度的具体百分比
    android:pivotY="50%"               #同上
    android:duration="700"             #动画持续时间，毫秒为单位
    android:fillAfter="true"           #动画结束后，保持结束时的状态
    android:fillBefore="true"          #动画结束后，恢复为初始状态
    android:fillEnabled="true"         #效果同上
    android:repeatCount="5"            #重复次数,取值为-1时无限重复，默认动画执行一次
    android:repeatMode ="reverse"      #重复模式，有reverse和restart两个值，前者为倒序回放，后者为重新开始
    android::interpolator="@android:anim/accelerate_decelerate_interpolator" #插值器，后面单独讲             
    />

Scale xml使用方式
　　
　　xml的使用方式是比较普遍的，我们举例说明这种使用方式。
　　第一步，在res目录下新建anim文件夹，然后在anim文件夹中新建scale.xml文件（名称随意），目录结构如下图所示：
　　
　　第二步，根据需求，编写xml的内容，举例如下：

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0"
    android:toXScale="1.4"
    android:fromYScale="0.0"
    android:toYScale="1.4"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1000"
    android:repeatCount="4"
    android:repeatMode="reverse"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    />

　　第三步，代码中实例化Scale动画，具体代码如下：
　　

private Animation scaleAnimation;
……
scaleAnimation = AnimationUtils.loadAnimation(AnimDemoActivity.this,R.anim.scale);

　　第四部，执行动画，具体代码如下：
　　

view.startAnimation(scaleAnimation);

Scale 代码使用方式

　　第一步，创建Scale动画实例

private ScaleAnimation mScaleAnimation;
……
mScaleAnimation = new ScaleAnimation(0,1,0,1);

　　第二步，设置相关属性
　　

mScaleAnimation.setDuration(2000);
mScaleAnimation.setRepeatCount(4);
mScaleAnimation.setRepeatMode(Animation.REVERSE);

　　第三步，执行动画
　　

view.startAnimation(mScaleAnimation);

dialog_enter_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 弹出时动画 -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.0"
        android:fromYScale="0.0"
        android:toYScale="1.0"
        android:pivotX="0%"
        android:pivotY="100%"
        android:fillAfter="false"
        android:duration="400"/>
</set>

dialog_exit_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 退出时动画效果 -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.0"
        android:fromYScale="1.0"
        android:toYScale="0.0"
        android:pivotX="0%"
        android:pivotY="100%"
        android:fillAfter="false"
        android:duration="400"/>
</set>

引用的地方:

    LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity());
        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
//        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);//水平
        // 初始化自定义的适配器
        // 下面是两种方法得到宽度和高度 getWindow().getDecorView().getWidth()
        DisplayMetrics dm = getResources().getDisplayMetrics();
        int displayWidth = dm.widthPixels;
        int displayHeight = dm.heightPixels;

        final PopupWindow window = new PopupWindow(outerView,
                WindowManager.LayoutParams.MATCH_PARENT,
                WindowManager.LayoutParams.WRAP_CONTENT);//高度写死

        // 设置popWindow弹出窗体可点击，这句话必须添加，并且是true
        window.setFocusable(true);
        // 实例化一个ColorDrawable颜色为半透明
        ColorDrawable dw = new ColorDrawable(0xb0000000);
        window.setBackgroundDrawable(dw);
        // 设置背景颜色变暗
        WindowManager.LayoutParams lp = getActivity().getWindow().getAttributes();
        lp.alpha = 0.7f;
        getActivity().getWindow().setAttributes(lp);
        // 设置popWindow的显示和消失动画
        window.setAnimationStyle(R.style.progress_dialog);
        // 在底部显示
        window.showAtLocation(to_pay_btn,
                Gravity.BOTTOM, 0, 0);
//        window.showAsDropDown(tousu_select);
        //popWindow消失监听方法
        window.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                System.out.println("popWindow消失");
                WindowManager.LayoutParams lp = getActivity().getWindow().getAttributes();
                lp.alpha = 1f;
                getActivity().getWindow().setAttributes(lp);
            }
        });

style.xml

<style name="progress_dialog" parent="@android:style/Theme.Dialog">
    <item name="android:windowEnterAnimation">@anim/dialog_enter_anim</item>
    <item name="android:windowExitAnimation">@anim/dialog_exit_anim</item>
    <item name="android:windowFrame">@null</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:background">@null</item>
    <item name="android:windowBackground">@null</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>

上一篇： Android基础之FrameLayout的再认识——模拟PopupWindow弹出框效果

下一篇： Android Studio弹出警告Emulator: RNING: System.cpp:1143: Ignoring invalid parameter detected in function:

Android动画----Scale,从屏幕底部弹出的高仿支付宝弹出框动画效果

Android动画----Scale,从屏幕底部弹出的高仿支付宝弹出框动画效果

Android自定义View之popupwindow进阶封装：高仿ios “item动画弹出”效果的popupwindow。