配合Masonry进行简单动画

作者: shaneZhang 分类: ios技术 发布时间: 2016-01-07 12:54

案例展示:

初始的autolayout设置:

    [self.animationView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.mas_equalTo(self.mas_centerX).with.offset(0);
        make.top.mas_equalTo(self.mas_top).with.offset(-self.viewHeight);
        make.width.equalTo(@286);
        make.height.equalTo(@(self.viewHeight));
    }];

在需要进行加入动画的地方:

- (void)startAnimation
{
    self.isAnimating = YES;
    [self.animationView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.mas_top).with.offset(0);
    }];
    [self setNeedsUpdateConstraints];
    [self updateConstraintsIfNeeded];
    [UIView animateWithDuration:0.33f animations:^{
        [self layoutIfNeeded];
    } completion:^(BOOL finished) {
        [self upAnimationView];
    }];
}

- (void)upAnimationView
{
    [self.animationView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.mas_top).with.offset(-20);
    }];
    [self setNeedsUpdateConstraints];
    [self updateConstraintsIfNeeded];

    [UIView animateWithDuration:0.33f animations:^{
        [self layoutIfNeeded];
    } completion:^(BOOL finished) {
        [self downAnimationView];
    }];
}

- (void)downAnimationView
{
    [self.animationView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.mas_top).with.offset(0);
    }];
    [self setNeedsUpdateConstraints];
    [self updateConstraintsIfNeeded];

    [UIView animateWithDuration:0.33f animations:^{
        [self layoutIfNeeded];
    } completion:^(BOOL finished) {
        [self showTopCarView];
    }];
}

- (void)showTopCarView
{
    [UIView animateWithDuration:0.33f animations:^{
        self.topCarImageView.hidden = NO;
        self.topFlowerImageView.hidden = NO;
    } completion:^(BOOL finished) {
        [self showTopCloudImageView];
    }];
}


- (void)showTopCloudImageView
{
    [UIView animateWithDuration:0.33f animations:^{
        self.topCloudImageView.hidden = NO;
    } completion:^(BOOL finished) {
        self.isAnimating = NO;
    }];
}

这样利用连续的一个动画,可以制作一个简单的动画效果

carAnimation

如果觉得我的文章对您有用,请随意打赏。如果有其他问题请联系博主QQ(909491009)或者下方留言!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注