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


我刚看到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];

4168
2018-02-04 05:11


起源



答案:


更新: 刚刚找到一个非常好的第三方库来实现这一点,它被称为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%准确,但希望这会给你一些想法。


14
2018-02-04 06:46



感谢您的回答,但是当您的设备向右或向左旋转时会发生这种情况,上下是什么?我的意思是我们可以看到图像的所有角落,你知道吗? - Mc.Lover
@ Mc.Lover嗨,我正在度假,没有检查堆栈溢出一点点,我认为这绝对可以上下,让我尝试一下,一旦我拥有它就编辑我的答案。 - Xu Yin
多谢, - Mc.Lover
它运行良好但在控制台中它抛出错误: <Error>: ImageIO: CreateMetadataFromXMPBufferInternal Threw error #201 (XML parsing failure) - Bhavin Ramani


答案:


更新: 刚刚找到一个非常好的第三方库来实现这一点,它被称为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%准确,但希望这会给你一些想法。


14
2018-02-04 06:46



感谢您的回答,但是当您的设备向右或向左旋转时会发生这种情况,上下是什么?我的意思是我们可以看到图像的所有角落,你知道吗? - Mc.Lover
@ Mc.Lover嗨,我正在度假,没有检查堆栈溢出一点点,我认为这绝对可以上下,让我尝试一下,一旦我拥有它就编辑我的答案。 - Xu Yin
多谢, - Mc.Lover
它运行良好但在控制台中它抛出错误: <Error>: ImageIO: CreateMetadataFromXMPBufferInternal Threw error #201 (XML parsing failure) - Bhavin Ramani