tvOS视差按钮的ObjC实现

本文主要是介绍tvOS视差按钮的ObjC实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

介绍

苹果在最新发布的Apple TV里引入了有趣的图标设计
具体说来图标由2-5个分层图层构成在图标被选中的时候图标内每个图层进行不同幅度的位移从而形成视觉上具有深度距离感的视差效果图标构成和效果可以见视频:

这种效果很适合用于多媒体类应用例如图书或者电影封面让封面变得立体生动然而这种效果目前只能在Apple TV的tvOS里见到
所以如何在iOS上做出同样的效果呢？现在就让我们一起研究下视差按钮的实现原理并且自己实现一个吧 ^_^

原理

假设我们已经有了以下图片：（你可以从下载链接下载已经分层的四张图片）
四张已经分层的图片
基于这四张图片我们该怎么对其进行变换来达到tvOS的视差效果呢？
重新观察上文中苹果官方的例子视频我们可以得出以下结论：

1. 总图层在旋转但不同于一般在屏幕平面上的旋转而是相对屏幕具有一定夹角的旋转

如果不太了解这种旋转是怎么发生的我们可以看一张有关 CATransform3D 的图：
CATransform3DMakeRotation的XYZ轴
我们常用的 CGRect 有 X 和 Y 两个位置参数而 CATransform3D 可以理解为在日常的两个轴以外加了 Z 轴方向为从手机上表面竖直向下如图
这么一来我们日常所见的在屏幕平面上的旋转（比如屏幕旋转）其实是绕 Z 轴旋转
而绕 X 和 Y 轴的旋转便是让 CALayer 具有相对屏幕具有一定夹角的旋转具体表现就是如同tvOS按钮一样有远近效果（其实在透视效果上还是有些不一样后面会提怎么解决）
CATransform3DMakeRotation 就是这么通过旋转角度定义的：

CATransform3D CATransform3DMakeRotation (
   CGFloat angle, //绕着向量(x,y,z)旋转的角度
 CGFloat x, //x轴分量
 CGFloat y, //y轴分量
 CGFloat z //z轴分量
);

2.除去旋转每个图层都在进行不同半径的圆周移动

为什么有移动？
透视是创造三维深度感觉的关键而透视效果最直白的话来说就是“近大远小”
让我们来看个例子吧 :-)
近大远小的说明
如果只有总图层自转分图层不进行移动那么整个按钮虽然有自转效果但是看起来还是平的
如果要保证有三维效果就要有视差即近大远小让远处的图层移动的距离很小近处的图层移动距离很大（大家可以自行想象同样速度远处近处的汽车看起来移动的距离也不一样）
因此就要令分图层进行圆周移动离我们近的图层圆周半径要更大些保证看起来移动的距离更大
我们简单地用 Principle 做了一个原型大体效果应该是这个样子的中间的圆点是移动的轴心
简陋的圆周移动效果

3.总的图层也会移动

看到我们刚才那个简陋的效果了没？你有可能会想为什么看起来和tvOS差别那么大？
原因是 tvOS实现的效果整个按钮并没有明显地移动而是近似于固定在某个位置的这么一来就要求我们在分图层移动的时候总图层叠加一项反方向的移动保证按钮固定住
于是我们又用 Principle 做了一个原型大体效果应该是这个样子的
还是很简陋的圆周移动效果

4.高光的移动方向恰好相反

高光就是我们在tvOS的图标上看到的白色反光这个部分其实很简单：
用PS画一个白色的圆加上模糊效果就是一个高光图层
让图层在移动的时候于其他图层方向相反即让图层叠加之后的效果为高光永远在离我们最近的地方这里说起来会有点困惑但是用代码实现的时候就自然明白了 ^_^

实现

注：实现部分限于篇幅不可能将所有代码都粘贴出来只是在几个关键的地方粘贴出来加以说明
完整代码见 https://github.com/JustinFincher/JZtvOSParallaxButton

1.按钮基本

按照我们的计划这个按钮默认并没有三维效果就是很多UIImage叠加起来只有当我们长按的时候才会有各种旋转和移动
这里动画方式分为两种第一种是自动动画首先会移动和旋转到一个特定的角度然后便开始周期移动了第二种是手动动画按钮会跟随手指Drag进行旋转和移动
让我们先新建一个UIButton吧 :-)

//JZParallaxButton.h
# import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, RotateMethodType)
{
 RotateMethodTypeAutoRotate = 0, //自动动画
 RotateMethodTypeWithFinger, //跟随手指
 RotateMethodTypeWithFingerReverse, //跟随手指 但反向
};
@interface JZParallaxButton : UIButton
@end

//JZParallaxButton.m
# define LongPressInterval 0.5 //自动动画状态下的长按判断时间
@interface UIButton ()<UIGestureRecognizerDelegate>
@end
@implementation JZParallaxButton
@end

写一个自己的init方法然后在里面加入长按的手势判断

//JZParallaxButton.m
- (instancetype)initButtonWithCGRect:(CGRect)RectInfo
 WithLayerArray:(NSMutableArray *)ArrayOfLayer
 WithRoundCornerEnabled:(BOOL)isRoundCorner
 WithCornerRadiusifEnabled:(CGFloat)Radius
 WithRotationFrames:(int)Frames
 WithRotationInterval:(CGFloat)Interval
{
 self = [super initWithFrame:RectInfo];
 
 //...省略...
 
 UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(selfLongPressed:)];
 longPress.delegate = self;
 longPress.minimumPressDuration = LongPressInterval;
 //self就是UIButton了 所以可以对self add
 [self addGestureRecognizer:longPress];
 
 return self;
}

//JZParallaxButton.m
//长按会触发的方法
- (void)selfLongPressed:(UILongPressGestureRecognizer *)sender
{
 CGPoint PressedPoint = [sender locationInView:self];
 NSLog(@"%F , %F",PressedPoint.x,PressedPoint.y); 
 //可以读取当前按下的位置
}

2.层级关系和逻辑判断

我们的按钮在实现后应有以下层级：
层级关系

ParallaxButton:UIButton  //我们建立的UIButton SubClass
|-BoundsView:UIView   //总视图 
 |--LayerImageView1:UIImageView //分视图 是总视图的SubView
 |--LayerImageView2:UIImageView
 |--LayerImageView3:UIImageView
 |--LayerImageView4:UIImageView
 |--LayerImageView5:UIImageView
 |-- .... 
 |--LayerImageViewX:UIImageView

有的同学有可能会觉得为什么需要总视图这个 BoundsView 呢直接将所有的UIImageView都划归为UIButton的SubView不就好了么？
实验过直接将UIImageView添加到UIButton为SubView后我有一个相对合理的解释：
我们之前分析原理的时候说明其实是只有总图层（即 BoundsView ）在旋转的分图层只需处理移动问题
如果去除了总图层就只能让每个分图层（即 LayerImageView ）在移动的同时都旋转这势必带来一个问题那就是会有“厚度”的感觉
让我们实验下如果层级关系如下图会是什么结果
错误的显示效果
可以看到这里的图层移动方式和原型里的效果已经很接近了但是因为分图层移动半径不一并且没有总图层进行约束导致分图层的显示区域不在一个长方形里看起来像是有厚度了一样整个按钮实际看起来并没有tvOS按钮里的那种轻盈感
因此需要有总图层进行约束即将分图层添加为总图层的SubView 并设置总图层Layer的MasksToBounds为YES 这时所有分图层的可见区域都受限制于总图层无论怎么旋转和移动都不会出现厚度感了
我们现在将视图层级需要的一些变量写出来然后再实现一些逻辑判断的代码比如长按后需要做什么

//JZParallaxButton.h
# import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, ParallaxMethodType)
{
 ParallaxMethodTypeLinear = 0,
 ParallaxMethodTypeEaseIn,
 ParallaxMethodTypeEaseOut,
};

@interface JZParallaxButton : UIButton

//数组用于记录当前Button包含的所有ImageLayer 即分图层
@property (nonatomic,strong) NSMutableArray *LayerArray;

//button圆角
@property (nonatomic,assign) BOOL RoundCornerEnabled;

//button圆角
@property (nonatomic,assign) CGFloat RoundCornerRadius;

//是否在Parallax
@property (nonatomic,assign) BOOL isParallax;

@property (nonatomic,assign) int RotationAllSteps;
@property (nonatomic,assign) CGFloat RotationInterval;

@property (nonatomic,assign) CGFloat ScaleBase;
@property (nonatomic,assign) CGFloat ScaleAddition;

@property (nonatomic,assign) ParallaxMethodType ParallaxMethod;
@property (nonatomic,assign) RotateMethodType RotateMethod;

- (instancetype)initButtonWithCGRect:(CGRect)RectInfo
 WithLayerArray:(NSMutableArray *)ArrayOfLayer
 WithRoundCornerEnabled:(BOOL)isRoundCorner
 WithCornerRadiusifEnabled:(CGFloat)Radius
 WithRotationFrames:(int)Frames
 WithRotationInterval:(CGFloat)Interval;

//JZParallaxButton.m

# define RotateParameter 0.5 //用于调整旋转幅度
# define SpotlightOutRange 20.0f //用于高光距离中心的长度
# define zPositionMax 800 //Core Layer变换时摄像机默认z轴位置

# define BoundsVieTranslation 50 //总图层的移动幅度
# define LayerVieTranslation 20 //分图层的移动幅度
# define LongPressInterval 0.5 //自动动画状态下的长按判断时间 

@interface UIButton ()<UIGestureRecognizerDelegate>

@property (nonatomic,assign) int RotationNowStep; //记录动画的当前状态
@property (nonatomic,weak)NSTimer *RotationTimer; //动画计时器
@property (nonatomic,strong) UIImageView *SpotLightView; //高光图层
@property (nonatomic,strong) UIView *BoundsView; //总图层
@property (nonatomic,assign) CGPoint TouchPointInSelf; //手指按下的时候在Button内部 的位置 用于Button设为跟随手指的时候
@property (nonatomic,assign) BOOL hasPreformedBeginAnimation; //判断是否在进行动画 防止动画未表演完就触发下一个动作 造成错位
@end

@implementation JZParallaxButton
//省略 @synthesize ...

- (instancetype)initButtonWithCGRect:(CGRect)RectInfo
 WithLayerArray:(NSMutableArray *)ArrayOfLayer
 WithRoundCornerEnabled:(BOOL)isRoundCorner
 WithCornerRadiusifEnabled:(CGFloat)Radius
 WithRotationFrames:(int)Frames
 WithRotationInterval:(CGFloat)Interval
{
//省略之前的代码....
 LayerArray = [[NSMutableArray alloc] initWithCapacity:[ArrayOfLayer count]];
 
 BoundsView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
 BoundsView.layer.masksToBounds = YES;
 BoundsView.layer.shouldRasterize = TRUE;
 BoundsView.layer.rasterizationScale = [[UIScreen mainScreen] scale];
 if (self.RoundCornerEnabled)
 {
 BoundsView.layer.cornerRadius = self.RoundCornerRadius;
 }
 [self addSubview:BoundsView];
 
 
 for (int i = 0; i < [ArrayOfLayer count]; i++)
 {
 UIImageView *LayerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
 UIImage *LayerImage = [ArrayOfLayer objectAtIndex:i];
 [LayerImageView setImage:LayerImage];
 LayerImageView.layer.shouldRasterize = TRUE;
 LayerImageView.layer.rasterizationScale = [[UIScreen mainScreen] scale];
 
 //从下往上添加
 [BoundsView addSubview:LayerImageView];
 [LayerArray addObject:LayerImageView];
 
 //如果把所有分图层都加完了
 if (i == [ArrayOfLayer count] - 1)
 {
 //在最上层添加高光分图层
 SpotLightView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width,self.frame.size.height)];
 
 NSString *bundlePath = [[NSBundle bundleForClass:[JZParallaxButton class]]
 pathForResource:@"JZParallaxButton" ofType:@"bundle"];
 NSBundle *bundle = [NSBundle bundleWithPath:bundlePath];
 
 SpotLightView.image = [UIImage imageNamed:@"Spotlight" inBundle:bundle compatibleWithTraitCollection:nil];
 SpotLightView.contentMode = UIViewContentModeScaleAspectFit;
 SpotLightView.layer.masksToBounds = YES;
 [BoundsView addSubview:SpotLightView];
 SpotLightView.layer.zPosition = zPositionMax;
 [self bringSubviewToFront:SpotLightView];
 SpotLightView.alpha = 0.0;
 [LayerArray addObject:SpotLightView];
 }
} 
- (void)selfLongPressed:(UILongPressGestureRecognizer *)sender
{
 CGPoint PressedPoint = [sender locationInView:self];
 //NSLog(@"%F , %F",PressedPoint.x,PressedPoint.y);
 self.TouchPointInSelf = PressedPoint;
 
 if(sender.state == UIGestureRecognizerStateBegan)
 {
 //NSLog(@"Long Press");