Прокрутите вдоль кривой

Question

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

Элементы сверху и снизу будут ближе к краю экрана, чем объекты рядом с центром.

Answer 1

Вот что я придумал. Очень грубая демонстрация здесь как подтверждение концепции.

Сначала соединение с myScrollView уже установлено с помощью IBOutlet и подключено к просмотру прокрутки в xib. Затем я настроил представление прокрутки в viewDidLoad:

int scrollItems = 20;
viewSize = 120;
viewItems = [[NSMutableArray alloc] init];
[myScrollView setContentSize:CGSizeMake(myScrollView.frame.size.width, (viewSize*1.25)*scrollItems)];
for(int i = 0; i < scrollItems; i++){
    UIView *thisView = [[UIView alloc] initWithFrame:CGRectMake(myScrollView.frame.size.width/2, i*(viewSize*1.25), viewSize, viewSize)];
    [thisView setBackgroundColor:[UIColor blueColor]];  // spaced out blue squares
    [myScrollView addSubview:thisView];
    [viewItems addObject:thisView];
}
[myScrollView setDelegate:self];
[myScrollView setContentOffset:CGPointMake(0, 1)]; // to force initial items to curve

}

Это помещает элементы в представление прокрутки вместе с глобальным NSMutableArray. Они равномерно распределены, и размер прокрутки для них правильно подобран. Прямо сейчас предметы выстроены прямо в центре моего прокрутки. Чтобы дать им кривую, мы добавим следующий метод:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
float start = [scrollView contentOffset].y;    
float height = scrollView.frame.size.height;
float end = start + height;  // change so it doesn't scoot views past the end

float viewOffset, viewTop;

int index = 0;
for(UIView *thisView in viewItems){
    viewTop = thisView.frame.origin.y+thisView.frame.size.height;
    if((viewTop>start)&&(thisView.frame.origin.y<end)){ // our visible range
        viewOffset = thisView.frame.origin.y - start;
        CGRect tempFrame = thisView.frame;
        tempFrame.origin.x = 90 - sin((viewOffset / height)*4)*80;
        thisView.frame = tempFrame;
        index++;
    }
}

}

Это в основном использует синусоидальную волну для перемещения каждого элемента в видимом диапазоне на нужную величину. Таким образом, верхние и нижние элементы почти ничего не регулируются, а центральные элементы отодвигаются дальше всего. Как половина синусоиды, повернутой вбок.

На самом деле он работает очень гладко, как на моем первом поколении iPad. Мне это очень нравится. Несколько способов ускорить его ... точно рассчитать, какие представления находятся в области содержимого, и только коснуться их, сейчас я проверяю каждый элемент от первого до последнего, и это пустая трата времени. Также может быть целесообразно проповедовать значения sin (). Другое дело, что scrollViewDidScroll может обновляться 2 или 3 раза в одной и той же позиции, восстанавливая все, когда нет видимых изменений, поэтому у многих подробных элементов часто возникают проблемы с обновлением.

Наслаждайтесь.

Answer 2

Я думаю, что вам нужен собственный класс с основной анимацией. Я не знаю достаточно, чтобы сделать кривую Безье, но в основном вам нужен контейнер общего вида, который заполнен, скажем, 5 ячейками. Если вы двигаетесь вверх, вид сверху «removeFromSuperview-ed», и вы добавляете новую ячейку внизу. Четыре другие ячейки анимируются до следующей определенной позиции на кривой Безье. Не должно быть слишком сложно, я думаю, что вам нужно выяснить следующее:

кривая анимации - перемещение UIViews по x и y, масштабирование представлений на основе движения x (уменьшайте по мере увеличения или уменьшения кривой)

функции для сложения и вычитания ячеек

функция для отображения / добавления содержимого в каждую ячейку

функция для перемещения клеток вверх и вниз

В идеале это было бы автономно. Посмотрите, сможете ли вы найти собственный поток обложек, такой как учебник, я думаю, что это похоже на другую анимацию.