SplashAnimation

涉及到的技术点

• CALayer的mask属性
  • mask 也是一个 CALayer
  • 当我们使用时，就需要单独创建一个 CALayer 作为 mask
• CAKeyframeAnimation
  • CAKeyframeAnimation 就相当于 Flash 里的关键帧动画
  • CAKeyframeAnimation 中我们通过 keyPath 就可以指定动画的类型

SplashAnimation动画的具体实现步骤

• 界面布局如图所示

界面布局图3.png

• UIView的具体代码如下

//  AppDelegate.m

#import "AppDelegate.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

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

    // 设置导航栏的颜色
    [[UINavigationBar appearance] setBarTintColor:[UIColor colorWithRed:128.0 / 255.0 green:0.0 / 255.0 blue:0.0 / 255.0 alpha:1.0]];

    // 设置窗口的背景颜色
    self.window.backgroundColor = [UIColor colorWithRed:128.0 / 255.0 green:0.0 / 255.0 blue:0.0 / 255.0 alpha:1.0];

    // 设置窗口的根控制器
    UINavigationController *navc = [[UIStoryboard storyboardWithName:@"Main" bundle:nil] instantiateInitialViewController];
    self.window.rootViewController = navc;

    // 显示窗口
    [self.window makeKeyAndVisible];

    // logo mask
    CALayer *maskLayer = [CALayer layer];
    maskLayer.contents = (id)[UIImage imageNamed:@"logo"].CGImage;
    maskLayer.position = navc.view.center;
    maskLayer.bounds = CGRectMake(0, 0, 60, 60);
    navc.view.layer.mask = maskLayer;

    // logo mask background view
    UIView *maskBackgroundView = [[UIView alloc] initWithFrame:navc.view.bounds];
    maskBackgroundView.backgroundColor = [UIColor whiteColor];
    [navc.view addSubview:maskBackgroundView];
    [navc.view bringSubviewToFront:maskBackgroundView];

    // logo mask animation
    CAKeyframeAnimation *logoMaskAnimation = [CAKeyframeAnimation animationWithKeyPath:@"bounds"];
    logoMaskAnimation.duration = 1.0f;
    logoMaskAnimation.beginTime = CACurrentMediaTime() + 1.0f;

    CGRect initalBounds = maskLayer.bounds;
    CGRect secondBounds = CGRectMake(0, 0, 50, 50);
    CGRect finalBounds = CGRectMake(0, 0, 2000, 2000);
    logoMaskAnimation.values = @[[NSValue valueWithCGRect:initalBounds], [NSValue valueWithCGRect:secondBounds], [NSValue valueWithCGRect:finalBounds]];
    logoMaskAnimation.keyTimes = @[@(0), @(0.5), @(1)];
    logoMaskAnimation.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut], [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut], [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
    logoMaskAnimation.removedOnCompletion = NO;
    logoMaskAnimation.fillMode = kCAFillModeForwards;
    [navc.view.layer.mask addAnimation:logoMaskAnimation forKey:@"logoMaskAnimation"];

    // maskBackgroundView fade animation
    [UIView animateWithDuration:0.1 delay:1.35 options:UIViewAnimationOptionCurveEaseIn animations:^{
        maskBackgroundView.alpha = 0.0;
    } completion:^(BOOL finished) {
        [maskBackgroundView removeFromSuperview];
    }];

    // navc.view bounce animation
    [UIView animateWithDuration:0.25 delay:1.3 options:UIViewAnimationOptionTransitionNone animations:^{
        navc.view.transform = CGAffineTransformMakeScale(1.05, 1.05);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            navc.view.transform = CGAffineTransformIdentity;
        } completion:^(BOOL finished) {
            navc.view.layer.mask = nil;
        }];
    }];

    return YES;
}

• 运行结果如图所示