使用 ios 7 视差效果移动图像

Posted 2023-03-17

【中文标题】使用 ios 7 视差效果移动图像

【英文标题】：Moving an image with ios 7 parallax effect

【发布时间】：2014-02-04 05:11:35

【问题描述】：

我刚刚看到 Facebook 的新纸质应用程序，它可以根据视差效果使图像移动。因此，它将图像缩放到全屏，当您倾斜屏幕时，它会将图像滚动到您倾斜的一侧。我已经能够像苹果那样添加视差效果，但不像 Facebook 那样。有没有人知道他们是如何做到这一点的。这是我用于视差的基本代码：

UIInterpolatingMotionEffect *interpolationHorizontal = [[UIInterpolatingMotionEffect alloc]initWithKeyPath:@"center.x" type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
interpolationHorizontal.minimumRelativeValue = @-10.0;
interpolationHorizontal.maximumRelativeValue = @10.0;

UIInterpolatingMotionEffect *interpolationVertical = [[UIInterpolatingMotionEffect alloc]initWithKeyPath:@"center.y" type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
interpolationVertical.minimumRelativeValue = @-10.0;
interpolationVertical.maximumRelativeValue = @10.0;

[self.backgroundView addMotionEffect:interpolationHorizontal];
[self.backgroundView addMotionEffect:interpolationVertical];

【参考方案1】：

更新： 刚刚找到了一个非常好的 3rd 方库来实现这一点，它叫做 CRMotionView，它运行起来非常流畅，你可以修改很多东西。

这里是github链接：https://github.com/chroman/CRMotionView

================================================ ====================================

当我第一次看到 Facebook 纸质应用程序时，我也在想同样的视差。但是在玩了我的代码之后，我认为视差不是我们要寻找的。我可能是错的，但我是从基地开始的，陀螺运动管理器。这是我的示例代码：

     //import the motion manager frame work first
     #import <CoreMotion/CoreMotion.h>

     //then need to add a motionManager
     @property (strong, nonatomic) CMMotionManager *motionManager;

    //you can paste all those codes in view did load
    //i added a scroll view on the view controller nib file
    self.mainScrollView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
    //we don't want it to bounce at each end of the image
    self.mainScrollView.bounces = NO;

    //and we don't want to allow user scrolling in this case
    self.mainScrollView.userInteractionEnabled = NO;

    //set up the image view
    UIImage *image= [UIImage imageNamed:@"YOUR_IMAGE_NAME"];
    UIImageView *movingImageView = [[UIImageView alloc]initWithImage:image];
    [self.mainScrollView addSubview:movingImageView];

    //set up the content size based on the image size
    //in facebook paper case, vertical rotation doesn't do anything
    //so we dont have to set up the content size height
    self.mainScrollView.contentSize = CGSizeMake(movingImageView.frame.size.width, self.mainScrollView.frame.size.height);

    //center the image at intial
    self.mainScrollView.contentOffset = CGPointMake((self.mainScrollView.contentSize.width - self.view.frame.size.width) / 2, 0);

    //inital the motionManager and detec the Gyroscrope for every 1/60 second
    //the interval may not need to be that fast
    self.motionManager = [[CMMotionManager alloc] init];
    self.motionManager.gyroUpdateInterval = 1/60;

    //this is how fast the image should move when rotate the device, the larger the number, the less the roation required.
    CGFloat motionMovingRate = 4;

    //get the max and min offset x value
    int maxXOffset = self.mainScrollView.contentSize.width - self.mainScrollView.frame.size.width;
    int minXOffset = 0;

    [self.motionManager startGyroUpdatesToQueue:[NSOperationQueue currentQueue]
                                withHandler:^(CMGyroData *gyroData, NSError *error) 
         //since our hands are not prefectly steady
         //so it will always have small rotation rate between 0.01 - 0.05
         //i am ignoring if the rotation rate is less then 0.1
         //if you want this to be more sensitive, lower the value here
         if (fabs(gyroData.rotationRate.y) >= 0.1) 
            CGFloat targetX = self.mainScrollView.contentOffset.x - gyroData.rotationRate.y * motionMovingRate;
             //check if the target x is less than min or larger than max
             //if do, use min or max
             if(targetX > maxXOffset)
                   targetX = maxXOffset;
             else if (targetX < minXOffset)
                   targetX = minXOffset;

             //set up the content off
             self.mainScrollView.contentOffset = CGPointMake(targetX, 0);
          
   ];

我在我的设备上对此进行了测试，其工作方式与 facebook 新应用非常相似。

不过，这只是我在半小时内编写的示例代码，可能不是 100% 准确，但希望能给您一些想法。

【讨论】：

感谢您的出色回答，但是当您将设备向右或向左旋转时会发生这种情况，向上和向下呢？我的意思是我们可以看到图像的所有角落，你知道吗？

@Mc.Lover 嗨，我正在度假，没有检查堆栈溢出一点点，我认为这绝对可以用于上下，让我尝试一下并编辑我的收到后回答。

它运行良好，但在控制台中抛出错误：<Error>: ImageIO: CreateMetadataFromXMPBufferInternal Threw error #201 (XML parsing failure)