с iOS 7 эффект параллакса на мой взгляд контроллер
Я разрабатываю приложение для iOS 7 в Objective-C. У меня есть экран в моем приложении с несколькими кнопками и красивым фоновым изображением. (Это простой xib с UIButtons
на UIImageView
.)
Я думал, что было бы здорово, если бы эти кнопки имели эффект параллакса, который имеет домашний экран iOS 7, поэтому, если вы наклоните телефон, вы можете увидеть фон.
Как я могу реализовать это в мои собственные приложения?
9 ответов:
С iOS 7, Apple представила
UIMotionEffect
для добавления эффектов движения, связанных с ориентацией устройства пользователя. Например, для эмуляции эффекта параллакса на главном экране можно использовать подклассUIInterpolationMotionEffect
, как пояснил здесь и здесь, только с несколькими строками кода.С:
// 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];
Свифт (спасибо @Lucas):
// 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:
- NGAParallaxMotion (требуется iOS 7).
- DVParallaxView (требуется iOS 5.0 и выше ARC).
- MKParallaxView (проверено с iOS 6.0, требует ARC).
- UIView-MWParallax (проверено с iOS 6.1 требует ARC).
переводится на swift, если кто-то ленив. Пожалуйста, проголосуйте @veducm ответ, Если вы нашли это полезным
@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) }
@ 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];
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]; } }
вот простая категория для интеграции эффекта на 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
UIMotionEffect обеспечивает бесплатную реализацию параллакса на iOS 7.
http://www.teehanlax.com/blog/introduction-to-uimotioneffect/
https://github.com/michaeljbishop/NGAParallaxMotion позволяет просто установить интенсивность параллакса.
Это поможет кому-то, кто хочет реализовать параллакс для tableView или collectionView.
прежде всего создайте ячейку для tableview и поместите в нее изображение.
установите высоту изображения немного больше, чем высота ячейки. если высота ячейки = 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) }
- were posterImage-это мой UIImageView
если вы хотите реализовать это в collectionView просто измените tableView vairable на переменную collectionView
и все. я не уверен, что это лучший способ. но это работает для меня. надеюсь, что это работает для вас тоже. и дайте мне знать, если есть какие-либо проблемы
действительно плотины легко для этого зачем ссылается сложный код. просто попробуй. работающего
возьмите вид на imageview точно размер изображения. по умолчанию Альфа для набора представлений 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; }
Свифт перевод:
// 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)