how to mix two color with different percent

Question

i have two color and a View component. color one is background of my component. i will change my background Color to color two. but not suddenly. change similar a animation. for example:

second 1 : 90% color1 + 10% color2 second 1 : 80% color1 + 20% color2 ...... second 1 : 10% color1 + 90% color2 second 1 : 0% color1 + 100% color2

of course i try it :

percent=100;
while (percent>=0) {
    color = (color1*precent)+(color2*(100-percent));  
    percent-=10;
}

but this is a bad idea.the result is disappointing. is there any solution for this target. thanks.

Unclear if it's the same color with different alpha or just other color, possible dupe: http://stackoverflow.com/questions/2614545/animate-change-of-view-background-color-in-android — David Olsson, Dec 17 '12 at 17:43
but i use custom view. i will set this animation in a small portion of this view. not in all. — Rasoul Taheri, Dec 17 '12 at 17:47

score 1 · Accepted Answer · answered Dec 17 '12 at 19:11

You didn't clearly say why the result is disappointing, so I'm assuming it means the color transition you get is not as good you expected it to be.

Your general approach seems right, maybe you are just missing some detail so I will rewrite it in different terms. Let color1 and color2 be triples (R, G, B) where each of R, G, B is in range [0, 1]. If that is not the case, divide by 255 if that is the limit in your situation, and later multiply again by 255. Let s be the number of steps to transition from color1 to color2, here I'm including in s the initial frame with color1 but not the final frame with color2. At step k, you have a value p such that p = (s - k)/s. With p you obtain the color in frame k by doing color = p * color1 + (1 - p) * color2. Now you may want to multiply color by 255.

A pseudocode for this description is:

color1 = (R1, G1, B1)
color2 = (R2, G2, B2)
s = N

for k = 0 to s: # s + 1 steps, according to the description
    p = (s - k) / s
    color = (p * color1) + ((1 - p) * color2)

Note that at k = 0 you have only color1, and at k = s you get only color2. As you see, it is similar to what you posted with more details. Note that here I'm multiplying each of R, G, B by p.

Here are some examples transitioning from a yellow to some blue color, steps = 10, 25, 500 respectively.

enter image description here

While everything you say is logically true, it's possible to implement something that accomplishes this which is many times more efficient computation-wise that what is outlined in the pseudo-code -- which may be important especially for doing animation. — martineau, Mar 04 '13 at 04:46
@martineau Would you care to elaborate on this more efficient computation-wise method of colour changing? — Glenn.nz, Sep 22 '13 at 23:01
@Glenn: See my answers to [Python - Range values to pseudocolor](http://stackoverflow.com/questions/10901085/python-range-values-to-pseudocolor) and [Mandelbrot-algorithm - Background color](http://stackoverflow.com/questions/16253547/mandelbrot-algorithm-background-color). There's also some good information on the subject in the Wikipedia article [Linear interpolation](https://en.wikipedia.org/wiki/Lerp_%28computing%29) (aka Lerp). It's also possible to do it additively, without any multiplication or division in the inner loop. — martineau, Sep 22 '13 at 23:29

how to mix two color with different percent

1 Answers1

Linked

Related