Android安卓动态渐变颜色，渐变动画，让渐变动起来

其他 2019-05-09 10:21:24 阅读次数: 0

前言

最近一直想写个app，可是不知道想些啥，今天给大家分享一下 渐变动起来的效果
在这里插入图片描述

因为gif图比较大，所有不够清晰，这里给大家讲解一下

文章最后的最终效果图
GIF.gif
在这里插入图片描述
最初的渐变色是这个颜色，由紫色变为蓝色，我们暂时分为这两块颜色，右边紫色会不断变浅变成粉红、橙黄、深蓝最后变回来。左边深蓝也会不断加深变成深蓝，深紫，深褐然后变回

给人的错觉就是右边移动到左边，移动的过程不断变色

其实我们仔细分析一下，他就是改变了起始端和末端的颜色

分析

上面就简单的分析了一下，现在来彻底分析一下怎么做

写出一个xml布局，然后自定义一个全屏的LinearLayout

onDraw加ValueAnimator 动态改变LinearGradient渐变色

是不是很简单？

实验一

xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <com.example.administrator.chat.gradual
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"/>
<RelativeLayout/>

java

public class gradual extends View {

    private int animatedValue;
    private int colorEnd;
    private int colorStart;

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

    public gradual(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        System.out.println(111);
        init();
    }

    public void init() {

            ValueAnimator animator=ValueAnimator.ofInt(0,255);
            animator.setDuration(20000);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @RequiresApi(api = Build.VERSION_CODES.O)
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    animatedValue = (int) animation.getAnimatedValue();
                    colorStart = Color.rgb(255-animatedValue,animatedValue,255-animatedValue);
                    colorEnd = Color.rgb(animatedValue,animatedValue,255-animatedValue);
                    invalidate();
                }
            });
            animator.start();


    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //获取View的宽高
        int width = getWidth();
        int height = getHeight();

        Paint paint = new Paint();
        LinearGradient backGradient = new LinearGradient(width, 0, 0, 0, new int[]{colorStart,colorEnd}, new float[]{0,1f}, Shader.TileMode.CLAMP);
        paint.setShader(backGradient);

        canvas.drawRect(0, 0, width, height, paint);
    }
}

发现并不行，虽然有些接近，但是并没有达到效果，程序大概就变了两种色调
在这里插入图片描述
在这里插入图片描述
显然是不对的，于是我们认认真真的有仔细观察了app上百遍，反复琢磨，我们知道他就是用的这种效果做到的，可是怎么也打不到理想的效果

恍惚间又发现他的渐变会变成三种最终色，即达到颜色的最大值（255）
深紫→深蓝
image.png
然后变为 纯黄→纯红
image.png
然后又变成 深蓝→深紫
image.png

试验二

显然我们知道这些还是不够的，我们还需要透明的RGB代码值，所以就用到强大的ps
深紫（255,0,255）→深蓝（0,0,255）
纯黄（255,255，0）→纯红（255,0,0）
深蓝（0,0,255）→深紫（255,0,255）

组合起来就是，最右边
深紫（255,0,255）→纯黄（255,255，0）→深蓝（0,0,255）
最左边
深蓝（0,0,255）→纯红（255,0,0）→深紫（255,0,255）

这里可以一目了然的看出，如果渐变色再动态渐变分为了三个阶段，比如（255,0,255）到（255,255，0）到（0,0,255），一行代码肯定是写不出来的，所以我们可以把他们分为两半，来写代码就可以了

那分析出来，写代码就简单了
最右端第一段：深紫（255,0,255）→纯黄（255,255，0） 代码是 (255,animatedValue,255-animatedValue)
最左端第一段：深蓝（0,0,255）→纯红（255,0,0） 代码是 (animatedValue,0,255-animatedValue)
最右端第二段：纯黄（255,255，0）→深蓝（0,0,255） 代码是(255-animatedValue,255-animatedValue,animatedValue)
最左端第二段：纯红（255,0,0）→深紫（255,0,255） 代码是(255,0,animatedValue)

来个if判断

int zhong=255/2
.....
 int zhong=255/2;
     if (animatedValue<zhong) {
          colorStart = Color.rgb(255, 2*animatedValue, 255 - 2*animatedValue);
          colorEnd = Color.rgb(2*animatedValue, 0, 255 - 2*animatedValue);
      }else if (animatedValue>zhong&&animatedValue<255){
          colorStart = Color.rgb(255-animatedValue,255-animatedValue,animatedValue);
          colorEnd = Color.rgb(255,0,animatedValue);
      }

大功告成

贴一下全部源码

/**
 * Created by Administrator on 2017/11/12 0012.
 */

public class gradual extends View {

    private int animatedValue;
    private int colorEnd;
    private int colorStart;

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

    public gradual(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        System.out.println(111);
        init();
    }
    public void init() {

            ValueAnimator animator=ValueAnimator.ofInt(0,255);
            animator.setDuration(20000);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @RequiresApi(api = Build.VERSION_CODES.O)
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    animatedValue = (int) animation.getAnimatedValue();
                    int zhong=255/2;
                    if (animatedValue<zhong) {
                        colorStart = Color.rgb(255, 2*animatedValue, 255 - 2*animatedValue);
                        colorEnd = Color.rgb(2*animatedValue, 0, 255 - 2*animatedValue);
                    }else if (animatedValue>zhong&&animatedValue<255){
                        colorStart = Color.rgb(255-animatedValue,255-animatedValue,animatedValue);
                        colorEnd = Color.rgb(255,0,animatedValue);
                    }
                        });
                    }
                    invalidate();
                }
            });
            animator.start();


    }

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

    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //获取View的宽高
        int width = getWidth();
        int height = getHeight();

        Paint paint = new Paint();
        LinearGradient backGradient = new LinearGradient(width, 0, 0, 0, new int[]{colorStart,colorEnd}, new float[]{0,1f}, Shader.TileMode.CLAMP);
        paint.setShader(backGradient);
        canvas.drawRect(0, 0, width, height, paint);
    }
}

关于后续

其实做到上面只会执行一次，如果我们想要的效果是不断循环，可以这样做

最右边
深紫（255,0,255）→纯黄（255,255，0）→深蓝（0,0,255）→深紫（255,0,255）
最左边
深蓝（0,0,255）→纯红（255,0,0）→深紫（255,0,255）→深蓝（0,0,255）

所对应的代码分别是

(animatedValue1,0,255) 
(255-animatedValue1,0,255)

最终源码，然后在主activity添加个定时间不断循环就可以了

public class gradual extends View {

    private int animatedValue;
    private int colorEnd;
    private int colorStart;
    private int animatedValue1;

    public gradual(Context context) {
        super(context);
        init();
        System.out.println(111);
        requestLayout();

    }

    public gradual(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
        System.out.println(222);
        requestLayout();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        init();
    }

    public void init() {
        postInvalidate();
        ValueAnimator animator=ValueAnimator.ofInt(0,255);
        animator.setDuration(10000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @RequiresApi(api = Build.VERSION_CODES.O)
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                animatedValue = (int) animation.getAnimatedValue();
                if (animatedValue<255) {
                    colorStart = Color.rgb(255, animatedValue, 255 - animatedValue);
                    colorEnd = Color.rgb(animatedValue, 0, 255 - animatedValue);
                }else if (animatedValue==255){
                    ValueAnimator animator1=ValueAnimator.ofInt(0,255);
                    animator1.setDuration(2500);
                    animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                        @Override
                        public void onAnimationUpdate(ValueAnimator animation) {
                            animatedValue1 = (int) animation.getAnimatedValue();
                            colorStart = Color.rgb(255- animatedValue1,255- animatedValue1, animatedValue1);
                            colorEnd = Color.rgb(255,0, animatedValue1);
                            if (animatedValue1==255){
                                ValueAnimator animator2=ValueAnimator.ofInt(0,255);
                                animator2.setDuration(2500);
                                animator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                                    @Override
                                    public void onAnimationUpdate(ValueAnimator animation) {
                                        int animatedValue2 = (int) animation.getAnimatedValue();
                                        colorStart = Color.rgb(animatedValue2,0,255);
                                        colorEnd = Color.rgb(255-animatedValue2,0,255);
                                        invalidate();
                                    }
                                });
                                animator2.start();
                            }
                            invalidate();
                        }
                    });
                    animator1.start();
                }
                invalidate();
            }
        });
        animator.start();
    }

    public gradual(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
        System.out.println(333);
        requestLayout();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //获取View的宽高
        int width = getWidth();
        int height = getHeight();

        Paint paint = new Paint();
        LinearGradient backGradient = new LinearGradient(width, 0, 0, 0, new int[]{colorStart,colorEnd}, new float[]{0,1f}, Shader.TileMode.CLAMP);
        paint.setShader(backGradient);

        canvas.drawRect(0, 0, width, height, paint);
    }
}

当然，这些你还可以在优化一下子

MainActivity

final Handler handler=new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                gradual=findViewById(R.id.gradual);
                gradual.requestLayout();
                gradual.invalidate();
                handler.postDelayed(this,15000);
            }
        },15000);

本文参考来源
[1]:https://www.jianshu.com/p/ce43d11c9f23

猜你喜欢

转载自blog.csdn.net/wq6ylg08/article/details/89949043
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022