iOS为有约束的空间添加动画
2015-12-03 19:16
393 查看
最近公司经营了一个新的项目,项目的宗旨是做一个交友的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调用机制 并分享给大家
因为是一个娱乐性的交友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调用机制 并分享给大家
相关文章推荐
- ios (底层runtime)实现万能跳转
- 常用的iOS开源库
- iOS 点击子视图不让其响应父视图手势
- ios开发之block的使用,及注意事项
- iOS在线安装环境搭建
- iOS常用宏定义
- iOS8--关于regular和compact的理解
- 一切重新开始--一个iOS工程师的工作之旅-001
- iOS用户点击退出按钮,跳到登录界面的代码控制
- iOS开发 @synthesize + @property 用法
- nagios 被监控端一键配置脚本
- iOS 事件处理机制与图像渲染过程
- iOS-数据持久化-第三方框架FMDB的使用
- 项目适配iOS9 遇到的坑坑娃娃
- iOS-cocopods换源
- 一个ios手势密码功能实现
- IOS-TextField控件详解
- 开发讯飞语音插件--iOS
- ios blog收集
- iOS——RSA加密方法