Эффект параллакса iOS 7 в контроллере моего вида

105

Я разрабатываю приложение для iOS 7 в Objective-C. У меня есть экран в моем приложении с несколькими кнопками и довольно фоновым изображением. (Это простой xib с UIButtons поверх UIImageView.)

Я думал, что было бы здорово, если бы эти кнопки имели эффект параллакса, который был на первом экране iOS 7, поэтому, если вы наклоняете телефон, вы можете видеть фон.

Как я могу реализовать этот эффект в своем собственном приложении?

Теги:
parallax

9 ответов

265
Лучший ответ

В iOS 7 Apple представила UIMotionEffect, чтобы добавить эффекты движения, связанные с ориентацией пользовательского устройства. Например, чтобы эмулировать эффект параллакса на главном экране, вы можете использовать подкласс UIInterpolationMotionEffect, как описано здесь и здесь, только с несколькими строками кода.

Objective-C

// Set vertical effect
UIInterpolatingMotionEffect *verticalMotionEffect = 
  [[UIInterpolatingMotionEffect alloc] 
  initWithKeyPath:@"center.y"
             type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
verticalMotionEffect.minimumRelativeValue = @(-10);
verticalMotionEffect.maximumRelativeValue = @(10);

// Set horizontal effect 
UIInterpolatingMotionEffect *horizontalMotionEffect = 
  [[UIInterpolatingMotionEffect alloc] 
  initWithKeyPath:@"center.x"     
             type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
horizontalMotionEffect.minimumRelativeValue = @(-10);
horizontalMotionEffect.maximumRelativeValue = @(10);

// Create group to combine both
UIMotionEffectGroup *group = [UIMotionEffectGroup new];
group.motionEffects = @[horizontalMotionEffect, verticalMotionEffect];

// Add both effects to your view
[myBackgroundView addMotionEffect:group];

Swift (благодаря @Лукасу):

// Set vertical effect
let verticalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.y",
type: .TiltAlongVerticalAxis)
verticalMotionEffect.minimumRelativeValue = -10
verticalMotionEffect.maximumRelativeValue = 10

// Set horizontal effect
let horizontalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.x",
    type: .TiltAlongHorizontalAxis)
horizontalMotionEffect.minimumRelativeValue = -10
horizontalMotionEffect.maximumRelativeValue = 10

// Create group to combine both
let group = UIMotionEffectGroup()
group.motionEffects = [horizontalMotionEffect, verticalMotionEffect]

// Add both effects to your view
myBackgroundView.addMotionEffect(group)

Кроме того, вы можете найти кучу библиотек, чтобы сделать это проще или добавить эту функцию в более старые версии iOS:

Поделиться
  • 2
    NGAParallaxMotion предназначен для iOS 7+, а не для более старых версий iOS. Он предоставляет категорию для UIView, позволяя вам установить значение .parallaxIntensity, устанавливая параметры UIMotionEffect с помощью одной строки кода.
  • 2
    Спасибо! Я обновил ответ, чтобы включить поддерживаемые версии и требования.
Показать ещё 9 комментариев
16

Перевод на быстрый, если кто-то ленив. Прошу проголосовать @veducm answer, если вы нашли это полезное

@IBOutlet var background : UIImageView!

func parallaxEffectOnBackground() {
    let relativeMotionValue = 50
    var verticalMotionEffect : UIInterpolatingMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.y",
        type: .TiltAlongVerticalAxis)
    verticalMotionEffect.minimumRelativeValue = -relativeMotionValue
    verticalMotionEffect.maximumRelativeValue = relativeMotionValue

    var horizontalMotionEffect : UIInterpolatingMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.x",
        type: .TiltAlongHorizontalAxis)
    horizontalMotionEffect.minimumRelativeValue = -relativeMotionValue
    horizontalMotionEffect.maximumRelativeValue = relativeMotionValue

    var group : UIMotionEffectGroup = UIMotionEffectGroup()
    group.motionEffects = [horizontalMotionEffect, verticalMotionEffect]

    self.background.addMotionEffect(group)
}
Поделиться
  • 0
    Спасибо @Lucas! Я обновил свой ответ, чтобы включить образец Swift тоже. Это основано на этом. Не стесняйтесь просматривать его и вносить любые необходимые изменения.
7

Решение @veducm может быть немного короче. Группа UIMotionEffectGroup для своих движений x и y устарела, если вы добавили эффекты движения x и y отдельно.

UIInterpolatingMotionEffect *motionEffect;
motionEffect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.x"
                                                               type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
motionEffect.minimumRelativeValue = @(-25);
motionEffect.maximumRelativeValue = @(25);
[bgView addMotionEffect:motionEffect];

motionEffect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.y"
                                                               type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
motionEffect.minimumRelativeValue = @(-25);
motionEffect.maximumRelativeValue = @(25);
[bgView addMotionEffect:motionEffect];
Поделиться
  • 2
    Точно так же, если кто-то использует эту укороченную версию, первый эффект движения должен иметь type UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis а не UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis как в выложенном коде
  • 1
    @BooHoo Добавление их в группу устарело? Где ты это видишь? На момент написания этой статьи в документах Apple не было ничего устаревшего. Целью их группировки является повышение производительности. Все эффекты в группе оказываются один раз. Когда вы применяете их отдельно, они должны быть представлены отдельно. Не стесняйтесь исправлять меня, если я ошибаюсь (и укажите мне на документацию Apple на это.)
6 
const static CGFloat kCustomIOS7MotionEffectExtent = 10.0; 

- (void)applyMotionEffects:(UIView *YOUR_VIEW) {
     if (NSClassFromString(@"UIInterpolatingMotionEffect")) {
         UIInterpolatingMotionEffect *horizontalEffect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.x"
                                                                                                        type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
         horizontalEffect.minimumRelativeValue = @(-kCustomIOS7MotionEffectExtent);
         horizontalEffect.maximumRelativeValue = @( kCustomIOS7MotionEffectExtent);
         UIInterpolatingMotionEffect *verticalEffect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.y"
                                                                                                      type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
         verticalEffect.minimumRelativeValue = @(-kCustomIOS7MotionEffectExtent);
         verticalEffect.maximumRelativeValue = @( kCustomIOS7MotionEffectExtent);
         UIMotionEffectGroup *motionEffectGroup = [[UIMotionEffectGroup alloc] init];
         motionEffectGroup.motionEffects = @[horizontalEffect, verticalEffect]; 
         [YOUR_VIEW addMotionEffect:motionEffectGroup];
     }
}
Поделиться
  • 1
    @Rob по вашему предложению обновил ответ
4

Вот простая категория для интеграции эффекта на iOs7 +:

NSString *const centerX = @"center.x";
NSString *const centerY = @"center.y";

//#define IS_OS_7_OR_LATER    ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)

@implementation UIView (TLMotionEffect)

- (void)addCenterMotionEffectsXYWithOffset:(CGFloat)offset {

//    if(!IS_OS_7_OR_LATER) return;
    if(floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) return;

    UIInterpolatingMotionEffect *xAxis;
    UIInterpolatingMotionEffect *yAxis;

    xAxis = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:centerX type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
    xAxis.maximumRelativeValue = @(offset);
    xAxis.minimumRelativeValue = @(-offset);

    yAxis = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:centerY type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
    yAxis.minimumRelativeValue = @(-offset);
    yAxis.maximumRelativeValue = @(offset);

    UIMotionEffectGroup *group = [[UIMotionEffectGroup alloc] init];
    group.motionEffects = @[xAxis, yAxis];

    [self addMotionEffect:group];
}

@end

https://github.com/jvenegas/TLMotionEffect

Поделиться
  • 1
    Хотя эта ссылка может ответить на вопрос, лучше включить здесь основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными в случае изменения связанной страницы.
  • 0
    Здесь будет сложно интегрировать весь проект github.
Показать ещё 1 комментарий
4

UIMotionEffect предоставляет бесплатную реализацию параллакса на iOS 7.

http://www.teehanlax.com/blog/introduction-to-uimotioneffect/

https://github.com/michaeljbishop/NGAParallaxMotion позволяет просто установить интенсивность параллакса.

Поделиться
3

Это поможет кому-то, кто хочет реализовать параллакс для tableView или collectionView.

  • сначала создайте ячейку для просмотра таблицы и поместите в нее изображение.

  • установите высоту изображения немного больше высоты ячейки. если высота ячейки = 160, высота изображения должна быть 200 (чтобы сделать эффект параллакса, и вы можете соответствующим образом изменить его)

  • поместите эту две переменные в ваш viewController или любой класс, в котором расширен делегат tableView

let imageHeight:CGFloat = 150.0
let OffsetSpeed: CGFloat = 25.0
  • добавьте следующий код в тот же класс
 func scrollViewDidScroll(scrollView: UIScrollView) {
    //  print("inside scroll")

    if let visibleCells = seriesTabelView.visibleCells as? [SeriesTableViewCell] {
        for parallaxCell in visibleCells {
            var yOffset = ((seriesTabelView.contentOffset.y - parallaxCell.frame.origin.y) / imageHeight) * OffsetSpeedTwo
            parallaxCell.offset(CGPointMake(0.0, yOffset))
        }
    }
}

  • где seriesTabelView - это мой UItableview

  • и теперь позволяет перейти к ячейке этого tableView и добавить следующий код

func offset(offset: CGPoint) {
        posterImage.frame = CGRectOffset(self.posterImage.bounds, offset.x, offset.y)
    }
  • были posterImage - мой UIImageView

Если вы хотите реализовать это в collectionView, просто измените таблицуView vairable на переменную collectionView

и это. Я не уверен, что это лучший способ. но это работает для меня. надеюсь, что это сработает и для вас. и дайте мне знать, если есть какие-либо проблемы

Поделиться
2

Действительно, плохая простая, чтобы сделать так, почему относится к сложному коду. просто попробуйте. Рабочая

Взгляните на изображение, чтобы точно посмотреть размер изображения. по умолчанию alpha для представления set 0.

//MARK: Scroll View Delegate methods
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

NSLog(@"X: %f Y: %f",scrollView.contentOffset.x,scrollView.contentOffset.y);

CGFloat scrollY = _mainScrollView.contentOffset.y;
CGFloat height = _alphaView.frame.size.height;

CGFloat alphaMonitor = scrollY/height;

_alphaView.alpha = alphaMonitor;
}
Поделиться
-2

Быстрый перевод:

// Set vertical effect
let verticalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.y", type: .TiltAlongVerticalAxis)
verticalMotionEffect.minimumRelativeValue = -value
verticalMotionEffect.maximumRelativeValue = value

// Set vertical effect
let horizontalMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.x", type: .TiltAlongHorizontalAxis)
verticalMotionEffect.minimumRelativeValue = -value
verticalMotionEffect.maximumRelativeValue = value

let group = UIMotionEffectGroup()
group.motionEffects = [horizontalMotionEffect, verticalMotionEffect]
self.motionEffect = group
self.addMotionEffect(group)
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню