iOS 經常使用動畫之【 定點縮放彈窗】利用錨點anchorPoint進行實現(包含完整demo源碼)

@[toc]

前言

iOS開發中經常使用的動畫（定點縮放彈窗）的應用場景：

一、會員詳情的右側下拉操做菜單

二、瀏覽器的右側下拉菜單

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

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)。

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;
}
複製代碼

1.3 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;

        
        
    }];
複製代碼

II、 iOS開發中經常使用的動畫（定點縮放彈窗）

/** 一、點擊彈出按鈕時，陰影alpha由0到1，彈窗的scale由0到1（這裏使用CABasicAnimation） 二、 點擊空白處，再讓陰影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;        
    }];

}

複製代碼

III、 完整demo源碼

iOS開發中經常使用的動畫（定點縮放彈窗）的應用場景：

一、會員詳情的右側下拉操做菜單

二、瀏覽器的右側下拉菜單

三、demo下載地址：https://download.csdn.net/download/u011018979/16092830

see also

• iOS Horizontal Popup View 【 橫向（水平方向）彈出菜單視圖】例子：商品列表支持彈出菜單進行下/上架商品、打印商品價籤、編輯商品信息、同步網店等操做popover

kunnan.blog.csdn.net/article/det…