【问题标题】:Moving an image with ios 7 parallax effect使用 ios 7 视差效果移动图像
【发布时间】:2023-03-25 22:30:02
【问题描述】:

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

【问题讨论】:

    标签: ios facebook ios7


    【解决方案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 嗨,我正在度假,没有检查堆栈溢出一点点,我认为这绝对可以用于上下,让我尝试一下并编辑我的收到后回答。
    • 它运行良好,但在控制台中抛出错误:&lt;Error&gt;: ImageIO: CreateMetadataFromXMPBufferInternal Threw error #201 (XML parsing failure)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-18
    • 2012-09-30
    • 1970-01-01
    • 2014-07-23
    • 2019-10-17
    • 1970-01-01
    相关资源
    最近更新 更多