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;
    }];

}

以上就是关于柱状体绘图和动画的效果