简单ui效果实现,模仿腾讯体育点击全屏实现

来源:互联网 发布:java入门到精通 4 pdf 编辑:程序博客网 时间:2024/05/16 10:06

效果描述:

   点击屏幕上某个按钮实现将特定view 变为全屏状态

效果图:

    加载图片失败    

实现原理分析:

     思路一,这个过程实际上涉及到三个变化过程,一个是大小变化(scale),一个是位置变化(tranlation),一个是旋转(rotate),如果单纯使用三个CGAffineTransform变换,三个变换同时使用,效果之间相互影响,有问题。

      思路二,改变其真实的位置和大小 (修改view的frame),然后旋转使用CGAffineTransform变换,相当于先将要变换的view变到想要的全屏大小,并且中心点在屏幕中心,然后旋转90即可。这是比较简单的思路,下面代码即采用这种思路。

代码如下:

/** make specific view to full screen state @param view the specific view @param time animationg duration time */- (void)makeViewFullScreenWithView:(UIView *)view andAniteTime:(CGFloat)time{        CGSize windowSize = [UIScreen mainScreen].bounds.size;        [UIView animateWithDuration:time animations:^{                view.frame = CGRectMake(windowSize.width / 2 - windowSize.height / 2, windowSize.height / 2 - windowSize.width / 2, windowSize.height, windowSize.width);                [view setTransform:CGAffineTransformMakeRotation(M_PI_2)];            }];    }

调用示例

- (IBAction)btnClick:(id)sender{    [self makeViewFullScreenWithView:self.testView andAniteTime:0.5];}



原创粉丝点击