Android View部分消失效果实现

本文来自网易云社区

作者：孙有军

老需求

我们经常会有需求就是View消失的效果，这里我们说的消失往往是全部消失，我们可能采用一个alpha动画，在指定的时间内消失掉View，出现则实现相反的动画。我们一般都采用如下的实现：

采用tween动画实现：

private void alphaTween() {
    AlphaAnimation alpha = new AlphaAnimation(1.0f, 0.0f);
    alpha.setDuration(300);
    imageView.startAnimation(alpha);
}

或者采用属性动画实现：

private void alphaOB() {
    ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "alpha", 1.0f, 0.0f).setDuration(300);
    animator.start();
}

也可能采用xml来实现。

新需求

但是这里我们需要的不是上面的效果，你是在逗我？？不是上面的效果，你说这么多。我们需求如下，这里我们用两个图来展示：

左边是原始图片，右边是处理后的图片。可以看到从下到上越来越淡，顶部就已经像消失了一样。说道这里很多人肯定会联想到图片的滤镜效果。但是这里实现的方式简单的多。

实现

这里我们写一个demo来实现这个效果。既然是在对View进行处理，那这里我们就先对一张图片进行处理。之后在扩展。

既然我们需要将图片变淡消失，肯定是需要合成了什么效果。那Android里面一般合成我们都采用什么方式呐？

Xfermode

Android里面我们可以采用Xfermode来实现图片的合成，比如我们可以实现各种各样的头像，例如圆形头像。那这里我们需要采用哪种mode？

这里先draw是dest，后draw是src，我们需要的是将dest露出，同时将src产生的效果合成到dest上，那这里我们需要用的是DST_IN效果。

上面图示表示一方是全透明的，其实还需要结合Mode定义来完全理解该效果，Mode的计算方式如下：

public enum Mode {
    /** [0, 0] */
    CLEAR       (0),    /** [Sa, Sc] */
    SRC         (1),    /** [Da, Dc] */
    DST         (2),    /** [Sa + (1 - Sa)*Da, Rc = Sc + (1 - Sa)*Dc] */
    SRC_OVER    (3),    /** [Sa + (1 - Sa)*Da, Rc = Dc + (1 - Da)*Sc] */
    DST_OVER    (4),    /** [Sa * Da, Sc * Da] */
    SRC_IN      (5),    /** [Sa * Da, Sa * Dc] */
    DST_IN      (6),    /** [Sa * (1 - Da), Sc * (1 - Da)] */
    SRC_OUT     (7),    /** [Da * (1 - Sa), Dc * (1 - Sa)] */
    DST_OUT     (8),    /** [Da, Sc * Da + (1 - Sa) * Dc] */
    SRC_ATOP    (9),    /** [Sa, Sa * Dc + Sc * (1 - Da)] */
    DST_ATOP    (10),    /** [Sa + Da - 2 * Sa * Da, Sc * (1 - Da) + (1 - Sa) * Dc] */
    XOR         (11),    /** [Sa + Da - Sa*Da,
         Sc*(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)] */
    DARKEN      (16),    /** [Sa + Da - Sa*Da,
         Sc*(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)] */
    LIGHTEN     (17),    /** [Sa * Da, Sc * Dc] */
    MULTIPLY    (13),    /** [Sa + Da - Sa * Da, Sc + Dc - Sc * Dc] */
    SCREEN