El comienzo de las tonterías: usar la transformación de gráficos CATransform3D y algunos métodos de UIScrollView para lograr un efecto de exploración de imágenes hexagonales
1. Visualización de efectos
En segundo lugar, el principio de realización.
1. Agregue seis vistas laterales del prisma hexagonal en una vista base .
2. Ajuste el ángulo de rotación y el valor del eje z de cada lado del prisma hexagonal .
3. La vista base se coloca en UIScrollView , y el valor de la coordenada x de la vista base y el ángulo de rotación con el eje y se establecen al monitorear el deslizamiento de UIScrollView .
3. Código
Crear vista de clase de exploración de imágenes PhotoDrumBrowseView
#import "PhotoDrumBrowseView.h"
@interface PhotoDrumBrowseView()<UIScrollViewDelegate>
@property(nonatomic,strong) UIScrollView * baseScrollView;
@property(nonatomic,strong) UIView * baseView;
@property(nonatomic,assign) CGRect originalBaseViewFrame;
@end
@implementation PhotoDrumBrowseView
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
[self createUI];
[self addDrumBrowseImageView];
}
return self;
}
- (void)createUI{
//滚动视图其实主要是用来通过位置偏移进行计算旋转的角度（通过偏移量与总宽度计算旋转角度与一周2π的比值）
self.baseScrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
self.baseScrollView.showsHorizontalScrollIndicator = NO;
[self addSubview:self.baseScrollView];
CGFloat cellWidth = self.frame.size.width * 5.0 / 6.0;
CGFloat cellHeight = cellWidth / 0.618;
//加载六棱柱六个面
self.baseView = [[UIView alloc] initWithFrame:CGRectMake((self.frame.size.width - cellWidth) / 2.0, (self.frame.size.height - cellHeight) * 1 / 3.0, cellWidth, cellHeight)];
self.originalBaseViewFrame = self.baseView.frame;
[self.baseScrollView addSubview:self.baseView];
}
//创建六棱柱面
- (void)addDrumBrowseImageView{
int num = 6;
//一些角度计算
float radian = (M_PI * 2) / num;
float cellWidth = self.baseView.frame.size.width / 2.0;
float cellHeight = cellWidth / 0.618;
//前后z轴偏移值
float needBFOff = cellWidth * sin(radian);
//左右x轴偏移值
float needLROff = cellWidth / 2.0 * cos(radian) + cellWidth / 2.0;
self.baseScrollView.contentSize = CGSizeMake(self.frame.size.width / 2.0 + self.baseView.frame.size.width * num, 0);
self.baseScrollView.delegate = self;
for (int i = 0; i < num; i ++) {
UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake((self.baseView.frame.size.width - cellWidth) / 2.0, (self.baseView.frame.size.height - cellHeight) / 2.0, cellWidth, cellHeight)];
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.clipsToBounds = YES;
imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"fd%d",i % 3 + 1]];
[self.baseView addSubview:imageView];
switch (i) {
case 0:
{
//前左
imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, -needLROff, 0,needBFOff / 2.0);
imageView.layer.transform = CATransform3DRotate(imageView.layer.transform,- radian, 0, 1, 0);
}
break;
case 1:
{
//前
imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, 0, 0, needBFOff);
}
break;
case 2:
{
//前右
imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, needLROff, 0,needBFOff / 2.0);
imageView.layer.transform = CATransform3DRotate(imageView.layer.transform, radian, 0, 1, 0);
}
break;
case 3:
{
//前右
imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, needLROff, 0, - needBFOff / 2.0);
imageView.layer.transform = CATransform3DRotate(imageView.layer.transform,- radian, 0, 1, 0);
}
break;
case 4:
{
//后
imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, 0, 0, - needBFOff);
}
break;
case 5:
{
//后左
imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, -needLROff, 0,- needBFOff / 2.0);
imageView.layer.transform = CATransform3DRotate(imageView.layer.transform, radian, 0, 1, 0);
}
break;
default:
break;
}
}
//同时设置六个面的透视参数
CATransform3D transformPerspective = CATransform3DIdentity;
transformPerspective.m34 = -1.0f/800;
self.baseView.layer.sublayerTransform = transformPerspective;
}
#pragma mark - 滚动进行图形变换
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
float offset = CGRectGetMinX(self.originalBaseViewFrame);
//通过偏移量计算应该绕y轴旋转的角度
float persent = (scrollView.contentOffset.x - offset) / (scrollView.contentSize.width - offset);
//修改基础视图的frame，保持相对位置不变
self.baseView.frame = CGRectMake(self.originalBaseViewFrame.origin.x + scrollView.contentOffset.x, self.originalBaseViewFrame.origin.y, self.originalBaseViewFrame.size.width, self.originalBaseViewFrame.size.height);
//进行y轴旋转
CATransform3D transformR = CATransform3DMakeRotation(-(M_PI * 2) * persent, 0, 1, 0);
CATransform3D transformPerspective = CATransform3DIdentity;
transformPerspective.m34 = -1.0f/800;
self.baseView.layer.sublayerTransform = CATransform3DConcat(transformR, transformPerspective);
}
@end
4. Resumen y reflexión
La simple exploración de imágenes hexagonales está completa. La parte complicada es principalmente calcular la posición de las seis caras y el ángulo de rotación del eje Y. Puede enriquecer las funciones internas modificando la vista de las seis caras. Después de que la vista se establezca mediante transform , el valor de la propiedad de su marco también se modificará, y también es posible extender algunas funciones desde él. Por ejemplo, si hay un botón con forma de diamante, ¿es posible seleccionar el botón a lo largo del eje x y el eje y para obtener un botón con forma de diamante, de modo que el rango de clic de dicho botón con forma de diamante sea dentro de ella. El código es torpe, no te rías del gran dios.