Lottie动画之转场动画使用心得

转场动画 ransition：n. 过渡; 转变; 变迁

1.正确引入 <Lottie/Lottie.h> 头文件 以及 AnimationTransitionViewControlle 转场动画头文件。

#import "AnimationTransitionViewController.h"
#import <Lottie/Lottie.h>

2.创建按钮 初始化 后 添加 跳转方法。

- (void)viewDidLoad {
  [super viewDidLoad];
  self.button1 = [UIButton buttonWithType:UIButtonTypeSystem];
  [self.button1 setTitle:@"Show Transition B" forState:UIControlStateNormal];
  [self.button1 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
  self.button1.backgroundColor = [UIColor colorWithRed:16.f/255.f
                                                 green:122.f/255.f
                                                  blue:134.f/255.f
                                                 alpha:1.f];
  self.button1.layer.cornerRadius = 7;
  
  [self.button1 addTarget:self action:@selector(_close) forControlEvents:UIControlEventTouchUpInside];
  self.view.backgroundColor = [UIColor colorWithRed:200.f/255.f
                                              green:66.f/255.f
                                               blue:72.f/255.f
                                              alpha:1.f];
  [self.view addSubview:self.button1];
}

3.给按钮设置位置。

在调用视图控制器视图的layoutSubviews方法之前调用。子类可以根据需要实现。默认值是nop

- (void)viewWillLayoutSubviews {
  [super viewWillLayoutSubviews];
  CGRect b = self.view.bounds;
  CGSize buttonSize = [self.button1 sizeThatFits:b.size];
  buttonSize.width += 20;
  buttonSize.height += 20;
  CGRect buttonRect;
  buttonRect.origin.x = b.origin.x + rintf(0.5f * (b.size.width - buttonSize.width));
  buttonRect.origin.y = b.origin.y + rintf(0.5f * (b.size.height - buttonSize.height));
  buttonRect.size = buttonSize;
  
  self.button1.frame = buttonRect;
}

4.在新的类中 创建 按钮 并 遵守 “过渡动画” 的协议。

@interface AnimationTransitionViewController () <UIViewControllerTransitioningDelegate>

@property (nonnull, strong) UIButton *button1;
@property (nonnull, strong) UIButton *closeButton;

@end

5.在新的类中 初始化 按钮 并 添加 方法。

- (void)viewDidLoad {
  [super viewDidLoad];
  
  self.closeButton = [UIButton buttonWithType:UIButtonTypeSystem];
  [self.closeButton setTitle:@"Close" forState:UIControlStateNormal];
  [self.closeButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
  self.closeButton.backgroundColor = [UIColor colorWithRed:50.f/255.f
                                                     green:207.f/255.f
                                                      blue:193.f/255.f
                                                     alpha:1.f];
  self.closeButton.layer.cornerRadius = 7;
  
  [self.closeButton addTarget:self action:@selector(_close) forControlEvents:UIControlEventTouchUpInside];
  [self.view addSubview:self.closeButton];
  
  
  self.button1 = [UIButton buttonWithType:UIButtonTypeSystem];
  [self.button1 setTitle:@"Show Transition A" forState:UIControlStateNormal];
  [self.button1 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
  self.button1.backgroundColor = [UIColor colorWithRed:50.f/255.f
                                                 green:207.f/255.f
                                                  blue:193.f/255.f
                                                 alpha:1.f];
  self.button1.layer.cornerRadius = 7;
  
  [self.button1 addTarget:self action:@selector(_showTransitionA) forControlEvents:UIControlEventTouchUpInside];
  self.view.backgroundColor = [UIColor colorWithRed:122.f/255.f
                                              green:8.f/255.f
                                               blue:81.f/255.f
                                              alpha:1.f];
  [self.view addSubview:self.button1];
}

6.在新的类中 为按钮设置合适的位置。

- (void)viewWillLayoutSubviews {
  [super viewWillLayoutSubviews];
  CGRect b = self.view.bounds;
  CGSize buttonSize = [self.button1 sizeThatFits:b.size];
  buttonSize.width += 20;
  buttonSize.height += 20;
  self.button1.bounds = CGRectMake(0, 0, buttonSize.width, buttonSize.height);
  self.button1.center = self.view.center;
  
  
  CGSize closeSize = [self.closeButton sizeThatFits:b.size];
  closeSize.width += 20;
  closeSize.height += 20;
  
  self.closeButton.bounds = CGRectMake(0, 0, closeSize.width, closeSize.height);
  self.closeButton.center = CGPointMake(self.button1.center.x, CGRectGetMaxY(b) - closeSize.height);
}

7.在新的类中 实现 按钮的 方法。

- (void)_showTransitionA {
  ToAnimationViewController *vc = [[ToAnimationViewController alloc] init];
  vc.transitioningDelegate = self;
  [self presentViewController:vc animated:YES completion:NULL];
}

8.在新的类中 如果要退出时 "弹走" 视图。

- (void)_close {
  [self.presentingViewController dismissViewControllerAnimated:YES completion:NULL];
}

9.在新的类中 实现 “过渡动画” 协议的方法。

initWithAnimationNamed : @"你的动画json文件名"
fromLayerNamed : @"来自哪个图层的图层名" -（out）
toLayerNamed : @"到自哪个图层的图层名" -（in）
applyAnimationTransform:NO

文档中有关 “applyAnimationTransform” 的意思

" 应用动画的转换 Bool 类型 "
applyAnimationTransform一个布尔值，用于确定自定义图层是否应该
将After Effects图层中的变换动画应用于它。如果没有
图层将被After Effects图层遮罩

#pragma mark -- View Controller Transitioning

-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
    
  LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1" fromLayerNamed:@"outLayer" toLayerNamed:@"inLayer"  applyAnimationTransform:NO];
  return animationController;
}

-(id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
  LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition2" fromLayerNamed:@"outLayer" toLayerNamed:@"inLayer" applyAnimationTransform:NO];
  return animationController;
}


@end