前言
最近一直想写个app，可是不知道想些啥，今天给大家分享一下 渐变动起来的效果
效果
GIF.gif
因为gif图比较大，所有不够清晰，这里给大家讲解一下
文章最后的最终效果图
GIF.gif
image.png
最初的渐变色是这个颜色，由紫色变为蓝色，我们暂时分为这两块颜色，右边紫色会不断变浅变成粉红、橙黄、深蓝最后变回来。左边深蓝也会不断加深变成深蓝，深紫，深褐然后变回
给人的错觉就是右边移动到左边，移动的过程不断变色
其实我们仔细分析一下，他就是改变了起始端和末端的颜色
分析
上面就简单的分析了一下，现在来彻底分析一下怎么做
写出一个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);
}
}
发现并不行，虽然有些接近，但是并没有达到效果，程序大概就变了两种色调
image.png
image.png
显然是不对的，于是我们认认真真的有仔细观察了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);
}
}
关于后续
其实做到上面只会执行一次，如果我们想要的效果是不断循环，可以这样做
1.最后效果变回当初的效果，方便循环
最右边
深紫（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);
