Android使用LinearGradient实现两道闪光效果

一、动画效果
  1.动效描述
  2.关键点
  3.实现方式  
二、LinearGradient简介
三、代码功能实现
 1.绘制闪光
  2.两道闪光顺序出现


一、动画效果

1.动效描述

实现的动画效果主要就是,一束白光从图片或者文字上闪过,这束光由两道光组成,具体细节描述如下:

2.关键点

  • 两道闪光,倾斜-330°,透明度、宽度不一样
  • 两道闪光按顺序先后出现

3.实现方式

可以用FrameLayout,在背景图或文字上两个View,然后对这两个view做动画,控制时间、旋转角度等。这里主要讲怎么用LinearGradient来实现两道光闪过的动画效果。

二、LinearGradient简介

讲实现之前先认识下主角LinearGradient。LinearGradient作用是实现某一区域内颜色的线性渐变效果,网上相关资料也很多,这里就简单介绍下常用的构造函数:
public LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions,Shader.TileMode tile)
注:Android中计算x,y坐标都是以屏幕左上角为原点,向右为x+,向下为y+

  • float x0:渐变起始点x坐标
  • float y0:渐变起始点y坐标
  • float x1:渐变结束点x坐标
  • float y1:渐变结束点y坐标
  • int[] colors:颜色 的int 数组
  • float[] positions: 相对位置的颜色数组,可为null,若为null,颜色沿渐变线均匀分布
  • Shader.TileMode tile: 渲染器平铺模式

Shader.TileMode有3种参数可供选择,分别为CLAMP、REPEAT和MIRROR:

  • CLAMP的作用是如果渲染器超出原始边界范围,则会复制边缘颜色对超出范围的区域进行着色
  • REPEAT的作用是在横向和纵向上以平铺的形式重复渲染位图
  • MIRROR的作用是在横向和纵向上以镜像的方式重复渲染位图

代码功能实现

1.绘制闪光

闪光的绘制由LinearGradient完成,通过改变其构造函数各个参数值,就能绘制出不同的光效果

(1)闪光倾斜-330°

调节渐变闪光的倾斜角度,需用LinearGradient构造函数中的x0,y0,x1,y1参数,即调节渐变的起始点,更多用法可参考Android中的LinearGradient。所以我们将这个4个参数设置成如下:

(2)两道闪光

这里主要用到LinearGradient构造函数中的colors,positions参数。colors参数很好理解,就是一组颜色值;positions的释义是“相对位置、权重”,看完释义是不是还是没有太明白(/□\*),来直接上代码和效果图。

 LinearGradient mGradient = new LinearGradient(0, 0, mViewWidth / 2, mViewHeight,
                        new int[]{0x00ffffff, 0x73ffffff, 0x00ffffff,  0x99ffffff, 0x00ffffff},
                        new float[]{0.2f,       0.35f,      0.45f,        0.5f,      0.8f},
                        Shader.TileMode.CLAMP);

上面代码可以这么理解,它定义了一组渐变的数值是{ 0x00ffffff, 0x73ffffff, 0x00ffffff, 0x99ffffff, 0x00ffffff},这组数值分别在相对应的0.2f, 0.35f, 0.45f, 0.5f, 0.8f中显示:

  • 第一道闪光颜色有效值是0.35f位置的35%白色,0.35f前后位置的颜色值都为透明,调节这两个透明颜色的position值就可以调节第一道闪光的宽度;
  • 第二道闪光颜色有效值是0.5f位置的50%白色,同理0.5f前后位置颜色为透明,调节第二道闪光宽度就可以调节这两个position值;
  • 中间0.45f位置设为透明,也就把第一道光和第二道光隔开了。

2.两道闪光顺序出现

现在两道光用LinearGradient一起绘制出来了,要怎样实现顺序出现呢?这里配合Matrix、属性动画ValueAnimator来控制,先看核心代码:

 private void initGradientAnimator() {
        valueAnimator = ValueAnimator.ofFloat(0, 1);
        valueAnimator.setDuration(5000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float v = (Float) animation.getAnimatedValue();
                //❶ 改变每次动画的平移x、y值
                mTranslateX = 4 * mViewWidth * v - mViewWidth * 2;
                mTranslateY = mViewHeight * v;
                //❷ mGradientMatrix为变换矩阵,设置矩阵x、y平移量
                if (mGradientMatrix != null) {
                    mGradientMatrix.setTranslate(mTranslateX, mTranslateY);
                }
                //❸ 为线性渐变mGradient设置matrix
                if (mGradient != null) {
                    mGradient.setLocalMatrix(mGradientMatrix);
                }
                //❹ 重绘
                invalidate();
            }
        });  
 }

重点看下第❶步怎么移动的,每次根据当前的动画属性值设置x、y平移量,x的范围是[-2mViewWidth, 2mViewWidth],y的范围是范围是[0, mViewHeight],如下图所示(x轴)。也就是两道闪光从不可见到可见,调节valueAnimator的duration,或者更改x、y变化方式就能控制两道闪光的出场顺序了


注:上面方式实现的闪光动效和文章开头列的条件并不是百分百一样,大致效果相同。
最后,自定义LightningView的的所有代码:

public class LightningView extends View {
    private Shader mGradient;
    private Matrix mGradientMatrix;
    private Paint mPaint;
    private int mViewWidth = 0, mViewHeight = 0;
    private float mTranslateX = 0, mTranslateY = 0;
    private boolean mAnimating = false;
    private Rect rect;
    private ValueAnimator valueAnimator;
    private boolean autoRun = true; //是否自动运行动画

    public LightningView(Context context) {
        super(context);
        init();
    }

    public LightningView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public LightningView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        rect = new Rect();
        mPaint = new Paint();
        initGradientAnimator();
    }

    public void setAutoRun(boolean autoRun) {
        this.autoRun = autoRun;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        rect.set(0, 0, getWidth(), getHeight());
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (mViewWidth == 0) {
            mViewWidth = getWidth();
            mViewHeight = getHeight();
            if (mViewWidth > 0) {
                //亮光闪过
                mGradient = new LinearGradient(0, 0, mViewWidth / 2, mViewHeight,
                        new int[]{0x00ffffff, 0x73ffffff, 0x00ffffff,  0x99ffffff, 0x00ffffff},
                        new float[]{0.2f,       0.35f,      0.5f,        0.7f,      1},
                        Shader.TileMode.CLAMP);
                mPaint.setShader(mGradient);
                mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN));
                mGradientMatrix = new Matrix();
                mGradientMatrix.setTranslate(-2 * mViewWidth, mViewHeight);
                mGradient.setLocalMatrix(mGradientMatrix);
                rect.set(0, 0, w, h);
            }
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mAnimating && mGradientMatrix != null) {
            canvas.drawRect(rect, mPaint);
        }
    }

    private void initGradientAnimator() {
        valueAnimator = ValueAnimator.ofFloat(0, 1);
        valueAnimator.setDuration(5000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float v = (Float) animation.getAnimatedValue();
                //❶ 改变每次动画的平移x、y值,范围是[-2mViewWidth, 2mViewWidth]
                mTranslateX = 4 * mViewWidth * v - mViewWidth * 2;
                mTranslateY = mViewHeight * v;
                //❷ 平移matrix, 设置平移量
                if (mGradientMatrix != null) {
                    mGradientMatrix.setTranslate(mTranslateX, mTranslateY);
                }
                //❸ 设置线性变化的matrix
                if (mGradient != null) {
                    mGradient.setLocalMatrix(mGradientMatrix);
                }
                //❹ 重绘
                invalidate();
            }
        });
        if (autoRun) {
            valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
            getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

                @Override
                public void onGlobalLayout() {
                    getViewTreeObserver().removeGlobalOnLayoutListener(this);
                    mAnimating = true;
                    if (valueAnimator != null) {
                        valueAnimator.start();
                    }
                }
            });
        }
    }

    //停止动画
    public void stopAnimation() {
        if (mAnimating && valueAnimator != null) {
            mAnimating = false;
            valueAnimator.cancel();
            invalidate();
        }
    }

    //开始动画
    public void startAnimation() {
        if (!mAnimating && valueAnimator != null) {
            mAnimating = true;
            valueAnimator.start();
        }
    }
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • Android绘图之Shader Shader是绘图过程中的着色器,它有五个子类: BitmapShader Co...
    lavor阅读 15,135评论 3 62
  • Paint 类持有绘制图形、文本、图像的样式和色彩信息,并且对外提供了一系列方法来设置这些信息。 一、画笔基本操作...
    秀花123阅读 4,227评论 1 7
  • 在上篇说道BitmapShader的使用关于Shader.TileMode这个参数在说明一下Shader.Tile...
    大大大寒阅读 1,488评论 3 1
  • 用来实现线性渐变效果 此类是Shader的子类通过paint.setShader来设置渐变。 有两个构造方法分别如...
    gaaaaaaaaaao阅读 38,160评论 0 29
  • 所谓在夹缝中生存,很多在大城市里生活的上班族应该和我有一样的想法吧…拥挤的交通,繁忙的街道,信号灯似乎都没有时间理...
    jojo阅读 335评论 0 1