UIScrollview animation je nach Inhalts-offset

Ich bin mit einem horizontalen UIScrollView, und ich möchte eine Hintergrundfarbe übergang je nach x-Wert des Inhalts-offset.

Beispiel: Die Breite von UIScrollView ist 640px. Wenn die Inhalts-offset ist gleich 0px, die hintergrund Farbe muss rot sein. Wenn der Inhalt offset 320 px, hintergrund muss gelb sein. Aber der wichtigste Teil ist, wenn der UIScrollview ist zwischen 0px und 320px hintergrund muss Farbe zwischen rot und gelb.

Hinweis: Die twitter app für iOS hat die gleiche animation, wenn Sie streichen Sie nach Links aus einer Suche. Das label auf die navigation etwas verschwindet.

InformationsquelleAutor Berendschot | 2014-10-02
  1. 18

    Erzeugen Sie die Farbe je nach der offset-Anteil.

    Der einfachste Weg, um eine Verschiebung zwischen Farben wie dieses ist die Verwendung des HSB-Farbraumes.

    Auch dies ist nicht eine animation. Die "animation" - Effekt gegeben, um Sie von der scrollview. Sie müssen nur legen Sie die Farbe jedes mal, wenn die scroll-Ansicht wechselt.

    In der delegate-Methode konnten Sie so etwas tun.

    Bearbeiten, um flexibler

    //this just calculates the percentages now and passes it off to another method.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //vertical
    CGFloat maximumVerticalOffset = scrollView.contentSize.height - CGRectGetHeight(scrollView.frame);
    CGFloat currentVerticalOffset = scrollView.contentOffset.y;

    //horizontal
    CGFloat maximumHorizontalOffset = scrollView.contentSize.width - CGRectGetWidth(scrollView.frame);
    CGFloat currentHorizontalOffset = scrollView.contentOffset.x;

    //percentages
    CGFloat percentageHorizontalOffset = currentHorizontalOffset / maximumHorizontalOffset;
    CGFloat percentageVerticalOffset = currentVerticalOffset / maximumVerticalOffset;

    [self scrollView:scrollView didScrollToPercentageOffset:CGPointMake(percentageHorizontalOffset, percentageVerticalOffset)];
}

//this just gets the percentage offset.
//0,0 = no scroll
//1,1 = maximum scroll
- (void)scrollView:(UIScrollView *)scrollView didScrollToPercentageOffset:(CGPoint)percentageOffset
{
    UIColor *HSBColor = [self HSBColorForOffsetPercentage:percentageOffset.x];

    UIColor *RGBColor = [self RGBColorForOffsetPercentage:percentageOffset.x];
}

//HSB color just using Hue
- (UIColor *)HSBColorForOffsetPercentage:(CGFloat)percentage
{
    CGFloat minColorHue = 0.0;
    CGFloat maxColorHue = 0.2; //this is a guess for the yellow hue.

    CGFloat actualHue = (maxColorHue - minColorHue) * percentage + minColorHue;

    //change these values to get the colours you want.
    //I find reducing the saturation to 0.8 ish gives nicer colours.
    return [UIColor colorWithHue:actualHue saturation:1.0 brightness:1.0 alpha:1.0];
}

//RGB color using all R, G, B values
- (UIColor *)RGBColorForOffsetPercentage:(CGFloat)percentage
{
    //RGB 1, 0, 0 = red
    CGFloat minColorRed = 1.0;
    CGFloat minColorGreen = 0.0;
    CGFloat minColorBlue = 0.0;

    //RGB 1, 1, 0 = yellow
    CGFloat maxColorRed = 1.0;
    CGFloat maxColorGreen = 1.0;
    CGFloat maxColorBlue = 0.0;

    //if you have specific beginning and end RGB values then set these to min and max respectively.
    //it should even work if the min value is greater than the max value.

    CGFloat actualRed = (maxColorRed - minColorRed) * percentage + minColorRed;
    CGFloat actualGreen = (maxColorGreen - minColorGreen) * percentage + minColorGreen;
    CGFloat actualBlue = (maxColorBlue - minColorBlue) * percentage + minColorBlue;

    return [UIColor colorWithRed:actualRed green:actualGreen blue:actualBlue alpha:1.0];
}

    Ich weiß nicht, wie der RGB-Methode führen Sie auf Mitte der Werte. Das braune in der Mitte usw... aber Sie können spielen, um.

    Dies sollte Ihnen eine Idee geben, wie zu animieren ALLES mit der scroll-Ansicht als eine Möglichkeit, es zu kontrollieren.

    Mit dieser Methode können Sie Steuern, die Deckkraft, Größe, rotation, font-size, etc... Sie können auch kombinieren Sie mehrere Dinge (wie ich mit RGB).

    • Vielen Dank, funktioniert perfekt!
    • Jede chance, dass diese arbeiten mit RGB-Farben?
    • Ja, aber es ist viel schwerer zu machen, eine Verschiebung der Farbe mit RGB. Lassen Sie mich zu ändern es ein sec...
    • ok, werde zu Bloggen. Ich mag es zu viel nicht 😀
    • Danke! Es gibt einen kleinen Fehler in dem Teil, wo Sie berechnen actualRed, die Sie verwenden sollten 'Prozentsatz' statt 'ausschalten percentageOffset'.
    • behoben, danke 🙂
    • gebloggt. oliverfoggin.com/controlling-animations-with-a-uiscrollview
    • Seit iOS 11 sollten Sie auch hinzufügen scrollView.adjustedContentInset Wert auf maximale Größe, wenn scrollView gebunden layout guide.

    InformationsquelleAutor Fogmeister
  2. -3

    In deinem scrollView delegieren, versuchen Sie so etwas wie dieses:

    -(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGPoint a = self.mainScrollView.contentOffset;
    if(a.x >= 320){
        [UIView animateWithDuration:0.5 animations:^{
            [self.view setBackgroundColor:[UIColor redColor]];
        }];
    }
    else{
        [UIView animateWithDuration:0.5 animations:^{
            [self.view setBackgroundColor:[UIColor yellowColor]];
        }];
    }
}
    • Wieso der downvote? Auch wenn der code oben ist nicht ganz richtig, auf die spezifischen Bedürfnisse, ausgedrückt in der Frage, es tut erahnen, was der Fragesteller versuchen könnte, um seine Farbe-Logik arbeiten.
    • Nicht meine down-vote. Aber... Das wird nicht den Effekt erzielen, dass die person, die Frage zu stellen sucht. Wenn der scrollView ist bei 319 offset dann dies animiert zu gelb. Es sollte fast vollständig rot. Auch diese geben nicht dem halben Weg zwischen rot und gelb-Effekt, dass er suchen entweder. Plus, die animation ist unnötig hier zu.
    InformationsquelleAutor Istvan
Schreibe einen Kommentar