ios - hora - Cambiar entre colores según el contenido de UIScrollViewOffset

swift 4 navigation bar title color

Question

Tengo un UIScrollView horizontal que tiene un ancho de 960 , suficiente para contener 3 vistas de UIViewController .

Cada vista simplemente tiene un color de fondo. El primero es rosa, el segundo es azul y el tercero es verde.

Quiero mezclar / mezclar / fundir los colores visibles a medida que el usuario se desplaza.

Entonces, si estuvieras desplazándote de la página 1 (rosa) a la página 2 (azul), habría algún tipo de mezcla / mezcla / fundido de rosa y azul antes de aterrizar finalmente en el color azul final cuando el usuario pasa completamente a la segunda página .

Encontré una pregunta sobre exactamente lo que estoy tratando de hacer, y he implementado la respuesta que se puede encontrar aquí: https://stackoverflow.com/a/26159561/3344977

Esta respuesta funciona, mi único problema es que esta respuesta solo se creó para usar 2 pantallas / colores, y tengo 3 pantallas / colores.

Entiendo los fundamentos de esta respuesta y depende del contentOffset.x de UIScrollView para calcular el color actual, pero aparte de eso, soy terrible con las matemáticas, lo que me impide desarrollar cómo modificar esto para usar un tercer color.

Answer 1

Sí, definitivamente puede usar esto para tres colores (o más).

Para tres colores (por ejemplo, rojo, verde, azul) tendrá rojo en 0.0, verde en 0.5 y azul en 1.0. Así que solo tiene que dividir el método entre los dos fundidos (rojo-verde y verde-azul se calcularán por separado).

Usando mi código de antes de obtener el método ...

// this just gets the percentage offset.
// 0,0 = no scroll
// 1,1 = maximum scroll
- (void)scrollView:(UIScrollView *)scrollView didScrollToPercentageOffset:(CGPoint)percentageOffset
{
    // get your colours to fade between
    NSArray *colours = @[[UIColor redColor], [UIColor yellowColor], [UIColor purpleColor]];

    // choose the colours to fade between based on the percentage.
    if (percentageOffset.x < 0.5) {
        // multiply the offset by 2 because we want 0.5 to be 100%
        self.backgroundColor = [self fadeFromColor:colours[0] toColor:colours[1] withPercentage:percentageOffset.x*2];
    } else {
        // minus 0.5 because we want 0.5 to be 0%
        self.backgroundColor = [self fadeFromColor:colours[1] toColor:colours[2] withPercentage:(percentageOffset.x-0.5)*2];
    }
}

// this is a more generic method to fade between two colours
// it allows the colours to be passed in as parameters
- (UIColor *)fadeFromColor:(UIColor *)fromColor toColor:(UIColor *)toColor withPercentage:(CGFloat)percentage
{
    // get the RGBA values from the colours
    CGFloat fromRed, fromGreen, fromBlue, fromAlpha;
    [fromColor getRed:&fromRed green:&fromGreen blue:&fromBlue alpha:&fromAlpha];

    CGFloat toRed, toGreen, toBlue, toAlpha;
    [toColor getRed:&toRed green:&toGreen blue:&toBlue alpha:&toAlpha];

    //calculate the actual RGBA values of the fade colour
    CGFloat red = (toRed - fromRed) * percentage + fromRed;
    CGFloat green = (toGreen - fromGreen) * percentage + fromGreen;
    CGFloat blue = (toBlue - fromBlue) * percentage + fromBlue;
    CGFloat alpha = (toAlpha - fromAlpha) * percentage + fromAlpha;

    // return the fade colour
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}

Esto se desvanecerá bien entre los tres colores.

Puede agregar más colores a esto y cambiar la forma en que divide los porcentajes.

Answer 2

¡La respuesta publicada por Fogmeister funciona a la perfección!

Aquí está la misma respuesta traducida a Swift:

// this just gets the percentage offset.
// 0,0 = no scroll
// 1,1 = maximum scroll

func scrollViewdidScrollToPercentageOffset(scrollView: UIScrollView, percentageOffset: CGPoint) {
    // get your colours to fade between
    var colors = [UIColor.redColor(), UIColor.blueColor(), UIColor.greenColor()]

    // choose the colours to fade between based on the percentage.
    if (percentageOffset.x < 0.5) {
        // multiply the offset by 2 because we want 0.5 to be 100%
        scrollView.backgroundColor = fadeFromColor(colors[0], colors[1], percentageOffset.x*2)
    } else {
        // minus 0.5 because we want 0.5 to be 0%
        scrollView.backgroundColor = fadeFromColor(colors[1], colors[2], (percentageOffset.x - 0.5)*2)
    }
}

func fadeFromColor(fromColor: UIColor, toColor: UIColor, withPercentage: CGFloat) -> UIColor {
    var fromRed: CGFloat = 0.0
    var fromGreen: CGFloat = 0.0
    var fromBlue: CGFloat = 0.0
    var fromAlpha: CGFloat = 0.0

    fromColor.getRed(&fromRed, green: &fromGreen, blue: &fromBlue, alpha: &fromAlpha)

    var toRed: CGFloat = 0.0
    var toGreen: CGFloat = 0.0
    var toBlue: CGFloat = 0.0
    var toAlpha: CGFloat = 0.0

    toColor.getRed(&toRed, green: &toGreen, blue: &toBlue, alpha: &toAlpha)

    //calculate the actual RGBA values of the fade colour
    var red = (toRed - fromRed) * withPercentage + fromRed
    var green = (toGreen - fromGreen) * withPercentage + fromGreen
    var blue = (toBlue - fromBlue) * withPercentage + fromBlue
    var alpha = (toAlpha - fromAlpha) * withPercentage + fromAlpha

    // return the fade colour
    return UIColor(red: red, green: green, blue: blue, alpha: alpha)
}