UI-Animation动画

Posted on | In

动画xml（res/anim文件夹下）

顶部进

anim_top_in.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromYDelta="-100%p"
        android:toYDelta="0"/>
</set>

顶部出

anim_top_out.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromYDelta="0"
        android:toYDelta="-100%p"/>
</set>

底部进

anim_bottom_in.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromYDelta="100%p"
        android:toYDelta="0"/>
</set>

底部出

anim_bottom_out.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromYDelta="0"
        android:toYDelta="100%p"/>
</set>

iOS动画进

anim_ios_in.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="300"
        android:fromXScale="1.1"
        android:fromYScale="1.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0"/>
    <alpha
        android:duration="300"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>

iOS动画出

anim_ios_out.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="300"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.1"
        android:toYScale="1.1"/>
    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>

左侧进

anim_left_in.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--100%p表示父层View的100%,是以它父层View为参照的。
    表示自身的100%,也就是从View自己的位置开始。-->
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromXDelta="-100%p"
        android:toXDelta="0%"/>
    <!-- 0.0表示完全不透明 1.0表示完全透明-->
    <alpha
        android:duration="@android:integer/config_shortAnimTime"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>

左侧出

anim_left_out.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--100%p表示父层View的100%,是以它父层View为参照的。
    表示自身的100%,也就是从View自己的位置开始。-->
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromXDelta="0%p"
        android:toXDelta="-100%"/>
    <!-- 0.0表示完全不透明 1.0表示完全透明-->
    <alpha
        android:duration="@android:integer/config_shortAnimTime"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>

右侧进

anim_right_in.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--100%p表示父层View的100%,是以它父层View为参照的。
    表示自身的100%,也就是从View自己的位置开始。-->
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromXDelta="100%p"
        android:toXDelta="0%"/>
    <!-- 0.0表示完全不透明 1.0表示完全透明-->
    <alpha
        android:duration="@android:integer/config_shortAnimTime"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>

右侧出

anim_right_out.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--100%p表示父层View的100%,是以它父层View为参照的。
    表示自身的100%,也就是从View自己的位置开始。-->
    <translate
        android:duration="@android:integer/config_shortAnimTime"
        android:fromXDelta="0%p"
        android:toXDelta="100%"/>
    <!-- 0.0表示完全不透明 1.0表示完全透明-->
    <alpha
        android:duration="@android:integer/config_shortAnimTime"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>

缩放进

anim_scale_in.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <scale
        android:duration="135"
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.05"
        android:toYScale="1.05"/>
    <scale
        android:duration="105"
        android:fromXScale="1.05"
        android:fromYScale="1.05"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="135"
        android:toXScale="0.95"
        android:toYScale="0.95"/>
    <scale
        android:duration="60"
        android:fromXScale="0.95"
        android:fromYScale="0.95"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="240"
        android:toXScale="1.0"
        android:toYScale="1.0"/>

    <alpha
        android:duration="90"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0"/>
</set>

缩放出

anim_scale_out.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="150"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.6"
        android:toYScale="0.6"/>

    <alpha
        android:duration="150"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0"/>
</set>

使用动画

styles.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!-- 缩放动画 -->
<style name="DialogScaleAnim" parent="android:Animation">
    <item name="android:windowEnterAnimation">@anim/anim_scale_in</item>
    <item name="android:windowExitAnimation">@anim/anim_scale_out</item>
</style>

<!-- ios 动画 -->
<style name="DialogIOSAnim" parent="android:Animation">
    <item name="android:windowEnterAnimation">@anim/anim_ios_in</item>
    <item name="android:windowExitAnimation">@anim/anim_ios_out</item>
</style>

<!-- 顶部弹出动画 -->
<style name="DialogTopAnim" parent="android:Animation">
    <item name="android:windowEnterAnimation">@anim/anim_top_in</item>
    <item name="android:windowExitAnimation">@anim/anim_top_out</item>
</style>

<!-- 底部弹出动画 -->
<style name="DialogBottomAnim" parent="android:Animation">
    <item name="android:windowEnterAnimation">@anim/anim_bottom_in</item>
    <item name="android:windowExitAnimation">@anim/anim_bottom_out</item>
</style>

<!-- 左边弹出动画 -->
<style name="DialogLeftAnim" parent="android:Animation">
    <item name="android:windowEnterAnimation">@anim/anim_left_in</item>
    <item name="android:windowExitAnimation">@anim/anim_left_out</item>
</style>

<!-- 右边弹出动画 -->
<style name="DialogRightAnim" parent="android:Animation">
    <item name="android:windowEnterAnimation">@anim/anim_right_in</item>
    <item name="android:windowExitAnimation">@anim/anim_right_out</item>
</style>

<!-- 弹窗的style -->
<style name="MyDialogStyle">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowFrame">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
    <item name="android:backgroundDimEnabled">true</item>
</style>

<!-- 弹窗的style -->
<style name="BaseDialogStyle" parent="MyDialogStyle">
    <item name="android:windowAnimationStyle">@style/DialogBottomAnim</item>
</style>

Dialog中使用

1
2
3
4
5
6
7
8
9
10
import android.app.Activity;
import android.app.Dialog;

public abstract class BaseDialog extends Dialog {
    public BaseDialog(final Activity context) {
        //此处使用了上述的Style
        super(context, R.style.BaseDialogStyle);
        //...
    }
}

Activity中使用

1
2
3
4
5
6
7
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.overridePendingTransition(R.anim.anim_right_in,
                                   R.anim.anim_left_out);
    /
}

旋转工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
package com.ab.myykframe.util;


import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;

public class RotateUtils {

    /**
     * 使用 ObjectAnimator 让控件顺时针持续旋转
     *
     * @param view     要旋转的控件
     * @param duration 动画的持续时间，单位为毫秒
     */
    public static void rotateWithObjectAnimator(View view, long duration) {
        // 创建 ObjectAnimator 对象
        ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(view, "rotation", 0f, 360f);
        // 设置动画时间为 duration 毫秒
        rotateAnimator.setDuration(duration);
        // 设置重复次数为无限
        rotateAnimator.setRepeatCount(ObjectAnimator.INFINITE);
        // 在动画结束时重新开始动画
        rotateAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                animation.start();
            }
        });
        //线性变化（每次旋转一圈后重新开始的时候不停顿）
        rotateAnimator.setInterpolator(new LinearInterpolator());
        // 开始动画
        rotateAnimator.start();
    }

    /**
     * 使用 RotateAnimation 让控件顺时针持续旋转
     *
     * @param view     要旋转的控件
     * @param duration 动画的持续时间，单位为毫秒
     */
    public static void rotateWithRotateAnimation(View view, long duration) {
        // 创建 RotateAnimation 对象
        RotateAnimation rotateAnimation = new RotateAnimation(0f, 360f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

        // 设置动画时间为 duration 毫秒
        rotateAnimation.setDuration(duration);
        // 设置重复次数为无限
        rotateAnimation.setRepeatCount(Animation.INFINITE);
        // 在动画结束时重新开始动画
        rotateAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                view.startAnimation(animation);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }
        });
        //线性变化（每次旋转一圈后重新开始的时候不停顿）
        rotateAnimation.setInterpolator(new LinearInterpolator());
        // 将动画设置到控件上
        view.startAnimation(rotateAnimation);
    }
}

上面的“在动画结束时重新开始动画”貌似可以去掉，不影响

调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
private void rotate(boolean isRotateEnabled) {
    View view = mEmptyView.getEmptyViewIcon();
    if (view != null) {
        if (mEmptyView.getVisibility() == View.VISIBLE) {
            if (mEmptyView.getEmptyType() == EmptyType.SCANNING_DEVICE) {
                if (isRotateEnabled) {
                    RotateUtils.rotateWithRotateAnimation(view, 2000);
                } else {
                    view.clearAnimation();
                }
            } else {
                view.clearAnimation();
            }
        } else {
            view.clearAnimation();
        }
    }
}