Android原生实现控件点击弹起效果方案（API28及以上）

之前在实现控件阴影时有提到过，阴影效果的实现采用的是Android原生的View的属性，拔高Z轴。Z轴会让View产生阴影的效果。

Z=elevation+ translationZ
拔高Z轴可以通过控制elevation和translationZ。
我们之前是通过elevation来单纯的控制Z轴；而translateZ，除了控制Z轴，还可以用来控制动画效果，比如我们点击按钮时希望它有一个弹起的效果，就是借助这个属性来实现。

StateAnimatorView接口

创建一个通用接口：

public interface StateAnimatorView {
    void setStateAnimator(StateAnimator stateAnimator);
    StateAnimator getStateAnimator();
}
1
2
3
4

实现接口

ShapeButton 实现 StateAnimatorView接口：

    // -------------------------------
    // stateAnimator
    // -------------------------------

    private StateAnimator stateAnimator = new StateAnimator(this);
    @Override
    public void setStateAnimator(StateAnimator stateAnimator) {
        this.stateAnimator = stateAnimator;
    }

    @Override
    public StateAnimator getStateAnimator() {
        return stateAnimator;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

StateAnimator

StateAnimator是一个管理View状态和相关Animator的类：

public class StateAnimator {
    private final ArrayList mTuples = new ArrayList<>();

    private Tuple lastMatch = null;
    private Animator runningAnimation = null;
    private WeakReference viewRef;

    public StateAnimator(View target) {
        setTarget(target);
    }

    private Animator.AnimatorListener mAnimationListener = new Animator.AnimatorListener() {

        @Override
        public void onAnimationStart(Animator animation) {

        }

        @Override
        public void onAnimationEnd(Animator animation) {
            if (runningAnimation == animation) {
                runningAnimation = null;
            }
        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }

    };

    /**
     * Associates the given Animation with the provided drawable state specs so that it will be run
     * when the View's drawable state matches the specs.
     *
     * @param specs     drawable state specs to match against
     * @param animation The Animation to run when the specs match
     */
    public void addState(int[] specs, Animator animation, Animator.AnimatorListener listener) {
        Tuple tuple = new Tuple(specs, animation, listener);
        animation.addListener(mAnimationListener);
        mTuples.add(tuple);
    }

    /**
     * Returns the current {@link Animation} which is started because of a state change.
     *
     * @return The currently running Animation or null if no Animation is running
     */
    Animator getRunningAnimation() {
        return runningAnimation;
    }


    View getTarget() {
        return viewRef == null ? null : viewRef.get();
    }

    void setTarget(View view) {
        final View current = getTarget();
        if (current == view) {
            return;
        }
        if (current != null) {
            clearTarget();
        }
        if (view != null) {
            viewRef = new WeakReference<>(view);
        }
    }

    private void clearTarget() {
        viewRef = null;
        lastMatch = null;
        runningAnimation = null;
    }

    /**
     * Called by View
     */
    public void setState(int[] state) {
        Tuple match = null;
        final int count = mTuples.size();
        for (int i = 0; i < count; i++) {
            final Tuple tuple = mTuples.get(i);
            if (StateSet.stateSetMatches(tuple.mSpecs, state)) {
                match = tuple;
                break;
            }
        }
        if (match == lastMatch) {
            return;
        }
        if (lastMatch != null) {
            cancel();
        }

        lastMatch = match;

        View view = (View) viewRef.get();
        if (match != null && view != null && view.getVisibility() == View.VISIBLE) {
            start(match);
        }
    }

    private void start(Tuple match) {
        match.getListener().onAnimationStart(match.animation);
        runningAnimation = match.animation;

        runningAnimation.start();
    }

    private void cancel() {
        if (runningAnimation != null && runningAnimation.isRunning()) {
            runningAnimation.cancel();
            runningAnimation = null;
        }
    }

    /**
     * @hide
     */
    ArrayList getTuples() {
        return mTuples;
    }

    static class Tuple {
        final int[] mSpecs;
        final Animator animation;
        private Animator.AnimatorListener listener;

        private Tuple(int[] specs, Animator Animation, Animator.AnimatorListener listener) {
            mSpecs = specs;
            animation = Animation;
            this.listener = listener;
        }

        int[] getSpecs() {
            return mSpecs;
        }

        Animator getAnimation() {
            return animation;
        }

        public Animator.AnimatorListener getListener() {
            return listener;
        }
    }

}

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

在初始化阴影属性的地方，初始化StateAnimation:

public static void initElevation(ShadowView view, TypedArray a, int[] ids) {
        int carbon_elevation = ids[0];
        int carbon_shadowColor = ids[1];
        int carbon_ambientShadowColor = ids[2];
        int carbon_spotShadowColor = ids[3];

        float elevation = a.getDimension(carbon_elevation, 0);
        view.setElevation(elevation);
        // 初始化StateAnimation
        if (elevation > 0)
            AnimUtils.setupElevationAnimator(((StateAnimatorView) view).getStateAnimator(), view);
        ColorStateList shadowColor = a.getColorStateList(carbon_shadowColor);
        view.setElevationShadowColor(shadowColor != null ? shadowColor.withAlpha(255) : null);
        if (a.hasValue(carbon_ambientShadowColor)) {
            ColorStateList ambientShadowColor = a.getColorStateList(carbon_ambientShadowColor);
            view.setOutlineAmbientShadowColor(ambientShadowColor != null ? ambientShadowColor.withAlpha(255) : null);
        }
        if (a.hasValue(carbon_spotShadowColor)) {
            ColorStateList spotShadowColor = a.getColorStateList(carbon_spotShadowColor);
            view.setOutlineSpotShadowColor(spotShadowColor != null ? spotShadowColor.withAlpha(255) : null);
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

按下按钮和松开按钮的状态和动画是一一对应的：

    public static void setupElevationAnimator(StateAnimator stateAnimator, final ShadowView view) {
        // 按下时的状态和动画
        {
            final ValueAnimator animator = ValueAnimator.ofFloat(0, 0);
            animator.setDuration(SHORT_ANIMATION_DURATION);
            animator.setInterpolator(new FastOutSlowInInterpolator());
            Animator.AnimatorListener animatorListener = new AnimatorListenerAdapter() {
                @Override
                public void onAnimationStart(Animator animation) {
                    float elevationOrTranslationZ = getElevationOrTranslationZ(view);
                    animator.setFloatValues(0, elevationOrTranslationZ);
                }
            };
            animator.addUpdateListener(animation -> view.setTranslationZ((Float) animation.getAnimatedValue()));
            stateAnimator.addState(new int[]{android.R.attr.state_pressed, android.R.attr.state_enabled}, animator, animatorListener);
        }
        // 松开时的状态和动画
        {
            final ValueAnimator animator = ValueAnimator.ofFloat(0, 0);
            animator.setDuration(SHORT_ANIMATION_DURATION);
            animator.setInterpolator(new FastOutSlowInInterpolator());
            Animator.AnimatorListener animatorListener = new AnimatorListenerAdapter() {
                @Override
                public void onAnimationStart(Animator animation) {
                    float elevationOrTranslationZ = getElevationOrTranslationZ(view);
                    animator.setFloatValues(elevationOrTranslationZ, 0);
                }
            };
            animator.addUpdateListener(animation -> view.setTranslationZ((Float) animation.getAnimatedValue()));
            stateAnimator.addState(new int[]{-android.R.attr.state_pressed, android.R.attr.state_enabled}, animator, animatorListener);
        }
        // 松开时的状态和动画
        {
            final ValueAnimator animator = ValueAnimator.ofFloat(0, 0);
            animator.setDuration(SHORT_ANIMATION_DURATION);
            animator.setInterpolator(new FastOutSlowInInterpolator());
            Animator.AnimatorListener animatorListener = new AnimatorListenerAdapter() {
                @Override
                public void onAnimationStart(Animator animation) {
                    animator.setFloatValues(view.getElevation(), 0);
                }
            };
            animator.addUpdateListener(animation -> view.setTranslationZ((Float) animation.getAnimatedValue()));
            stateAnimator.addState(new int[]{android.R.attr.state_enabled}, animator, animatorListener);
        }

    }
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

开始动画

在按下或松开按钮时，会回调按钮的drawableStateChanged():

    @Override
    protected void drawableStateChanged() {
        super.drawableStateChanged();
        if (rippleDrawable != null && rippleDrawable.getStyle() != RippleDrawable.Style.Background)
            rippleDrawable.setState(getDrawableState());

        if (stateAnimator != null)
        // 这个方法会执行与状态相对应的动画
            stateAnimator.setState(getDrawableState());
    }
1
2
3
4
5
6
7
8
9
10

完整代码可查看：
ShapeButton部分