iOS利用锚点实现定点缩放弹窗

简介: iOS利用锚点实现定点缩放弹窗

前言

iOS开发中常用的动画(定点缩放弹窗)的应用场景:

1、会员详情的右侧下拉操作菜单

image.png

2、浏览器的右侧下拉菜单

image.png

demo下载地址:https://download.csdn.net/download/u011018979/16092830

原文:https://kunnan.blog.csdn.net/article/details/84618986

I、基础知识 (CALayer)

每一个UIView内部都默认关联着一个CALayer, UIView有frame、bounds和center三个属性,CALayer也有类似的属性,分别为frame、bounds、position、anchorPoint

1.1  anchorPoint

  • anchorPoint就相当于白纸上的图钉,它主要的作用就是用来作为变换的支点,旋转就是一种变换,类似的还有平移、缩放。
  • 在iOS中,anchorPoint点的值是用一种相对bounds的比例值来确定的,在白纸的左上角、右下角,anchorPoint分为为(0,0), (1, 1),也就是说anchorPoint是在单元坐标空间(同时也是左手坐标系)中定义的。类似地,可以得出在白纸的中心点、左下角和右上角的anchorPoint为(0.5,0.5), (0,1), (1,0)。

CGAffineTransformMakeScale & setAnchorPoint 的使用例子

  /*
     (0,0) 为左上角,(0,1) 为左下角,
     (1, 0)右上, (1,1) 右下
     */
    CGRect oldFrame = self.frame ;
    [self.layer setAnchorPoint: CGPointMake(1.0f, 0.0f) ];
    self.frame = oldFrame;
    [UIView animateWithDuration:0.3 animations:^{
//        self.alpha = 0.f;
//        self.tableView.transform = CGAffineTransformMakeScale(0.001f, 0.001f);
        self.transform = CGAffineTransformMakeScale(0.001f, 0.001f);
//        self.tableView.alpha = 0.f;
        self.cover.hidden = YES;
    } completion:^(BOOL finished) {
        self.hidden = YES;
        self.transform = CGAffineTransformIdentity;
    }];

1.2 position

The layer’s position in its superlayer’s coordinate space。

position是layer中的anchorPoint点在superLayer中的位置坐标。

position点是相对suerLayer的,anchorPoint点是相对layer的,两者是相对不同的坐标空间的一个重合点。

  • anchorPoint的默认值为(0.5,0.5),也就是anchorPoint默认在layer的中心点。
  • frame.origin由position和anchorPoint共同决定.

修改anchorPoint,但又不想要移动layer也就是不想修改frame.origin,那么根据前面的公式,就需要position做相应地修改。简单地推导,可以得到下面的公式:

positionNew.x = positionOld.x + (anchorPointNew.x - anchorPointOld.x)  * bounds.size.width  
positionNew.y = positionOld.y + (anchorPointNew.y - anchorPointOld.y)  * bounds.size.height

修改anchorPoint而不想移动layer,在修改anchorPoint后再重新设置一遍frame就可以达到目的,这时position就会自动进行相应的改变。

+ (void) setAnchorPoint:(CGPoint)anchorpoint forView:(UIView *)view{
    CGRect oldFrame = view.frame;
    view.layer.anchorPoint = anchorpoint;
    view.frame = oldFrame;
}

II、 iOS开发中常用的动画(定点缩放弹窗)

image.png

2.1 核心代码

/**
 1、点击弹出按钮时,阴影alpha由0到1,弹窗的scale由0到1(这里使用CABasicAnimation)
2、 点击空白处,再让阴影alpha由1到0,弹窗的scale由1到0(同样使用CABasicAnimation),动画完成后移除阴影和弹窗
 */
- (void)expandView{
    //展示的时候,动画从右上角往左下脚延伸;隐藏的时候,动画从左下脚往右上角收回
    [MemberCardMenuView setAnchorPoint:CGPointMake(0.9f, 0.0f) forView:self];
    self.transform = CGAffineTransformMakeScale(0.001f, 0.001f);
    self.hidden = NO;// 修改为动画, MemberCardMenuView 提供一个动画的实例方法
    self.cover.hidden = NO;
    self.cover.alpha = 0;
    [UIView animateWithDuration:0.3 animations:^{
        self.transform = CGAffineTransformMakeScale(1.f, 1.f);
        self.cover.alpha = 1;
    } completion:^(BOOL finished) {
        self.transform = CGAffineTransformIdentity;
    }];
}
- (void)foldView{
    /*
     (0,0) 为左上角,(0,1) 为左下角,
     (1, 0)右上, (1,1) 右下
     */
    [UIView animateWithDuration:0.3 animations:^{
        self.transform = CGAffineTransformMakeScale(0.001f, 0.001f);
        self.cover.alpha = 0;
    } completion:^(BOOL finished) {
        self.hidden = YES;
        self.cover.hidden = YES;
        self.transform = CGAffineTransformIdentity;        
    }];
}

2.2 完整demo源码

iOS开发中常用的动画(定点缩放弹窗)的应用场景:

1、会员详情的右侧下拉操作菜单

image.png

2、浏览器的右侧下拉菜单

image.png

3、原文:https://kunnan.blog.csdn.net/article/details/84618986 4、demo下载地址:https://download.csdn.net/download/u011018979/16092830csdn 仓库demo地址github 仓库地址

see also

  • iOS Horizontal Popup View 【 横向(水平方向)弹出菜单视图】例子:商品列表支持弹出菜单进行下/上架商品、打印商品价签、编辑商品信息、同步网店等操作popover
目录
相关文章
|
5月前
|
iOS开发
iOS应用内弹窗通知怎么实现?其实很简单,这样,这样,再这样.....你学会了么?
iOS应用内弹窗通知怎么实现?其实很简单,这样,这样,再这样.....你学会了么?
92 0
|
安全 数据安全/隐私保护 iOS开发
iOS小技能:【发红包】使用tweak和lua脚本结合进行实现
我们开发的大部分越狱程序,都是编译成动态链接库(`例如:介绍的越狱程序(Tweak)开发,就是动态链接库。`),然后通过越狱平台的MobileSubstrate(iOS7上叫CydiaSubstrate)来加载进入目标程序(Target),通过对目标程序的挂钩(Hook),来实现相应的功能。
262 0
|
iOS开发
ios实战-runloop实现的同步弹窗
我们知道UIAlertView使用delegate返回数据实现的,使用麻烦,之前介绍过用Block实现的例子《ios实战-使用Block的UIAlertView》 今天介绍使用runloop实现,用return返回点击的结果的方式
90 0
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
219 0
|
存储 数据处理 iOS开发
iOS开发-本地推送实现方法和数据处理方案(二)
iOS开发-本地推送实现方法和数据处理方案(二)
168 0
|
存储 数据处理 iOS开发
iOS开发-本地推送实现方法和数据处理方案(一)
iOS开发-本地推送实现方法和数据处理方案(一)
209 0
|
iOS开发
iOS开发 - 不通过import引入类名实现push或present
iOS开发 - 不通过import引入类名实现push或present
75 0
|
Android开发 iOS开发
iOS开发 - 商品详情页两种分页模式,只提供思路和实现方式。
iOS开发 - 商品详情页两种分页模式,只提供思路和实现方式。
354 0
iOS开发 - 商品详情页两种分页模式,只提供思路和实现方式。
|
存储 安全 iOS开发
iOS开发 - 继udid,Mac地址等一系列唯一标识无效后,如何用KeyChain来实现设备唯一性
iOS开发 - 继udid,Mac地址等一系列唯一标识无效后,如何用KeyChain来实现设备唯一性
397 0
iOS开发 - 继udid,Mac地址等一系列唯一标识无效后,如何用KeyChain来实现设备唯一性
|
Swift 数据安全/隐私保护 iOS开发
iOS开发 - swift通过Alamofire实现https通信
iOS开发 - swift通过Alamofire实现https通信
345 0
iOS开发 - swift通过Alamofire实现https通信