最近公司经营了一个新的项目,项目的宗旨是做一个交友的app,在项目开发过程中本人负责个人主页等相关页面。
因为是一个娱乐性的交友app,免不了界面要鲜艳、有吸引力,尤其是在个人主页这一块,要多一些小动画,可以让个人主页免于显得过于单调。
由于本项目的个人主页设计类似于微博的的个人主页,所以就擅自作主加了类似其的动画。即点击头像可以放大。
刚开始做动画的时候代码的逻辑是这样的,请看一下代码:
- (void)showBigImgAnimation{
/*隐藏子控件*/
[self animationHideView];
[UIView animateWithDuration:.25 animations:^{
_userHeadImgVIew.x = 0;
_userHeadImgVIew.y = 0;
_userHeadImgVIew.width = SCREEN_WIDTH;
_userHeadImgVIew.height = HeadViewDefaultH + tabH;
} completion:^(BOOL finished) {
isHaveScaled = YES;
}];
}
- (void)hideBigImgAnimation{
/*显示子控件*/
[self animationShowView];
[UIView animateWithDuration:.25 animations:^{
_userHeadImgVIew.x = initX;
_userHeadImgVIew.y = initY;
_userHeadImgVIew.width = initImgW;
_userHeadImgVIew.height = initImgH;
} completion:^(BOOL finished) {
isHaveScaled = NO;;
}];
}
弄好了之后发现动画不是预料中的样子,各种调试之后还是没有达到理想的效果。最后突然想到我的界面是用xib拖拽的,而且添加了约束,就把相关的约束条件链接到 .m文件里。然后在动画中修改约束。结果真的成功了。成功之后的代码如下所示:
- (void)showBigImgAnimation{
_userHeadImgVIew.layer.cornerRadius =0;
_userHeadImgVIew.layer.borderWidth = 0;
_userHeadImgVIew.layer.borderColor = [[UIColor clearColor] CGColor];
_userHeadImgVIew.layer.masksToBounds = YES;
//隐藏控件
[self animationHideView];
_imgViewWidth.constant = SCREEN_WIDTH;
_imgViewHeight.constant = HeadViewDefaultH + tabH;
_imgViewTopMargin.constant = 0;
[UIView animateWithDuration:.3 animations:^{
[_userHeadImgVIew.superview layoutIfNeeded];
} completion:^(BOOL finished) {
isHaveScaled = YES;
[self showSaveImgView];
}];
}
- (void)hideBigImgAnimation{
[self hideSaveImgView];
_imgViewWidth.constant = initImgW;
_imgViewHeight.constant = initImgH;
_imgViewTopMargin.constant = initImgTopMarginValue;
[UIView animateWithDuration:.3 animations:^{
[_userHeadImgVIew.superview layoutIfNeeded];
} completion:^(BOOL finished) {
isHaveScaled = NO;
_userHeadImgVIew.layer.cornerRadius = _userHeadImgVIew.width/2;
_userHeadImgVIew.layer.borderWidth = 2.5;
_userHeadImgVIew.layer.borderColor = [[UIColor colorWithHexString:@"#ffffff" withAlpha:0.5] CGColor];
_userHeadImgVIew.layer.masksToBounds = YES;
[self animationShowView];
}];
}
至于为什么用[_useHeadImgView.superView layoutIfNeeded];
可以查阅一下layoutIfNeeded的调用机制。有空的话我也会认真学习一下layoutIfNeeded调用机制 并分享给大家