2014-08-30 3 views
0

У меня есть горизонтальное прокрутка с 3 страницами.iOS градиент анимации с uiscrollview paging

Я хотел бы иметь один цвет фона для каждой страницы и рисовать градиент между 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, чтобы установить процент градиента?

Я прочитал о startPoint и endPoint свойствах CAGradientLayer, но кажется, что он работает некорректно.

Любые предложения будут оценены! Заранее благодарен

ответ

0

Объекты 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); 

Однако это может вызвать проблемы с памятью, если размер вашего контента становится намного больше.

Я посмотрел на Сима, и он не казался растущим с большим количеством страниц. Я пошел к 10, и, похоже, он остался примерно таким же, как 3 страницы, но это соображение, поэтому вам, возможно, придется вернуться к вашей первоначальной теории настройки цветового массива в зависимости от горизонтального смещения.

Я думаю, что scrollviews internal paging эффективно обрабатывает его подслои, чтобы избежать этого.

Сладкая цветовая схема. Джерри Гарсия был бы горд.

enter image description here

+0

Здравствуйте, спасибо за Ваш ответ. Я попробовал ваш код. Это работает на всех, но это не тот эффект, о котором я думал ... спасибо в любом случае! Я пытаюсь использовать значение 'fractionalPage' (если я нахожусь в значениях первой страницы, от 0.0 до 1.0 - если я во втором, значения идут от 1.0 до 2.0 ...), чтобы настроить расположение конечного цвета (синий цвет, если мы находимся на первой странице). – Tenaciousd93

Смежные вопросы