Masonry布局约束的UIView动画使用方法
2017-03-26 本文已影响199人
justinjing
在没有自动布局之前我们都是用Frame
去布局view
,然后可以对view
做各种动画
- 大小变化(frame)
- 拉伸变化(bounds)
- 中心位置(center)
- 旋转(transform)
- 透明度(alpha)
- 背景颜色(backgroundColor)
- 拉伸内容(contentStretch)
但是有了自动布局之后,之前的方法稍微有所不同, 具体实现如下:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIView *tview = [[UIView alloc] init];
tview.backgroundColor = [UIColor redColor];
[self.view addSubview:tview];
[tview mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(tview.superview).offset(200);
make.left.equalTo(tview.superview).offset(50);
make.right.equalTo(tview.superview).offset(-100);
make.height.equalTo(80);
}];
self.testView = tview;
[self performSelector:@selector(startAnimation) withObject:nil afterDelay:1];
}
- (void)startAnimation{
//重点
[self.testView mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.testView.superview).offset(300);
}];
[UIView animateWithDuration:0.66 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
//重点
[self.testView.superview layoutIfNeeded];
} completion:^(BOOL finished) {
}];
}
从最终效果来看好像没有什么问题,但是注意我们对top
用了mas_updateConstraints
,但是没有uninstall
,这样的话有时候会有约束冲突,保险的是先[self.testViewTop uninstall]
,然后mas_updateConstraints
,具体实现如下:
@property (nonatomic, strong) MASConstraint *testViewTopConst;
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIView *tview = [[UIView alloc] init];
tview.backgroundColor = [UIColor redColor];
[self.view addSubview:tview];
[tview mas_makeConstraints:^(MASConstraintMaker *make) {
self.testViewTopConst = make.top.equalTo(tview.superview).offset(200);//重点
make.left.equalTo(tview.superview).offset(50);
make.right.equalTo(tview.superview).offset(-100);
make.height.equalTo(80);
}];
self.testView = tview;
[self performSelector:@selector(startAnimation) withObject:nil afterDelay:1];
}
- (void)startAnimation{
[self.testViewTopConst uninstall];//重点
[self.testView mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.testView.superview).offset(300);
}];
[UIView animateWithDuration:0.66 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
[self.testView.superview layoutIfNeeded];
} completion:^(BOOL finished) {
}];
}
除过这个方法还有一种更简单,安全的,就是我们把我们需要改变的约束用系统的NSLayoutConstraint
来添加约束,最终只要修改constant
值就行,具体如下:
@property (nonatomic, strong) NSLayoutConstraint *topConst;//重点
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIView *tview = [[UIView alloc] init];
tview.backgroundColor = [UIColor redColor];
[self.view addSubview:tview];
[tview mas_makeConstraints:^(MASConstraintMaker *make) {
//make.top.equalTo(tview.superview).offset(200);
make.left.equalTo(tview.superview).offset(50);
make.right.equalTo(tview.superview).offset(-100);
make.height.equalTo(80);
}];
NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:tview
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:tview.superview
attribute:NSLayoutAttributeTop
multiplier:1
constant:50];
[self.view addConstraint:topConstraint];//重点
self.topConst = topConstraint;//重点
self.testView = tview;
[self performSelector:@selector(startAnimation) withObject:nil afterDelay:1];
}
- (void)startAnimation{
self.topConst.constant = 300;//重点
[UIView animateWithDuration:0.66 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
[self.testView.superview layoutIfNeeded];
} completion:^(BOOL finished) {
}];
}
总结:
- 方法一:直接用
mas_updateConstraints
- 方法二:先
uninstall
,然后mas_updateConstraints
- 方法三; 用系统的
NSLayoutConstraint
添加约束,然后修改constant
值。
建议使用第三种简单,安全