“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 31 天，点击查看活动详情”
前言
Mac 使用 command+option+I 即可打开DevTools
iOS动画小课堂：定点缩放弹窗（利用锚点anchorPoint进行实现）包含完整demo
I 操作技巧
1.1 编辑页面上的任何文本 ✍
在控制台输入document.body.contentEditable="true"开启文本编辑模式，刷新网页可自动退出模式了。
或者document.designMode = 'on'就可以实现对网页的编辑了。
如果你想快速修改一些网页数据，使用这个是最方便的，比什么P图软件都快。
1.2 清空缓存并硬性重新加载
chrome浏览器使用快捷键option+command+i打开开发模式,如果在地址栏右侧的刷新按钮右键选择清空缓存并硬性重新加载
1.3 Command 菜单
Cmd + Shift + P
截图包含滚动条在内的所有页面内容
Capture full size screenshot（并不只是页面可视区域）
II iOS动画小课堂：定点缩放弹窗（利用锚点anchorPoint进行实现）包含完整demo
iOS开发中常用的动画（定点缩放弹窗）的应用场景：
- 会员详情的右侧下拉操作菜单
- 浏览器的右侧下拉菜单
demo下载地址：https://download.csdn.net/download/u011018979/16092830 视频地址
基础知识 （CALayer）：
每一个UIView内部都默认关联着一个CALayer, UIView有frame、bounds和center三个属性，CALayer也有类似的属性，分别为frame、bounds、position、anchorPoint。
2.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;
}];
2.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;
}
III iOS开发中常用的动画（定点缩放弹窗）
3.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;
}];
}
3.2 完整demo源码
iOS开发中常用的动画（定点缩放弹窗）的应用场景：
- 会员详情的右侧下拉操作菜单
- 浏览器的右侧下拉菜单
- 原文：kunnan.blog.csdn.net/article/det…
- demo下载地址：https://download.csdn.net/download/u011018979/16092830
see also
iOS Horizontal Popup View 【 横向（水平方向）弹出菜单视图】例子：商品列表支持弹出菜单进行下/上架商品、打印商品价签、编辑商品信息、同步网店等操作popover
