我的视图控制器中的 iOS 7 视差效果

iOS 7 parallax effect in my view controller

提问by Dan Fabulich

I'm developing an app for iOS 7 in Objective-C. I've got a screen in my app with a few buttons and a pretty background image. (It's a simple xib with UIButtonson top of a UIImageView.)

我正在用 Objective-C 为 iOS 7 开发一个应用程序。我的应用程序中有一个屏幕，上面有几个按钮和漂亮的背景图片。（这是一个简单的 xib，UIButtons在 . 之上UIImageView。）

I was thinking that it'd be cool if those buttons had the parallax effect that the iOS 7 home screen has, so if you tilt the phone you could see the background.

我想如果这些按钮具有 iOS 7 主屏幕具有的视差效果会很酷，所以如果你倾斜手机，你可以看到背景。

How can I implement that effect in my own app?

如何在我自己的应用程序中实现这种效果？

回答by veducm

With iOS 7, Apple introduced UIMotionEffectto add Motion effects that are related to the orientation of the user's device. For example, to emulate the parallax effect on the home screen, you can use the subclass UIInterpolationMotionEffect, as explained hereand here, just with a few lines of code.

在 iOS 7 中，Apple 引入UIMotionEffect了添加与用户设备方向相关的运动效果。例如，要在主屏幕上模拟视差效果，您可以使用子类UIInterpolationMotionEffect，如此处和此处所述，只需几行代码即可。

Objective-C:

目标-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(Thanks to @Lucas):

斯威夫特（感谢@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)

Also, you can find a bunch of libraries to do this easier or to add this functionality to older iOS versions:

此外，您可以找到一堆库来更轻松地完成此操作或将此功能添加到较旧的 iOS 版本中：

• NGAParallaxMotion(requires iOS 7).
• DVParallaxView(requires iOS 5.0or higher and ARC).
• MKParallaxView(tested with iOS 6.0, requires ARC).
• UIView-MWParallax(tested with iOS 6.1, requires ARC).

• NGAParallaxMotion（需要iOS 7）。
• DVParallaxView（需要iOS 5.0或更高版本和ARC）。
• MKParallaxView（使用iOS 6.0测试，需要ARC）。
• UIView-MWParallax（使用iOS 6.1测试，需要ARC）。

回答by Lucas

Translated to swift in case anyone is lazy. Please vote @veducm answerup if you found this useful

翻译为 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)
}

回答by XOXO

@veducm's solution can be a little shorter. The UIMotionEffectGroup for its x and y motion is obsolete if you add the the x and y-axis motionEffects separately.

@veducm 的解决方案可以短一点。如果单独添加 x 和 y 轴运动效果，则用于 x 和 y 运动的 UIMotionEffectGroup 已过时。

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];

回答by damithH

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];
     }
}

回答by Bejil

Here is an easy category to integrate the effect on iOs7+ :

这是一个简单的类别，可以在 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

https://github.com/jvenegas/TLMotionEffect

回答by Dan Fabulich

UIMotionEffect provides a free parallax implementation on iOS 7.

UIMotionEffect 在 iOS 7 上提供了一个免费的视差实现。

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

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

https://github.com/michaeljbishop/NGAParallaxMotionlets you just set the parallax intensity.

https://github.com/michaeljbishop/NGAParallaxMotion可让您设置视差强度。

回答by Muneef M

This will help someone who is looking to implement parallax for tableView or collectionView.

这将帮助那些希望为 tableView 或 collectionView 实现视差的人。

• first of all create the cell for the tableview and put the image view in it.

• set the image height slightly more than the cell height. if cell height = 160 let the image height be 200 (to make the parallax effect and you can change it accordingly)

• put this two variable in your viewController or any class where your tableView delegate is extended

• 首先为 tableview 创建单元格并将图像视图放入其中。

• 将图像高度设置为略高于单元格高度。如果单元格高度 = 160，则让图像高度为 200（为了制作视差效果，您可以相应地更改它）

• 将这两个变量放在您的 viewController 或任何扩展 tableView 委托的类中

let imageHeight:CGFloat = 150.0
let OffsetSpeed: CGFloat = 25.0

• add the following code in the same class

• 在同一个类中添加以下代码

 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))
        }
    }
}

• where seriesTabelView is my UItableview

• and now lets goto the cell of this tableView and add the following code

• 其中 seriesTabelView 是我的 UItableview

• 现在让我们转到此 tableView 的单元格并添加以下代码

func offset(offset: CGPoint) {
        posterImage.frame = CGRectOffset(self.posterImage.bounds, offset.x, offset.y)
    }

• were posterImage is my UIImageView

• 是posterImage 是我的UIImageView

If you want to implement this to collectionView just change the tableView vairable to your collectionView variable

如果您想将此实现到 collectionView 只需将 tableView vairable 更改为您的 collectionView 变量

and thats it. i am not sure if this is the best way. but it works for me. hope it works for you too. and let me know if there is any problem

就是这样。我不确定这是否是最好的方法。但它对我有用。希望它也适用于你。如果有任何问题，请告诉我

回答by Mr.Javed Multani

Really dam easyto do so why refers complex code. just try it. Working

真的很容易这样做为什么要引用复杂的代码。就试一试吧。在职的

Take a view on imageview exactly size of image view. by default alpha for view set 0.

在 imageview 上查看图像视图的大小。默认情况下，视图集 0 的 alpha 值。

//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;
}

回答by mukaissi

Swift translation:

迅捷翻译：

// 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)