使用动画显示图像的部分内容

Question

我正在使用iOS中的图像。因此，当用户按下“按下”按钮时，我希望图像看起来从底部到顶部填满。

为了更精确，想象一下空的温度计，当你按下一个按钮时，温度计会从底部到顶部填满。但我希望这能用动画。

你知道如何实现它吗？

谢谢！

Answer 1

您可以通过在图像视图上使用第二个视图充当蒙版来轻松完成此操作。然后，您可以应用简单的比例变换并为其显示动画以显示图像。或者，您可以为帧更改设置动画。效果会一样。我附加了2种方法的代码。

以下是我在两种情况下取​​得的成就：

我用于案例I的代码：

@interface MyViewController ()
@property(nonatomic, strong) UIImageView *imageView;
@property(nonatomic, strong) UIView *maskView;
@end

@implementation MyViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    _imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Image"]];
    _imageView.center = self.view.center;
    _imageView.layer.anchorPoint = CGPointMake(0.5, 0.0);

    [self.view addSubview:_imageView];

    _maskView = [[UIView alloc] initWithFrame:_imageView.frame];
    _maskView.backgroundColor = [UIColor whiteColor];
    _maskView.center = self.view.center;
    _maskView.layer.anchorPoint = CGPointMake(0.5, 0.0);

    [self.view addSubview:_maskView];
}

- (IBAction)buttonTapped:(id)sender
{
    [UIView animateWithDuration:1.0f
                     animations:^
    {
        _maskView.transform = CGAffineTransformMakeScale(1.0, 0.0001);
    }];
}

@end

我用于案例II的代码：

@interface MyViewController ()
@property(nonatomic, strong) UIImageView *imageView;
@property(nonatomic, assign) CGFloat height;
@end

@implementation MyViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    _imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Image"]];
    _imageView.center = self.view.center;
    _imageView.contentMode = UIViewContentModeBottom;

    _height = CGRectGetHeight(_imageView.bounds);

    CGRect frame = _imageView.frame;
    frame.size.height = 0.00001;
    frame.origin.y += _height;

    _imageView.frame = frame;
    _imageView.clipsToBounds = YES;

    [self.view addSubview:_imageView];
}

- (IBAction)buttonTapped:(id)sender
{
    [UIView animateWithDuration:1.0f
                     animations:^
    {
        CGRect frame = _imageView.frame;
        frame.size.height = _height;
        frame.origin.y -= _height;

        _imageView.frame = frame;
    }];
}

@end

在这两种情况下，最终效果都相同。

Answer 2

您可以通过更改动画块中视图的框架来完成此操作。例如，如果myView是100x100大小的视图：

myView.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height, 0, 0);

[UIView animateWithDuration:1.0f
                     animations:^
{
    myView.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height, 100, 100);
}];

此示例应放大屏幕左下角的100x100视图，使其看起来从下往上显示。