自定義一個可以動態摺疊的UITAbleViewCell

有稜角的圓發表於2017-06-29
UIView

 看到code 4APP上有一個摺疊的UITAbleViewCell，不過是swift的，所以自己嘗試做一個簡單的可摺疊的UITAbleViewCell

主要實現一個可以摺疊的UITAbleViewCell

效果圖如下：

 

 

用到下面這些知識點：

1.單邊圓角：

我們經常會遇到一些情況需要進行單邊圓角或者邊界線的設定，我簡單封裝了一個類別，github網址

2.錨點的更改

專案中主要圍繞view上邊界進行3d旋轉，所以在動畫之前需要進行錨點的設定。

關於錨點的詳細概念，可以參考我的另一篇部落格：點選這裡

因為錨點改變時，frame也會變動，所以在改變錨點時需要重新設定frame。

我這裡主要用下面的程式碼進行錨點的更改：

- (void)setAnchorPointTo:(CGPoint)point view:(UIView*)view{
    
/*    
 
    CGRect frame = view.frame;
    frame.origin.x+=(point.x - view.layer.anchorPoint.x) * view.frame.size.width;
    frame.origin.y+=(point.y - view.layer.anchorPoint.y) * view.frame.size.height;
    view.frame = frame;
    view.layer.anchorPoint = point;
 
*/
    //和上面登出掉的程式碼一個意思
    view.frame = CGRectOffset(view.frame, (point.x - view.layer.anchorPoint.x) * view.frame.size.width, (point.y - view.layer.anchorPoint.y) * view.frame.size.height);
    view.layer.anchorPoint = point;
}

 

3.旋轉動畫；

關於旋轉動畫，我用的是下面的方法：

[UIView animateWithDuration:0.3 animations:^{
        self.ThirdView.layer.transform=CATransform3DMakeRotation(M_PI_2, 1, 0, 0);
        
    }completion:^(BOOL finished) {


}];

當然你也可以用這個方法：

    CABasicAnimation* rotationAnimation;
    rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    [self setAnchorPointTo:CGPointMake(0.5, 0) view:self.secondView];
    rotationAnimation.fromValue = [NSNumber numberWithFloat: M_PI ];
    rotationAnimation.toValue = [NSNumber numberWithFloat: 0 ];
    rotationAnimation.duration = 3;
    rotationAnimation.cumulative = YES;
    rotationAnimation.repeatCount = 1;

 

4.md34

利用md34屬性進行類似於翻頁效果的設定，關於md34屬性網上有很多文章說明，這裡不做詳細解釋。

具體程式碼為：

//給containView新增偏移
    CATransform3D transfrom3d = CATransform3DIdentity;
    transfrom3d.m34 = -0.002;
    self.InnerView.layer.sublayerTransform = transfrom3d;

5.陰影：

-(void)setShadow:(UIView*)targetView{
    //陰影
    targetView.layer.shadowOpacity = 1.0;// 陰影透明度
    targetView.layer.shadowColor = [UIColor grayColor].CGColor;// 陰影的顏色
    targetView.layer.shadowRadius = 3;// 陰影擴散的範圍控制
    targetView.layer.shadowOffset  = CGSizeMake(3, 3);// 陰影的範圍
}

 Demo地址：點選這裡

有什麼bug，還請告知。

相關文章