时间:2021-05-20
用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了:
下面开始讲解:
1.首先我们要知道这个页面有几个View?这个页面其实有四个View,self.view , 图中白色VC的View rootVC.view ,白色VC上的maskView maskView , 以及弹出的popView popView 。我们创建它们:
2.然后要添加点击事件,这里为了方便我的弹出事件直接用的touchesBegan
- (void)show{ [[UIApplication sharedApplication].windows[0] addSubview:_popView]; CGRect frame = _popView.frame; frame.origin.y = self.view.frame.size.height/2.0; [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ [_rootview.layer setTransform:[self firstTransform]]; } completion:^(BOOL finished) { [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ [_rootview.layer setTransform:[self secondTransform]]; //显示maskView [_maskView setAlpha:0.5f]; //popView上升 _popView.frame = frame; } completion:^(BOOL finished) { }]; }]; }这里要注意一下的就是popview是添加到window上面的:[[UIApplication sharedApplication].windows[0] addSubview:_popView];
然后关键的layer形变方法来了
- (CATransform3D)firstTransform{ CATransform3D t1 = CATransform3DIdentity; t1.m34 = 1.0/-900; //带点缩小的效果 t1 = CATransform3DScale(t1, 0.95, 0.95, 1); //绕x轴旋转 t1 = CATransform3DRotate(t1, 15.0 * M_PI/180.0, 1, 0, 0); return t1;}- (CATransform3D)secondTransform{ CATransform3D t2 = CATransform3DIdentity; t2.m34 = [self firstTransform].m34; //向上移 t2 = CATransform3DTranslate(t2, 0, self.view.frame.size.height * (-0.08), 0); //第二次缩小 t2 = CATransform3DScale(t2, 0.8, 0.8, 1); return t2;}大家可以看到这,应该可以发现这里其实有两次形变
3.隐藏动画
- (void)close{ _isShow = NO; CGRect frame = _popView.frame; frame.origin.y += self.view.frame.size.height/2.0; [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ //maskView隐藏 [_maskView setAlpha:0.f]; //popView下降 _popView.frame = frame; //同时进行 感觉更丝滑 [_rootview.layer setTransform:[self firstTransform]]; } completion:^(BOOL finished) { [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ //变为初始值 [_rootview.layer setTransform:CATransform3DIdentity]; } completion:^(BOOL finished) { //移除 [_popView removeFromSuperview]; }]; }]; }最后,完整代码,已经封装好了,继承之后使用创建方法就行了
GitHub:Wzxhaha
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了Android自定义view仿iOS弹出框的具体代码,供大家参考,具体内容如下运行效果图自定义对话框的使用,仿照ios。从底部弹出,类似po
通过自定义view实现仿iOS实现滑动两端的点选择时间的效果效果图自定义的view代码publicclassRing_Slide2extendsView{pri
天正在等烟雨,而我在等你,啦啦啦,欢迎关注我的简书,今天分享的是原创的canvas仿写贝塞尔曲线方法。具体如下:效果图:html您的浏览器不支持canvascs
小红书app是小区网购平台,有很多网购达人喜爱去小红书app上购物,那麼,小红书app会出现仿货吗?小红书假货率百分之几?看来下小红书app的主要内容。小红书假
IOS开发仿微信右侧弹出视图实现微信首页的+号,点击之后会弹出一个更多的视图,这个视图如何实现呢?实现该效果可能需要以下技术要点:1.图片拉伸,通过拉伸