之前做过可以使用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;
}];
}
以上就是关于柱状体绘图和动画的效果