Android實現(xiàn)顏色漸變動畫效果

更新時間：2022年05月11日 08:41:35 作者：計蒙不吃魚

這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)顏色漸變動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

案例效果的實現(xiàn)比較簡單，利用Android自帶的顏色插值器ArgbEvaluator()進(jìn)行計算即可，而本文的重點(diǎn)就是講講插值器。

效果圖：

一、Android中插值器TypeEvaluator

TypeEvaluator是一個接口，在開發(fā)中可以自定義該接口實例，利用ValueAnimator的setEvaluator(TypeEvaluator)方法來控制動畫的更新計算表達(dá)式。在日常開發(fā)中，不可能只是需要操縱單一數(shù)值的變化，如果需要同時操縱對象的多個屬性，如定義動畫的x，y移動的坐標(biāo)等，那就需要對TypeEvaluator有所了解了。

二、案例效果實現(xiàn)

1.利用Android自帶的顏色插值器ArgbEvaluator

ValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED, BLUE);
? ? ? ? colorAnim.setDuration(4000);
? ? ? ? colorAnim.setEvaluator(new ArgbEvaluator());
? ? ? ? colorAnim.setRepeatCount(ValueAnimator.INFINITE);
? ? ? ? colorAnim.setRepeatMode(ValueAnimator.REVERSE);
? ? ? ? colorAnim.start();

2.看看Android自帶顏色插值器ArgbEvaluator核心代碼

@Override
? ? public Object evaluate(float fraction, Object startValue, Object endValue) {
? ? ? ? int startInt = (Integer) startValue;
? ? ? ? float startA = ((startInt >> 24) & 0xff) / 255.0f;
? ? ? ? float startR = ((startInt >> 16) & 0xff) / 255.0f;
? ? ? ? float startG = ((startInt >> ?8) & 0xff) / 255.0f;
? ? ? ? float startB = ( startInt ? ? ? ?& 0xff) / 255.0f;

? ? ? ? int endInt = (Integer) endValue;
? ? ? ? float endA = ((endInt >> 24) & 0xff) / 255.0f;
? ? ? ? float endR = ((endInt >> 16) & 0xff) / 255.0f;
? ? ? ? float endG = ((endInt >> ?8) & 0xff) / 255.0f;
? ? ? ? float endB = ( endInt ? ? ? ?& 0xff) / 255.0f;

? ? ? ? // 將sRGB轉(zhuǎn)化成線性
? ? ? ? startR = (float) Math.pow(startR, 2.2);
? ? ? ? startG = (float) Math.pow(startG, 2.2);
? ? ? ? startB = (float) Math.pow(startB, 2.2);

? ? ? ? endR = (float) Math.pow(endR, 2.2);
? ? ? ? endG = (float) Math.pow(endG, 2.2);
? ? ? ? endB = (float) Math.pow(endB, 2.2);

? ? ? ? //在線性空間中計算插值的顏色
? ? ? ? float a = startA + fraction * (endA - startA);
? ? ? ? float r = startR + fraction * (endR - startR);
? ? ? ? float g = startG + fraction * (endG - startG);
? ? ? ? float b = startB + fraction * (endB - startB);

? ? ? ? //轉(zhuǎn)換回sRGB在[0..255]范圍
? ? ? ? a = a * 255.0f;
? ? ? ? r = (float) Math.pow(r, 1.0 / 2.2) * 255.0f;
? ? ? ? g = (float) Math.pow(g, 1.0 / 2.2) * 255.0f;
? ? ? ? b = (float) Math.pow(b, 1.0 / 2.2) * 255.0f;

? ? ? ? return Math.round(a) << 24 | Math.round(r) << 16 | Math.round(g) << 8 | Math.round(b);
? ? }

3.根據(jù)ArgbEvaluator的實現(xiàn)來自定義一個顏色插值器

public class MyColorEvaluator implements TypeEvaluator

接下來換一種顏色的計算方式，在本人看相關(guān)api的過程中，發(fā)現(xiàn)Color中有colorToHSV和HSVToColor的方法，于是在網(wǎng)上找了一個HVS的計算方式。（以下代碼來源于網(wǎng)絡(luò)）。

@Override
? ? public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
? ? ? ? Color.colorToHSV(startValue,startHsv);
? ? ? ? Color.colorToHSV(endValue,endHsv);
? ? ? ? int alpha = startValue >> 24 + (int) ((endValue >> 24 - startValue >> 24) * fraction);
? ? ? ? // 計算當(dāng)前動畫完成度（fraction）所對應(yīng)的顏色值
? ? ? ? if (endHsv[0] - startHsv[0] > 180) {
? ? ? ? ? ? endHsv[0] -= 360;
? ? ? ? } else if (endHsv[0] - startHsv[0] < -180) {
? ? ? ? ? ? endHsv[0] += 360;
? ? ? ? }
? ? ? ? outHsv[0] = startHsv[0] + (endHsv[0] - startHsv[0]) * fraction;
? ? ? ? if (outHsv[0] > 360) {
? ? ? ? ? ? outHsv[0] -= 360;
? ? ? ? } else if (outHsv[0] < 0) {
? ? ? ? ? ? outHsv[0] += 360;
? ? ? ? }
? ? ? ? outHsv[1]=startHsv[1]+(endHsv[1]-startHsv[1])*fraction;
? ? ? ? outHsv[2]=startHsv[2]+(endHsv[2]-startHsv[2])*fraction;


? ? ? ? return Color.HSVToColor(alpha,outHsv);

? ? }

4.使用自己定義的顏色插值器MyColorEvaluator

ValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED, BLUE);
? ? ? ? colorAnim.setDuration(4000);
? ? ? ? colorAnim.setEvaluator(new MyColorEvaluator());
? ? ? ? colorAnim.setRepeatCount(ValueAnimator.INFINITE);
? ? ? ? colorAnim.setRepeatMode(ValueAnimator.REVERSE);
? ? ? ? colorAnim.start();

三、源碼

ColorGradient.java:

public class ColorGradient extends View {

? ? public ColorGradient(Context context) {
? ? ? ? super(context);
? ? }

? ? public ColorGradient(Context context, @Nullable AttributeSet attrs) {
? ? ? ? super(context, attrs);
? ? ? ? animation();
? ? }

? ? public ColorGradient(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
? ? ? ? super(context, attrs, defStyleAttr);
? ? }
? ? private void animation(){
? ? ? ? ValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED, BLUE);
? ? ? ? colorAnim.setDuration(4000);
? ? ? ? colorAnim.setEvaluator(new MyColorEvaluator());
? ? ? ? colorAnim.setRepeatCount(ValueAnimator.INFINITE);
? ? ? ? colorAnim.setRepeatMode(ValueAnimator.REVERSE);
? ? ? ? colorAnim.start();
? ? }

? ??
}

MyColorEvaluator.java:

public class MyColorEvaluator implements TypeEvaluator<Integer> {
? ? float[] startHsv=new float[3];
? ? float[] endHsv=new float[3];
? ? float[] outHsv=new float[3];

? ? @Override
? ? public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
? ? ? ? Color.colorToHSV(startValue,startHsv);
? ? ? ? Color.colorToHSV(endValue,endHsv);
? ? ? ? int alpha = startValue >> 24 + (int) ((endValue >> 24 - startValue >> 24) * fraction);
? ? ? ? // 計算當(dāng)前動畫完成度（fraction）所對應(yīng)的顏色值
? ? ? ? if (endHsv[0] - startHsv[0] > 180) {
? ? ? ? ? ? endHsv[0] -= 360;
? ? ? ? } else if (endHsv[0] - startHsv[0] < -180) {
? ? ? ? ? ? endHsv[0] += 360;
? ? ? ? }
? ? ? ? outHsv[0] = startHsv[0] + (endHsv[0] - startHsv[0]) * fraction;
? ? ? ? if (outHsv[0] > 360) {
? ? ? ? ? ? outHsv[0] -= 360;
? ? ? ? } else if (outHsv[0] < 0) {
? ? ? ? ? ? outHsv[0] += 360;
? ? ? ? }
? ? ? ? outHsv[1]=startHsv[1]+(endHsv[1]-startHsv[1])*fraction;
? ? ? ? outHsv[2]=startHsv[2]+(endHsv[2]-startHsv[2])*fraction;


? ? ? ? return Color.HSVToColor(alpha,outHsv);

? ? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: