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;
  }
  

  • 运行结果如图所示

运行结果图3.gif