SCCatWaitingHUD的Objc代码实现 | Animatious 一起动画开源组

JerryXia 发表于 2017-05-07 16:23:23 , 阅读 (17)

介绍

这个创意其实来源于微博上@画渣程序猿mmoaay转发并艾特我的的一组gif图
看到图的时候我先对图大致进行了结构和层次的区分
在设计物体动效的时候，首先是要对动画的不同对象进行拆分，在这里，老鼠，猫眼睛，眼皮，以及猫脸，他们各自的行为分别是不同的，因此分为不同的图层

在整体动画进行的时候，他们各自的layer所执行的动画是不同的
看起来这个控件很简单，接下来我们就来分析一下写出这样一个控件需要注意的关键点吧~

分析

先确认我们要做成什么样的控件

首先这是一个等待动画所以应该做成一个HUD类型的控件

这样可以在当前window的上方出现和消失而不影响当前视图的展示
所以我们就要在应用当前默认的UIWindow上再添加一个UIWindow 这样可以在全局任何地方调用这个HUD 同时我们的HUD也要实现全局的单例模式

其次是动画最初的动画其实并不难

只是眼睛图层和老鼠图层围着各自的中心点旋转且拥有相同的运动周期这样能让他们在相同时间内移动的弧度是相同的产生眼睛跟着老鼠走的感觉

最后是眼皮和眼珠的运动协调

由于眼珠做的是匀速圆周运动而眼皮做的是直线缩放运动因此如何协调这两者的运动时间曲线决定了最后的动画是否流畅和自然

还有一点额外的临时产生的需求就是对横屏的支持

这是我在写的过程中@sauchye提出的issue，所以我花了一个版本用来加上了对左右横屏的支持

代码实现

UIWindow

UIWindow 是每一个程序都必须创建的根视图，它是UIView的子类，但是地位却在所有的UIView之上。每一个程序在启动的时候，如果你使用了interface builder作为启动界面，那么Xcode会自动把你的第一个Controller添加到根window上，如果你要通过代码初始化Window，则必须要像系统要求的这样声明：

- (BOOL)application:(UIApplication *)application willFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

   UIWindow *window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

   myViewController = [[MyViewController alloc] init];
   window.rootViewController = myViewController;
   [window makeKeyAndVisible];

   return YES;

}

在SCCatWaitingHUD中，由于需要存在一个不干扰原有程序代码逻辑和视图逻辑的View，因此最合适的办法就是声明一个独立的Window。HUD的这种使用模式可以参考MBProgressHUD，开发者可以在全局任意的地方调用HUD的显示，由于HUD所在的Window和系统原本的Window相比level更高，所以可以在不影响原有视图的情况下在任意页面显示。

UIWindow的结构如下，我们可以看到UIWindow本身就是一个UIView。每个UIWindow都会有一个名为rootViewController的属性，而这个属性就是这个window将会呈现的controller对象。

Xcode7之后，苹果要求所有的UIWindow在声明的时候都需要有一个rootViewController，即通过代码声明的时候，需要定义一个rootViewController，然后在这个controller之上添加要显示的内容。但是经过验证，在程序运行中创建的非根Window的UIWindow，可以直接当做UIView来使用，仍然不需要强制给一个rootViewController。

self.backgroundWindow = [[UIWindow alloc]initWithFrame:self.frame];
_backgroundWindow.windowLevel = UIWindowLevelStatusBar;
_backgroundWindow.backgroundColor = [UIColor clearColor];
_backgroundWindow.alpha = 0.0f;

所以我们这个HUD的主要显示对象就是名为backgroundWindow的UIWindow属性对象
那么怎么控制Window的出现和消失呢
UIWindow有几个方法:

1 2	- (void)makeKeyWindow; - (void)makeKeyAndVisible; // convenience. most apps call this to show the main window and also make it key. otherwise use view hidden property

一般都是用上述第二个方法来让指定Window成为keyWindow并且出现。至于怎么让指定Window消失，苹果并没有提供一些特别的办法，官方文档中有给出下面这种用法

_backgroundWindow.hidden = YES;// According to Apple Doc : This is a convenience method to make the receiver the main window and displays it in front of other windows at the same window level or lower. You can also hide and reveal a window using the inherited hidden property of UIView.

Animation

动画要解决的第一个问题就是，老鼠的旋转是绕着自身的中心点，然而两个眼珠的旋转并不是。
首先，旋转动画的实现我们肯定是通过CATransform3DRotate，基本的CAAnimation声明如下:

double radians(float degrees) {
    return ( degrees * 3.14159265 ) / 180.0;
}
CATransform3D getTransForm3DWithAngle(CGFloat angle)
{
    CATransform3D  transform = CATransform3DIdentity;
    transform  = CATransform3DRotate(transform, angle, 0, 0, 1);
    return transform;
}
- (CABasicAnimation *)rotationAnimation
{
    CABasicAnimation *rotationAnimation;
    rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
    rotationAnimation.fromValue = [NSValue valueWithCATransform3D:getTransForm3DWithAngle(0.0f)];
    rotationAnimation.toValue = [NSValue valueWithCATransform3D:getTransForm3DWithAngle(radians(180.0f))];
    rotationAnimation.duration = self.animationDuration;
    rotationAnimation.cumulative = YES;
    rotationAnimation.repeatCount = HUGE_VALF;
    rotationAnimation.removedOnCompletion=NO;
    rotationAnimation.fillMode=kCAFillModeForwards;
    rotationAnimation.autoreverses = NO;
    rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    return rotationAnimation;
}

我们需要来看看CALayer的几个基本属性：frame、bounds、position、anchorPoint。frame和bounds都可以用UIView中的知识去理解，frame是相对于superLayer的位置和大小，而bounds是origin为(0,0)的frame。
而anchorPoint则是一个Layer的锚点，相信做过一些动画开发或者游戏开发的同学们都知道锚点的作用。锚点作为Layer变换的基准点，它的坐标值为相对于bounds宽高的比例。在iOS中，它的起始点是Layer的左上角，为标准原点(0，0)，右下角为(1,1)，默认值为中心点(0.5,0.5)；在MacOS中，起始点为左下角，(1,1)在右上角。所以通过修改锚点的相对位置，就可以让旋转的轴心变成我们需要的位置。

这里有一张图来说明锚点是什么。

因此我尝试着将眼珠的anchorPoint设置为(1.5,1.5)，旋转中心变成了接近眼睛中心的点。但是这时候我们还需要修改position来配合anchorPoint的改变。我们可以这么理解，position是锚点相对于父layer的坐标值，而anchorPoint则是锚点相对于自身的坐标值，两者共同决定了锚点和整个Layer所在的位置。
所以我们还需要调整眼珠Layer的position，来和之前设置的anchorPoint的位置重合。

1 2	_rightEye.layer.anchorPoint = CGPointMake(1.5f, 1.5f); _rightEye.layer.position = CGPointMake(self.faceView.right - 13.5f, self.faceView.top + width/3.0f + 7.5f);

这时候，上面的CAAnimation就可以正常的添加到Layer的transform上并且执行出来啦。

眼皮的运动时间曲线

这里最重要的一点就是要让眼皮和眼珠的运动达到协调一致，不会出现翻白眼也不会出现斗鸡眼（哈哈哈哈）。所以我们可以先分析出下面两个结论:

眼皮的上下运动周期和眼珠的旋转运动周期一致
眼皮在竖直方向上的位移和眼珠在竖直方向上的位移一致
眼珠在圆周切线方向的线性速率是匀速的

因此我们可以得出结论，眼皮在竖直方向上的速率曲线和眼珠在竖直方向上的速率曲线是一致的。我们来分析眼珠的速度方向。首先，我们可以将半周的时长定为常量T，半径定为R。在下面的推导中我会将T=2这个条件当做已知条件代入。

通过将速度分解成水平X轴和竖直Y轴的分量后，我们可以得出竖直方向上的眼珠速度的速度曲线，就是简单的

这里的Vy就是竖直速度分量，θ是t时刻的圆心角，由于这里做的是匀速圆周运动，因此角速度和线速度也是匀速的，公式中的V即为匀速的线速度

所以我们可以得出t时刻的圆心角公式为

在这里，我之前犯了个大错误，不知道有没有读者注意到。之前的版本中，我的公式里将时间和弧度分子和分母的位置颠倒了，并且最后求位移公式的时候，忘记了这是个变速运动。因此得出来的位移函数曲线并不是像之前那个版本所展示的一样。

所以我们将以上几个公式合并起来之后获得一个Vy的公式如下

这个函数的图像如下，由于R没有确定，我在这里使得R=5，来看一下曲线的样子，其实就是一个普通的正弦曲线

这时候，由于加速度是变化的，速度也是变化的，所以这是个非匀变速运动，它的位移曲线只能通过对速度曲线的积分来求得。因此我们要求Vy函数在(0,t)区间的积分。

这个积分求出来得到的结果如下

这个就是最后的位移公式，它的函数图像如下

注意，我们得出这个函数图像的主要目标是确定眼皮的上下缩放动画的时间曲线，这个曲线代表着位移和时间的函数关系。这时候，这个函数图像就是接下来要给眼皮加上的缩放动画的时间曲线了，我没有用专门的画贝塞尔曲线的软件来画，只是根据函数的图像大致画出了一个贝塞尔曲线，作为了下面这个动画的时间曲线

- (CAAnimationGroup *)scaleAnimation
{
    // 眼皮和眼珠需要确定一个运动时间曲线
    CABasicAnimation *scaleAnimation;
    scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
    scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 3.0, 1.0)];
    scaleAnimation.duration = self.animationDuration;
    scaleAnimation.cumulative = YES;
    scaleAnimation.repeatCount = 1;
    scaleAnimation.removedOnCompletion= NO;
    scaleAnimation.fillMode=kCAFillModeForwards;
    scaleAnimation.autoreverses = NO;
    scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.2:0.0 :0.8 :1.0];
    scaleAnimation.speed = 1.0f;
    scaleAnimation.beginTime = 0.0f;
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.duration = self.animationDuration;
    group.repeatCount = HUGE_VALF;
    group.removedOnCompletion= NO;
    group.fillMode=kCAFillModeForwards;
    group.autoreverses = YES;
    group.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.2:0.0:0.8 :1.0];
    
    group.animations = [NSArray arrayWithObjects:scaleAnimation, nil];
    return group;
}

你可以看到CAMediaTimingFunction，这就是时间曲线的类，在一般情况下，系统会提供这么几种你常用到的时间曲线

CA_EXTERN NSString * const kCAMediaTimingFunctionLinear
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseIn
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseOut
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseInEaseOut
    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

他们分别代表了匀速运动，先快后慢，先慢后快，先快后慢再快这四种运动时间曲线。如果你要自定义时间曲线的话，系统也提供了绘制贝塞尔曲线的方法，你只要确定曲线的两个控制点坐标即可。而坐标的原点为(0，0)，最后收尾的点则在(1,1)，横轴为时间，纵轴为动画的执行程度，坐标值代表着相对比例值，因此我们可以截取上面的函数图像中横轴0到T的部分作为0到1的时间长度，来绘制贝塞尔曲线。而这里我设置了前提条件为T=2，因此只要截取(0,2)区间里的函数曲线就可以了。

最后是一点对横屏的支持

由于我们实现的是一个独立的UIWindow，没有添加ViewController，所以不能通过ViewController下面几个涉及到屏幕旋转的回调来获得屏幕方向的变化。

// New Autorotation support.
- (BOOL)shouldAutorotate NS_AVAILABLE_IOS(6_0) __TVOS_PROHIBITED;
- (UIInterfaceOrientationMask)supportedInterfaceOrientations NS_AVAILABLE_IOS(6_0) __TVOS_PROHIBITED;
// Returns interface orientation masks.
- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation NS_AVAILABLE_IOS(6_0) __TVOS_PROHIBITED;

这时候我们就要通过监听系统的一个广播消息来获取屏幕状态的变化。

1	[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(statusBarOrientationChange:) name:UIApplicationDidChangeStatusBarOrientationNotification object:nil];

在横屏切换的回调里，我记录了前一个屏幕状态，获取到当前屏幕状态，然后做了一个旋转的变换，这样整个HUD就会随着屏幕方向的变化而变化了。详细的实现可以直接看源代码，这里就不再贴出。

效果

这个开源控件的基本原理也就这些了，你可以在我的github上clone下源代码来阅读 :-) ，如果你有更好的建议或者想法也欢迎随时提PR。

其他资源

文章内文件提供公共下载
配图所用Sketch文件：下载链接

作者

Sergio Chan
Github : https://github.com/SergioChan
Weibo : http://weibo.com/sergiochan

[ 技术文章推荐 ]

介绍

分析

首先 这是一个等待动画 所以应该做成一个HUD类型的控件

其次是动画 最初的动画其实并不难