【问题标题】:How can I make blind down effect to an image in IOS?如何在IOS中对图像进行盲目效果?
【发布时间】:2011-12-20 19:44:51
【问题描述】:

我想要这样,当我滚动 iPad 时,图像会向上/向下显示。效果应该是这样的

http://madrobby.github.com/scriptaculous/combination-effects-demo/Blind Down 演示。

我该怎么做?

我尝试了 Apple 的反射示例,但我遇到了性能问题,因为我应该在每个陀螺仪动作中重绘图像。

代码如下:

- (void)viewDidLoad
{
[super viewDidLoad];
tmp = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"galata2.jpg"]];
// Do any additional setup after loading the view, typically from a nib.
NSUInteger reflectionHeight = imageView1.bounds.size.height * 1;


imageView1 =  [[UIImageView alloc] init];
imageView1.image = [UIImage imageNamed:@"galata1.jpg"];
[imageView1 sizeToFit];
[self.view addSubview:imageView1];

imageView2 =  [[UIImageView alloc] init];
//UIImageView *tmp = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"galata2.jpg"]];
imageView2.image = [UIImage imageNamed:@"galata2.jpg"];

[imageView2 sizeToFit];



[self.view addSubview:imageView2];

motionManager = [[CMMotionManager alloc] init];
motionManager.gyroUpdateInterval = 1.0/10.0;
[motionManager startDeviceMotionUpdatesToQueue:[NSOperationQueue currentQueue]
                                   withHandler: ^(CMDeviceMotion *motion, NSError *error){

                                       [self      performSelectorOnMainThread:@selector(handleDeviceMotion:) withObject:motion    waitUntilDone:YES];

                                   }];

}

////

- (void)handleDeviceMotion:(CMDeviceMotion*)motion{
CMAttitude *attitude = motion.attitude;
int rotateAngle = abs((int)degrees(attitude.roll));
//CMRotationRate rotationRate = motion.rotationRate;
NSLog(@"rotation rate = [Pitch: %f, Roll: %d, Yaw: %f]", degrees(attitude.pitch), abs((int)degrees(attitude.roll)), degrees(attitude.yaw));
int section = (int)(rotateAngle / 30);
int x = rotateAngle % 30;

NSUInteger reflectionHeight = (1024/30)*x;
NSLog(@"[x = %d]", reflectionHeight);
imageView2.image = [self reflectedImage:tmp withHeight:reflectionHeight];   
}

////

- (UIImage *)reflectedImage:(UIImageView *)fromImage withHeight:(NSUInteger)height
{
if(height == 0)
    return nil;    


// create a bitmap graphics context the size of the image
CGContextRef mainViewContentContext = MyCreateBitmapContext(fromImage.bounds.size.width, fromImage.bounds.size.height);


// create a 2 bit CGImage containing a gradient that will be used for masking the 
// main view content to create the 'fade' of the reflection.  The CGImageCreateWithMask
// function will stretch the bitmap image as required, so we can create a 1 pixel wide gradient
CGImageRef gradientMaskImage = CreateGradientImage(1, kImageHeight);

// create an image by masking the bitmap of the mainView content with the gradient view
// then release the  pre-masked content bitmap and the gradient bitmap
CGContextClipToMask(mainViewContentContext, CGRectMake(0.0, 0.0, fromImage.bounds.size.width,height), gradientMaskImage);
CGImageRelease(gradientMaskImage);

// In order to grab the part of the image that we want to render, we move the context origin to the
// height of the image that we want to capture, then we flip the context so that the image draws upside down.
//CGContextTranslateCTM(mainViewContentContext, 0.0,0.0);
//CGContextScaleCTM(mainViewContentContext, 1.0, -1.0);


// draw the image into the bitmap context
CGContextDrawImage(mainViewContentContext, CGRectMake(0, 0, fromImage.bounds.size.width, fromImage.bounds.size.height), fromImage.image.CGImage);

// create CGImageRef of the main view bitmap content, and then release that bitmap context
CGImageRef reflectionImage = CGBitmapContextCreateImage(mainViewContentContext);
CGContextRelease(mainViewContentContext);

// convert the finished reflection image to a UIImage 
UIImage *theImage = [UIImage imageWithCGImage:reflectionImage];

// image is retained by the property setting above, so we can release the original
CGImageRelease(reflectionImage);

return theImage;
}

【问题讨论】:

  • 我不知道你到目前为止做了什么 - 但你有没有看过 Core Animation 文档?

标签: ios core-graphics gradient gyroscope


【解决方案1】:

一种方法是使用另一个通过动画逐渐改变高度的覆盖视图;

如果您想要覆盖一个名为 theView 的视图,请尝试使用以下方法在封面视图下方显示视图:

UIView *coverView = [UIView alloc] initWithFrame:theView.frame];
coverView.backgroundcolor = [UIColor whiteColor];
[theView.superView addSubView:coverView];  // this covers theView, adding it to the same view that the view is contained in;
CGRect newFrame = theView.frame;
newFrame.size.height = 0;
newFrame.origin.y = theView.origin.y + theView.size.height;
[UIView animateWithDuration:1.5
                      delay: 0.0
                    options: UIViewAnimationOptionRepeat
                 animations:^{
                     coverView.frame = newFrame;
                 }
                 completion:nil
                 ];

这应该覆盖视图,然后通过改变封面上的框架来显示它,在改变高度的同时向下移动它。

我没有尝试过代码,但这是您可以用来创建盲目效果的一个方向。我经常使用类似的代码,而且很容易使用。此外,它不需要了解核心动画。

【讨论】:

  • 但它是动画。我不想动画。我想要的是,当我滚动设备时,在陀螺仪的帮助下,计算高度,并用蒙版重新绘制图像。
  • 我很抱歉。我唯一想要的是用 alpha 渐变遮罩图像,并通过滚动动作改变渐变的高度。所以它就像一张柱状照片。
  • 刚好喜欢动画!
猜你喜欢
  • 1970-01-01
  • 2012-08-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-02-14
  • 1970-01-01
  • 2012-05-12
相关资源
最近更新 更多