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

Question

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

为了更精确，想象一个空的温度计，当您按下按钮时，温度计从底部到顶部充满。但我想要这个动画。

你知道如何实现吗？

谢谢!

Answer 1

您可以通过将第二个 View 作为 轻松做到这一点。面具在 ImageView 上使用您的图像。然后你可以申请简单的规模 变换和动画它显示图像。或者，您可以为帧更改设置动画。效果会一样。我附上了 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

我用于案例二的代码:

@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

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