zoukankan      html  css  js  c++  java
  • android 使用LinearGradient进行字体渐变的效果

    有这么一种效果,一串字符有一束白光从字体上面闪光的效果。如下图显示:

    就像上面的显示效果一样一束白光闪过,这种效果主要还是使用了LinearGradient类来进行的

    LinearGradient也称作线性渲染,LinearGradient的作用是实现某一区域内颜色的线性渐变效果

    它有两个构造函数

     public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)

    其中,参数x0表示渐变的起始点x坐标;参数y0表示渐变的起始点y坐标;参数x1表示渐变的终点x坐标;参数y1表示渐变的终点y坐标 ;color0表示渐变开始颜色;color1表示渐变结束颜色;参数tile表示平铺方式。

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

    CLAMP的作用是如果渲染器超出原始边界范围,则会复制边缘颜色对超出范围的区域进行着色

    REPEAT的作用是在横向和纵向上以平铺的形式重复渲染位图

    MIRROR的作用是在横向和纵向上以镜像的方式重复渲染位图

    public LinearGradient (float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile);

    其中,参数x0表示渐变的起始点x坐标;参数y0表示渐变的起始点y坐标;参数x1表示渐变的终点x坐标;参数y1表示渐变的终点y坐标;参数colors表示渐变的颜色数组;参数positions用来指定颜色数组的相对位置;参数tile表示平铺方式。通常,参数positions设为null,表示颜色数组以斜坡线的形式均匀分布。

    下面这段代码是直接从git上面的项目拷贝下来的

     

    package com.example.shimmer;
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.LinearGradient;
    import android.graphics.Matrix;
    import android.graphics.Paint;
    import android.graphics.Shader;
    import android.util.AttributeSet;
    import android.widget.TextView;
    
    public class MyTextView extends TextView {
    
        private LinearGradient mLinearGradient;
        private Matrix mGradientMatrix;
        private Paint mPaint;
        private int mViewWidth = 0;
        private int mTranslate = 0;
    
        private boolean mAnimating = true;
    
        public MyTextView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            if (mViewWidth == 0) {
                mViewWidth = getMeasuredWidth();
                if (mViewWidth > 0) {
                    mPaint = getPaint();
                    mLinearGradient = new LinearGradient(-mViewWidth, 0, 0, 0,
                            new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },
                            new float[] { 0, 0.5f, 1 }, Shader.TileMode.CLAMP);
                    mPaint.setShader(mLinearGradient);
                    mGradientMatrix = new Matrix();
                }
            }
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            if (mAnimating && mGradientMatrix != null) {
                mTranslate += mViewWidth / 10;
                if (mTranslate > 2 * mViewWidth) {
                    mTranslate = -mViewWidth;
                }
                mGradientMatrix.setTranslate(mTranslate, 0);
                mLinearGradient.setLocalMatrix(mGradientMatrix);
                postInvalidateDelayed(50);
            }
        }
    
    }

     

    这段代码主要是分两步:一个是在onSizeChanged()即大小发生改变的时候,另外一个是onDraw()主要是用来做动画的效果的,

    首先我们先来onSizeChanged()里面的代码,在这段代码中主要是定义了LinearGradient:

          mLinearGradient = new LinearGradient(-mViewWidth, 0, 0, 0, new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },new float[] { 0, 0.5f, 1 }, Shader.TileMode.CLAMP);


    段代码可以这么理解,它定义了一组渐变的数值是{ 0x33ffffff, 0xffffffff, 0x33ffffff },这组数值分别在相对应的0,0.5,1中显示,0位置对应0x33ffffff颜色,0.5位置对应0xffffffff,1位置对应0x33ffffff,这个渐变的初始位置是在手机屏幕的外面x=(-mViewWidth,0)就是屏幕外面

    最后来看一下这个onDraw()方法里面是如何做动画的

    mTranslate += mViewWidth / 10;很简单表示每一次运动的递增值

                if (mTranslate > 2 * mViewWidth) {
                    mTranslate = -mViewWidth;
                }

    这个就是运动结束点,我们把上面话一个如下图

    我就把LinearGradient这个比作一个长方形,如上图是初始化的位置在手机屏幕的最左边,要运动到屏幕的最右边就需要2*width的长度。

    剩下的方法就是很好理解了,这里不再说明了

     

     

  • 相关阅读:
    C# 杂活
    常用 SQL Server 规范集锦
    C# 文件操作
    使用Git 本地代码提交到 GitHub
    Numpy的小总结
    C#最佳工具集合:IDE、分析、自动化工具等
    Web服务器、应用服务器、Web容器、反向代理服务器区别与联系
    Platt SMO 和遗传算法优化 SVM
    Pycharm配置(三)
    Pycharm配置(二)
  • 原文地址:https://www.cnblogs.com/itchq/p/4138966.html
Copyright © 2011-2022 走看看