带有 uiscrollview 分页的 iOS 渐变动画

Posted 2023-02-23

【中文标题】带有 uiscrollview 分页的 iOS 渐变动画

【英文标题】：iOS gradient animating with uiscrollview paging

【发布时间】：2014-08-30 16:45:19

【问题描述】：

我有一个 3 页的水平滚动视图。

我想为每个页面设置一种不同的背景颜色，并在 3 种颜色之间绘制渐变。

第 1 页为绿色，第 2 页为蓝色，第 3 页为红色。 我该怎么做？

我在想ScrollViewDidScroll委托方法：

- (void)scrollViewDidScroll:(UIScrollView *)sender


CGFloat pageWidth = self.statisticScrollView.frame.size.width;

float fractionalPage = self.statisticScrollView.contentOffset.x / pageWidth;
NSLog(@"fractional Page: %f", fractionalPage);

NSInteger lowerNumber = floor(fractionalPage);
NSLog(@"lower Page: %i", lowerNumber);

NSInteger upperNumber = lowerNumber + 1;
NSLog(@"upper Page: %i", upperNumber);

if (self.lastContentOffset > sender.contentOffset.x)
    //RIGHT --->
    if (lowerNumber == 0) 
        //gradient green to blue
    else if (lowerNumber == 1)
        //gradient blue to red
    else if (lowerNumber == 2)
        //end pages
    
else if (self.lastContentOffset < sender.contentOffset.x)
    //LEFT <----
    if (lowerNumber == 0) 
        //gradient blue to green
    else if (lowerNumber == 1)
        //gradient red to blue
    else if (lowerNumber == 2)
        //end pages
    

我可以使用fractionalPage来设置渐变的百分比吗？

我读到了CAGradientLayer 的startPoint 和endPoint 属性，但它似乎无法正常工作。

任何建议将不胜感激！ 提前谢谢你

【参考方案1】：

startPoint 和 endPoint 属性是从 0 到 1 测量的，而不是在视图的坐标系中，这可能是您遇到的问题。所以要从一边到另一边运行渐变，你需要像这样声明它。

gradlayer.startPoint = CGPointMake(0, 0.5);
gradlayer.endPoint = CGPointMake(1, 0.5);

实现您想要做的一个简单方法是在滚动视图中添加一个预先配置渐变的子层。

CGFloat width = CGRectGetWidth(self.view.frame);
CGFloat height = CGRectGetHeight(self.view.frame);

self.scroller.contentSize = CGSizeMake(3*width, height);
self.gradlayer = [CAGradientLayer layer];
self.gradlayer.frame = CGRectMake(0, 0, width*3, height);

[self.scroller.layer addSublayer:self.gradlayer];

self.gradlayer.colors = @[((id)[UIColor redColor].CGColor),((id)[UIColor greenColor].CGColor),((id)[UIColor blueColor].CGColor)];

self.gradlayer.startPoint = CGPointMake(0, 0.5);
self.gradlayer.endPoint = CGPointMake(1, 0.5);

但是，如果您的内容变得更大，这可能会导致内存问题。

我查看了 Sim，但它似乎并没有随着页面的增加而增长。我去了 10 页，它似乎与 3 页差不多，但这是一个考虑因素，因此您可能不得不回到原来的理论，即根据水平偏移调整颜色阵列。

我认为滚动视图的内部分页可以有效地处理其子层以避免这种情况。

虽然甜美的配色方案。杰里·加西亚会感到自豪。

【讨论】：

您好，感谢您的回复。我试过你的代码。它完全有效，但不是我想的效果......无论如何，谢谢你！我正在尝试使用fractionalPage 的值（如果我在第一页，值从 0.0 到 1.0 - 如果我在第二页，值从 1.0 到 2.0...）来设置结束颜色的位置（如果我们在第一页，则为蓝色）。