使用ios 7视差效果移动图像 [英] Moving an image with ios 7 parallax effect
问题描述
我刚刚看到Facebook的新的纸张应用程序，使图像基于视差效应移动。因此，将图像缩放到全屏，当您倾斜屏幕时，会将图像滚动到您倾斜的一边。我已经能够添加像苹果这样的视差效果，但不像Facebook有这样的效果。有没有人有任何想法他们如何做到这一点。以下是我用于视差的基本代码：
UIInterpolatingMotionEffect * interpolationHorizontal = [[UIInterpolatingMotionEffect alloc] initWithKeyPath：@center。 xtype：UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
interpolationHorizontal.minimumRelativeValue = @ -10.0;
interpolationHorizontal.maximumRelativeValue = @ 10.0;
UIInterpolatingMotionEffect * interpolationVertical = [[UIInterpolatingMotionEffect alloc] initWithKeyPath：@center.ytype：UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
interpolationVertical.minimumRelativeValue = @ -10.0;
interpolationVertical.maximumRelativeValue = @ 10.0;
[self.backgroundView addMotionEffect：interpolationHorizontal];
[self.backgroundView addMotionEffect：interpolationVertical];
更新：
刚刚找到一个非常好的第三方库来实现这一点，它被称为CRMotionView，它的工作非常顺利，你可以修改很多东西。
这里是github链接： https://github.com/chroman/CRMotionView
=========================================
当我第一次看到Facebook的纸张应用程序时，我正在考虑相同的视差。但是，我的代码玩了一点，我不认为视差是我们寻找的。我可能错了，但是我从基地陀螺仪运动经理中去做了所有这一切。以下是我的示例代码：
//先导入运动管理器框架
#import< CoreMotion / CoreMotion .H>
//然后需要添加一个motionManager
@property（strong，nonatomic）CMMotionManager * motionManager;
//您可以将所有这些代码粘贴到视图中加载
//我在视图控制器nib文件上添加了一个滚动视图
self.mainScrollView.frame = CGRectMake（0 ，0，self.view.frame.size.width，self.view.frame.size.height）;
//我们不希望它在图像的每一端弹起
self.mainScrollView.bounces = NO;
//我们不想允许用户滚动在这种情况下
self.mainScrollView.userInteractionEnabled = NO;
//设置图像视图
UIImage * image = [UIImage imageNamed：@YOUR_IMAGE_NAME];
UIImageView * movingImageView = [[UIImageView alloc] initWithImage：image];
[self.mainScrollView addSubview：movingImageView];
//根据图像大小设置内容大小
//在facebook纸箱中，垂直旋转不执行任何操作
//所以我们不必设置内容大小高度
self.mainScrollView.contentSize = CGSizeMake（movingImageView.frame.size.width，self.mainScrollView.frame.size.height）;
//以int的形式居中图像
self.mainScrollView.contentOffset = CGPointMake（（self.mainScrollView.contentSize.width - self.view.frame.size.width）/ 2，0 ）;
//运动管理器和每1/60秒检测Gyroscrope
//间隔可能不需要那么快
self.motionManager = [[CMMotionManager alloc ] 在里面];
self.motionManager.gyroUpdateInterval = 1/60;
//这是旋转设备时图像应该移动的速度越快，数字越大，所需的时间越短。
CGFloat motionMovingRate = 4;
//获取最大和最小偏移x值
int maxXOffset = self.mainScrollView.contentSize.width - self.mainScrollView.frame.size.width;
int minXOffset = 0;
[self.motionManager startGyroUpdatesToQueue：[NSOperationQueue currentQueue]
withHandler：^（CMGyroData * gyroData，NSError * error）{
//因为我们的手不是稳定的
//所以它总是会有小的旋转率在0.01 - 0.05
//我忽略如果旋转率小于0.1
//如果你希望这更敏感，值
if（fabs（gyroData.rotationRate.y）> = 0.1）{
CGFloat targetX = self.mainScrollView.contentOffset.x - gyroData.rotationRate.y * motionMovingRate;
//检查目标x是否小于或等于max
//如果使用min或max
if（targetX> maxXOffset）
targetX = maxXOffset ;
else if（targetX< minXOffset）
targetX = minXOffset;
//设置内容
self.mainScrollView.contentOffset = CGPointMake（targetX，0）;
}
}];
我在我的设备上测试了这个，工作非常类似于Facebook新的应用程序。
但是，这只是我在半小时内写的示例代码，可能不会100％准确，但希望这会给你一些想法。 b $ b
I just saw Facebook's new paper app that makes images move based on the parallax effect. So it zoom's the image to full screen and when you tilt the screen, it scrolls the image to the side you tilted. I have been able to add the parallax effect like apple has it, but not like how facebook has it. Does anyone have any ideas how they did this. Here is the basic code I was using for parallax:
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];
Update: Just found a very nice 3rd party library for achieving this, it's called CRMotionView, it works very smooth and you can modify a lot of things.
here is the github link: https://github.com/chroman/CRMotionView
==================================================================================
i was thinking the same parallax when i first saw Facebook paper app. but after play with my code for a little bit, i don't think parallax is what we looking for. I could be wrong, but i went to do it all from the base, gyro motion manager. Here is my sample code:
//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);
}
}];
I tested this on my device, worked pretty similar like facebook new app.
However, this is just an example code i wrote in half hour, may not be 100% accurate, but hope this would give you some ideas.
这篇关于使用ios 7视差效果移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
