How can I make blind down effect to an image in IOS?

Question

I want that, when I roll the iPad, the image blinds up/down. Effect should be like

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

How can I do that?

I tried Reflection example of Apple but I had performance issues since I should redraw image in every gyroscope action.

Here is the Code:

- (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;
}

I don't know what you've done so far - but have you *looked* at the Core Animation documentation? — Abizern, Dec 20 '11 at 20:01

score 1 · Accepted Answer · answered Dec 20 '11 at 20:09

One way to do this is to use another covering view that gradually changes height by animation;

If you have a view called theView that you want to cover, try something like this to reveal theView underneath a cover view:

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
                 ];

This should cover the view and then reveal it by changing the frame ov the cover, moving it down while changing the height.

I haven't tried the code, but this is one direction you can take to create the blind effect. I have used similar code often, and it is very easy to work with. Also, it doesn't require knowing core animation.

but it is an animation. I don't want to animate. What I want is, when I roll the device, with the help of the gyroscope, calculating a height, and redraw the image with the mask. — Burak, Dec 20 '11 at 20:35
I am so sorry. The only thing that I want is mask an image with alpha gradient, and changing the height of this gradient with the roll action. So it will be like a lenticular photo. — Burak, Dec 20 '11 at 21:32

How can I make blind down effect to an image in IOS?

1 Answers1