Question

我正在创建一些我希望从一种颜色淡化到另一种颜色的自定义Swing组件。目前我正在从RGB转换为HSB，然后通过Hue值递增并在绘画前转换回RGB，工作正常。

然而，这会循环所有颜色（即试图从蓝色渐变为绿色循环，通过黄色，橙色，红色等）。是否有一种不错的算法/方法可以直接从一种颜色淡入另一种颜色？

编辑：我已经通过Swing Timer对其进行了更新（我尝试避免使用像瘟疫这样的线程来触摸组件）。今天晚上我会带着你的建议去感谢，谢谢！

Answer 1

根据此example，下面的Queue<Color>会从Color.green到Color.blue再次循环，并在Color.green步骤中再次回到N = 32。请注意，Color.green在数字上小于HSB模型中的Color.blue。另请参阅使用HSB的相关example。

enter image description here

public Flash(JComponent component) {
    this.component = component;
    float gHue = Color.RGBtoHSB(0, 1, 0, null)[0];
    float bHue = Color.RGBtoHSB(0, 0, 1, null)[0];
    for (int i = 0; i < N; i++) {
        clut.add(Color.getHSBColor(gHue + (i * (bHue - gHue) / N), 1, 1));
    }
    for (int i = 0; i < N; i++) {
        clut.add(Color.getHSBColor(bHue - (i * (bHue - gHue) / N), 1, 1));
    }
}

Answer 2

我使用多种方法组合来实现相同的结果。

Baiscally我使用simular API接口作为LinearGradientPaint，我提供了一系列分数和一组颜色，然后基于float百分比，我计算得到的混合颜色。

这允许我通过相同的算法产生许多有效的结果。

enter image description here

虽然此示例旨在演示各种颜色的混合，但您可以为两种颜色提供两种颜色和一小部分{0f, 1f}

这使我能够有效地进行彩色动画。

public class ColorFade {

    public static void main(String[] args) {
        new ColorFade();
    }

    public ColorFade() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException ex) {
                } catch (InstantiationException ex) {
                } catch (IllegalAccessException ex) {
                } catch (UnsupportedLookAndFeelException ex) {
                }

                JFrame frame = new JFrame();
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new BorderLayout());
//                frame.add(new FadePane());
                frame.add(new ColorFadePane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class FadePane extends JPanel {

        private float[] fractions = new float[]{0f, 0.25f, 0.5f, 1f};
        private Color[] colors = new Color[]{Color.GREEN, Color.BLUE, Color.YELLOW, Color.RED};
        private float direction = 0.05f;
        private float progress = 0f;

        public FadePane() {
            Timer timer = new Timer(125, new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent e) {
                    if (progress + direction > 1f) {
                        direction = -0.05f;
                    } else if (progress + direction < 0f) {
                        direction = 0.05f;
                    }
                    progress += direction;
                    repaint();
                }
            });
            timer.setCoalesce(true);
            timer.setRepeats(true);
            timer.start();
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(100, 100);
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g.create();
            int width = getWidth();
            int height = getHeight();
            Color startColor = blendColors(fractions, colors, progress);
            g2d.setColor(startColor);
            g2d.fillRect(0, 0, width, height);
            g2d.dispose();
        }
    }

    public class ColorFadePane extends JPanel {

        private float[] fractions = new float[]{0f, 0.25f, 0.5f, 1f};
        private Color[] colors = new Color[]{Color.GREEN, Color.BLUE, Color.YELLOW, Color.RED};

        public ColorFadePane() {
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(200, 100);
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);

            Graphics2D g2d = (Graphics2D) g.create();
            int width = getWidth();
            int height = getHeight();
            int bandWidth = width / 100;
            for (int index = 0; index < 100; index++) {
                float progress = (float)index / (float)100;
                Color color = blendColors(fractions, colors, progress);

                int x = bandWidth * index;
                int y = 0;
                g2d.setColor(color);
                g2d.fillRect(x, y, bandWidth, height);
            }
            g2d.dispose();
        }
    }

    public static Color blendColors(float[] fractions, Color[] colors, float progress) {
        Color color = null;
        if (fractions != null) {
            if (colors != null) {
                if (fractions.length == colors.length) {
                    int[] indicies = getFractionIndicies(fractions, progress);

                    float[] range = new float[]{fractions[indicies[0]], fractions[indicies[1]]};
                    Color[] colorRange = new Color[]{colors[indicies[0]], colors[indicies[1]]};

                    float max = range[1] - range[0];
                    float value = progress - range[0];
                    float weight = value / max;

                    color = blend(colorRange[0], colorRange[1], 1f - weight);
                } else {
                    throw new IllegalArgumentException("Fractions and colours must have equal number of elements");
                }
            } else {
                throw new IllegalArgumentException("Colours can't be null");
            }
        } else {
            throw new IllegalArgumentException("Fractions can't be null");
        }
        return color;
    }

    public static int[] getFractionIndicies(float[] fractions, float progress) {
        int[] range = new int[2];

        int startPoint = 0;
        while (startPoint < fractions.length && fractions[startPoint] <= progress) {
            startPoint++;
        }

        if (startPoint >= fractions.length) {
            startPoint = fractions.length - 1;
        }

        range[0] = startPoint - 1;
        range[1] = startPoint;

        return range;
    }

    public static Color blend(Color color1, Color color2, double ratio) {
        float r = (float) ratio;
        float ir = (float) 1.0 - r;

        float rgb1[] = new float[3];
        float rgb2[] = new float[3];

        color1.getColorComponents(rgb1);
        color2.getColorComponents(rgb2);

        float red = rgb1[0] * r + rgb2[0] * ir;
        float green = rgb1[1] * r + rgb2[1] * ir;
        float blue = rgb1[2] * r + rgb2[2] * ir;

        if (red < 0) {
            red = 0;
        } else if (red > 255) {
            red = 255;
        }
        if (green < 0) {
            green = 0;
        } else if (green > 255) {
            green = 255;
        }
        if (blue < 0) {
            blue = 0;
        } else if (blue > 255) {
            blue = 255;
        }

        Color color = null;
        try {
            color = new Color(red, green, blue);
        } catch (IllegalArgumentException exp) {
            NumberFormat nf = NumberFormat.getNumberInstance();
            System.out.println(nf.format(red) + "; " + nf.format(green) + "; " + nf.format(blue));
            exp.printStackTrace();
        }
        return color;
    }
}

Answer 3

提示

使用Swing Timer进行慢动作效果
将RGB的值减去一个数字，比如说x

Tadaaaa ..： - ）

更新：如果您愿意，可以玩x的价值。

使用Math.Random()函数在执行期间为x生成伪随机值

HovercraftFullOfEels＆amp; mKorbel，感谢您的投入

Answer 4

最简单的方法是在每个RGB值之间进行插值。这对所有语言都是一样的 - python代码看起来像：

steps = 10

rgb1 = [ 'AA', '08', 'C3' ]
rgb2 = [ '03', '88', '1C' ]

h1 = map( lambda s: int( '0x'+s, 0 ), rgb1 )
h2 = map( lambda s: int( '0x'+s, 0 ), rgb2 )

inc = [0, 0, 0]
for i in range(0,3):
    inc[i] = ( h2[i] - h1[i] ) / ( steps - 1 )

for i in range(0,steps-1):
    print '<span style="background: #%02x%02x%02x"> &nbsp; %i &nbsp; </span>' % ( 
            h1[0] + i * inc[0],
            h1[1] + i * inc[1],
            h1[2] + i * inc[2],
            i+1 )

print '<span style="background: #%02x%02x%02x"> &nbsp; %i &nbsp; </span>' % ( 
        h2[0], h2[1], h2[2], steps )

Answer 5

您可以线性插值从开始rgb颜色到最后想要的颜色的过渡。

这意味着，例如您以rgb(255,255,0)作为起始颜色并以rgb(50,50,50)作为目标，并希望在导致以下颜色的每个步骤中按(-41 = (255-50)/5, -41, 10)调整的5个步骤中达到最终颜色：

rgb(255,255,  0)
rgb(214,214, 10)
rgb(173,173, 20)
rgb(132,132, 30)
rgb( 91, 91, 40)
rgb( 50, 50, 50)

这称为线性渐变，非常容易实现，但当然还有各种其他技术可以在颜色之间进行很好的过渡。

色彩衰落算法？

5 个答案: