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

Answer 1

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.