CALayer畫多邊形柱體

之前做過可以使用Calyer去繪圖，這次使用Calyer直接繪出3D立體的柱狀體；
整體思路如下：首先初始化一個mainalyer作爲主layer，然後在mainlayer上面添加柱狀體的一個一個的界面。由於柱狀體也是規則幾何體，所以我們使用一個界面，通過旋轉可以得到多邊體。最後得到的mainlyer也可以添加手勢，或者動畫等。
代碼如下

self.mainLayer = [CALayer layer];
    self.mainLayer.contentsScale = [UIScreen mainScreen].scale;
    self.mainLayer.frame = self.view.bounds;
    //添加Layer
    [self.view.layer addSublayer:self.mainLayer];
    //四邊形的柱狀體
        //前
        [self addLayer:@[@0,@0,@100,@0,@0,@0,@0]];
        //後
        [self addLayer:@[@0,@0,@(-100),@(M_PI),@0,@0,@0]];
        //左
        [self addLayer:@[@(-100),@0,@0,@(-M_PI_2),@0,@1,@0]];
        //右
        [self addLayer:@[@(100),@0,@0,@(M_PI_2),@0,@1,@0]];

自定義添加一個面的layer方法

-(void)addLayer:(NSArray *)params
{
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.contentsScale = [UIScreen mainScreen].scale;
    gradient.bounds = CGRectMake(0, 0, 200, 200);  //生成的圖像的大小必須是每個面的X/Y/Z的二倍。
    gradient.startPoint = CGPointMake(0, 0);
    gradient.endPoint = CGPointMake(0, 1);
    //定位漸變的位置爲View的中間
    gradient.position = CGPointMake(CGRectGetMidX(self.view.bounds), CGRectGetMidY(self.view.bounds));

    //根據參數對CAlayer進行偏移和旋轉Transform
    CATransform3D transform = CATransform3DMakeTranslation([[params objectAtIndex:0]floatValue], [[params objectAtIndex:1]floatValue], [[params objectAtIndex:2]floatValue]);
    transform = CATransform3DRotate(transform, [[params objectAtIndex:3]floatValue], [[params objectAtIndex:4]floatValue], [[params objectAtIndex:5]floatValue], [[params objectAtIndex:6]floatValue]);

    //設置tranform屬性並把Layer加入到主Layer中
    gradient.transform = transform;
    UIImageView *image = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
    image.backgroundColor = [UIColor clearColor];
    [self.mainLayer addSublayer:gradient];
}

以上就是定義柱狀體的方法，如果需要添加自轉效果。代碼如下：

//動畫
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"sublayerTransform.rotation.y"];
        //從0到360度
        animation.toValue = [NSNumber numberWithFloat:2 * M_PI];
        //間隔3秒
        animation.duration = 12.0;
        //無限循環
        animation.repeatCount = HUGE_VALF;
        //開始動畫
        [self.mainLayer addAnimation:animation forKey:@"rotation"];

如果想添加左右滑動屏幕，柱狀體響應左右滑動一格的話，代碼如下：

#pragma mark 向左滑動瀏覽下一張圖片
-(void)leftSwipe:(UISwipeGestureRecognizer *)gesture
{
    [self transitionAnimation:YES];
}


#pragma mark 向右滑動瀏覽上一張圖片
-(void)rightSwipe:(UISwipeGestureRecognizer *)gesture
{
    [self transitionAnimation:NO];
}
-(void)transitionAnimation:(BOOL)isNext{

    [UIView animateWithDuration:1.5 animations:^{
        CATransform3D transform = CATransform3DIdentity;
        //顯示出立體效果
        transform.m34 = -1.0/500;
        if (isNext) {
            swipNumber --;
        }
        else
        {
            swipNumber ++;
        }
        transform = CATransform3DRotate(transform, swipNumber*M_PI/3, 0, 1, 0);
        self.mainLayer.sublayerTransform = transform;
    }];

}

以上就是關於柱狀體繪圖和動畫的效果