Han Pengbo
Han Pengbo

Reputation: 1436

show part of an image in animation

I want to show part of an image in animation.I put a UIImageView in the UIScrollView,and set the UIImageView's frame to (0, 0, imageWidth, imageHeight),and set UIScrollView's frame's width to 0. Here is my code

self.tiaoView.contentSize=CGSizeMake(316, 74);//tiaoView is an outlet of UIScrollView
[UIView animateWithDuration:5 animations:^{
    CGRect rect=self.tiaoView.frame;
    rect.size.width=316;
    self.tiaoView.frame=rect;}];

But when I run it, the whole image is showed immediately, no animation.

Upvotes: 0

Views: 654

Answers (1)

Lukas Kukacka
Lukas Kukacka

Reputation: 7704

You can show only part of an image (top, bottom, left or right) by setting UIImageViews contentMode to any of these

UIViewContentModeTop
UIViewContentModeBottom
UIViewContentModeLeft
UIViewContentModeRight

setting clipsToBounds = YES and changing its frame accordingly. Because frame is animatable property, this combination will allow you to animate showing only part of the image.

For example: If you want to show only 20 points from bottom, set imageView.contentMode = UIViewContentModeBottom; and set its frames height to 20. Image will keep at the bottom edge of UIImageView no matter what frame you set to it.

See example code:

UIImage *image = [UIImage imageNamed:@"myImage"];

UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(0, 0, 0, 40);
imageView.contentMode = UIViewContentModeLeft;
imageView.clipsToBounds = YES;
[self.view addSubview:imageView];

CGRect finalFrame = imageView.frame;
finalFrame.size.width = 40;

[UIView animateWithDuration:1.0 animations:^{
    imageView.frame = finalFrame;
}];

This code animates image by expanding its size from 0 size 40.

Upvotes: 2

Related Questions