一种动画框架Lottie的解析(二)—— 基本介绍(二)

版本记录

版本号 时间
V1.0 2017.09.15

前言

app中好的炫的动画可以让用户耳目一新,为产品增色不少,关于动画的实现我们可以用基本动画、关键帧动画、序列帧动画以及基于CoreGraphic的动画等等,接下来这几篇我不介绍系统给的这几种动画绘制方法,给大家介绍的是一种动画框架。感兴趣的可以看我上面几篇。
1. 一种动画框架Lottie的解析(一)—— 基本介绍(一)

iOS View Controller Transitioning - iOS转场动画

Lottie带有一个UIViewController动画控制器,用于定制自定义viewController转场动画!

一种动画框架Lottie的解析(二)—— 基本介绍(二)_第1张图片

称为转场的代理

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

LOTAnimationTransitionController中实现代理方法。

#pragma mark -- View Controller Transitioning

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

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

通过将applyAnimationTransform设置为YES,您可以做Lottie动画移向和移出控制器。 它们将位于层的原点。 当设置为NO时,Lottie只需对指定的层进行遮挡,同时重新检测z顺序。


Debugging - 调试

Lottie有几个调试功能可以了解。 当加载动画时,不支持的功能将在控制台中以其功能名称打印输出。

如果你检查LOTHelpers.h,你会看到两个调试标志。 ENABLE_DEBUG_LOGGINGENABLE_DEBUG_SHAPES

ENABLE_DEBUG_LOGGING增加了Lottie Logging的详细程度。 它在动画过程中随时记录动画节点。 如果您的动画不工作,请打开并播放动画。 控制台日志可能会给你一些关于发生了什么的线索。

ENABLE_DEBUG_SHAPES为每个图层和形状的锚点绘制一个彩色方块。 这有助于查看屏幕上是否有任何内容。

1. keyPath

LOTAnimationView提供 - (void)logHierarchyKeypaths,它会递归地记录动画的所有可设置的关键字。 这有助于在运行时更改动画。


Adding Views to an Animation at Runtime - 在运行时将视图添加到动画

Lautie不仅可以在运行时更改动画,还可以在运行时将自定义UI添加到LOTAnimation。 下面的例子显示了一些高级的用法来创建动态图像加载器。


A Dynamic Image Loading Spinner - 一种动态图像加载转动动画

一种动画框架Lottie的解析(二)—— 基本介绍(二)_第2张图片

上面的示例显示了使用加载旋转动画设置的单个LOTAnimationView。 加载旋转循环其动画的一部分,而此时图像被异步下载。 当下载完成后,将图像添加到动画中,其余的动画将无缝播放。 图像干净地动画化,完成块被调用。

如果说,动画已被设计师改变,需要更新。 所有这些都是更新捆绑包中的JSON文件。 不需要更改代码!

一种动画框架Lottie的解析(二)—— 基本介绍(二)_第3张图片

在这里,设计决定为app添加“黑暗模式”。 只是几行代码在运行时更改动画的颜色。

具体代码如下所示:

import UIKit
import Lottie

class ViewController: UIViewController {
  
  var animationView: LOTAnimationView = LOTAnimationView(name: "SpinnerSpin");
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    // Setup our animaiton view
    animationView.contentMode = .scaleAspectFill
    animationView.frame = CGRect(x: 20, y: 20, width: 200, height: 200)

    self.view.addSubview(animationView)
    // Lets change some of the properties of the animation
    // We arent going to use the MaskLayer, so lets just hide it
    animationView.setValue(0, forKeypath: "MaskLayer.Ellipse 1.Transform.Opacity", atFrame: 0)
    // All of the strokes and fills are white, lets make them DarkGrey
    animationView.setValue(UIColor.darkGray, forKeypath: "OuterRing.Stroke.Color", atFrame: 0)
    animationView.setValue(UIColor.darkGray, forKeypath: "InnerRing.Stroke.Color", atFrame: 0)
    animationView.setValue(UIColor.darkGray, forKeypath: "InnerRing.Fill.Color", atFrame: 0)
    
    // Lets turn looping on, since we want it to repeat while the image is 'Downloading'
    animationView.loopAnimation = true
    // Now play from 0 to 0.5 progress and loop indefinitely.
    animationView.play(fromProgress: 0, toProgress: 0.5, withCompletion: nil)
    
    // Lets simulate a download that finishes in 4 seconds.
    let dispatchTime = DispatchTime.now() + 4.0
    DispatchQueue.main.asyncAfter(deadline: dispatchTime) {
      self.simulateImageDownloaded()
    }
  }
  
  func simulateImageDownloaded() {
    // Our downloaded image
    let image = UIImage(named: "avatar.jpg")
    let imageView = UIImageView(image: image)

    // We want the image to show up centered in the animation view at 150Px150P
    // Convert that rect to the animations coordinate space
    // The origin is set to -75, -75 because the origin is centered in the animation view
    let imageRect = animationView.convert(CGRect(x: -75, y: -75, width: 150, height: 150), toLayerNamed: nil)
    
    // Setup our image view with the rect and add rounded corners
    imageView.frame = imageRect
    imageView.layer.masksToBounds = true
    imageView.layer.cornerRadius = imageRect.width / 2;
    
    // Now we set the completion block on the currently running animation
    animationView.completionBlock = { (result: Bool) in ()
      // Add the image view to the layer named "TransformLayer"
      self.animationView.addSubview(imageView, toLayerNamed: "TransformLayer", applyTransform: true)
      // Now play the last half of the animation
      self.animationView.play(fromProgress: 0.5, toProgress: 1, withCompletion: { (complete: Bool) in
        // Now the animation has finished and our image is displayed on screen
        print("Image Downloaded and Displayed")
      })
    }
    
    // Turn looping off. Once the current loop finishes the animation will stop 
    // and the completion block will be called.
    animationView.loopAnimation = false
  }
  
}

Changing Animations At Runtime - 在运行时更改动画

Lottie可以做的不仅仅是播放美丽的动画。 Lottie允许您在运行时更改动画。

下面看一下例子,包含了四个开关。

一种动画框架Lottie的解析(二)—— 基本介绍(二)_第4张图片

下面看实现代码

let animationView = LOTAnimationView(name: "toggle");
self.view.addSubview(animationView)
animationView.frame.origin.x = 40
animationView.frame.origin.y = 20
animationView.autoReverseAnimation = true
animationView.loopAnimation = true
animationView.play()

let animationView2 = LOTAnimationView(name: "toggle");
self.view.addSubview(animationView2)
animationView2.frame.origin.x = 40
animationView2.frame.origin.y = animationView.frame.maxY + 4
animationView2.autoReverseAnimation = true
animationView2.loopAnimation = true
animationView2.play()

let animationView3 = LOTAnimationView(name: "toggle");
self.view.addSubview(animationView3)
animationView3.frame.origin.x = 40
animationView3.frame.origin.y = animationView2.frame.maxY + 4
animationView3.autoReverseAnimation = true
animationView3.loopAnimation = true
animationView3.play()

let animationView4 = LOTAnimationView(name: "toggle");
self.view.addSubview(animationView4)
animationView4.frame.origin.x = 40
animationView4.frame.origin.y = animationView3.frame.maxY + 4
animationView4.autoReverseAnimation = true
animationView4.loopAnimation = true
animationView4.play()

下面接着我们更改开关的颜色

一种动画框架Lottie的解析(二)—— 基本介绍(二)_第5张图片

下面看实现代码

animationView2.setValue(UIColor.green, forKeypath: "BG-On.Group 1.Fill 1.Color", atFrame: 0)
animationView3.setValue(UIColor.red, forKeypath: "BG-On.Group 1.Fill 1.Color", atFrame: 0)
animationView4.setValue(UIColor.orange, forKeypath: "BG-On.Group 1.Fill 1.Color", atFrame: 0)
[animationView2 setValue:[UIColor greenColor] forKeypath:@"BG-On.Group 1.Fill 1.Color" atFrame:@0];

keyPathAfter Effects中图层和属性名称的点分隔路径。 LOTAnimationView提供- (void)logHierarchyKeypaths,它会递归地记录动画的所有可设置的关键字。

一种动画框架Lottie的解析(二)—— 基本介绍(二)_第6张图片

现在让我们改变一些属性。

一种动画框架Lottie的解析(二)—— 基本介绍(二)_第7张图片
animationView2.setValue(UIColor.green, forKeypath: "BG-On.Group 1.Fill 1.Color", atFrame: 0)
animationView2.setValue(UIColor.red, forKeypath: "BG-Off.Group 1.Fill 1.Color", atFrame: 0)

Lottie允许您更改After Effects中可动画的任何属性。 如果关键帧不存在,则为您创建一个线性关键帧。 如果关键帧确实存在,那么只是其数据被替换。


Animated Controls and Switches - 动画控制和开关

一种动画框架Lottie的解析(二)—— 基本介绍(二)_第8张图片

Lottie还拥有UIControl的自定义子类,用于创建自定义的动画交互式控件。 目前,Lottie拥有LOTAnimatedSwitch,它是一种切换式开关控制。 开关开关播放开启或关闭动画,并向所有目标发送UIControlStateValueChanged广播。 与使用UISwitch的方式相同,使用几个附加功能来设置Lottie的动画。

您可以使用方便方法或直接提供动画来初始化开关。

// Convenience
LOTAnimatedSwitch *toggle1 = [LOTAnimatedSwitch switchNamed:@"Switch"];
 
// Manually 
LOTComposition *comp = [LOTComposition animationNamed:@"Switch"];
LOTAnimatedSwitch *toggle1 = [[LOTAnimatedSwitch alloc] initWithFrame:CGRectZero];
[toggle1 setAnimationComp:comp];

您还可以为开机和关闭动画指定动画时间轴的特定部分。 默认情况下,LOTAnimatedSwitch将向前开始播放动画,然后向后结束播放动画。

让我们说,提供的动画从0.5-1开启和从0-0.5关闭动画。

/// On animation is 0.5 to 1 progress.
[toggle1 setProgressRangeForOnState:0.5 toProgress:1];

/// Off animation is 0 to 0.5 progress.
[toggle1 setProgressRangeForOffState:0 toProgress:0.5];

此外,所有LOTAnimatedControls都增加了状态更改外观更改的支持。 这需要After Effects中的一些设置。 Lottie将根据控件状态切换可见的动画图层。 这可以用于具有DisabledselectedHighlighted状态。 这些状态与After Effects中的图层名称相关联,并作为控件更改状态动态显示。

假设我们有一个具有Normal和Disable状态的开关。 在效果中,我们有一个组合包含常规“按钮”和禁用的“ Disable”状态的Precomps。 他们有不同的视觉风格。

一种动画框架Lottie的解析(二)—— 基本介绍(二)_第9张图片
一种动画框架Lottie的解析(二)—— 基本介绍(二)_第10张图片

现在在代码中,我们可以将UIControlState与这些层相关联。

// Specify the layer names for different states
[statefulSwitch setLayerName:@"Button" forState:UIControlStateNormal];
[statefulSwitch setLayerName:@"Disabled" forState:UIControlStateDisabled];

// Changes visual appearance by switching animation layer to "Disabled"
statefulSwitch.enabled = NO;

// Changes visual appearance by switching animation layer to "Button"
statefulSwitch.enabled = YES;

Supported After Effects Features - 支持After Effects功能

1. Keyframe Interpolation - 关键帧插值

  • Linear Interpolation - 线性插值
  • Bezier Interpolation - 贝塞尔插值
  • Hold Interpolation - 保持插值
  • Rove Across Time - 漫长的时间
  • Spatial Bezier - 空间贝塞尔

2. Solids

  • Transform Anchor Point - 改变锚点
  • Transform Position - 转变位置
  • Transform Scale - 改变尺寸
  • Transform Rotation - 改变旋转
  • Transform Opacity - 改变不透明度

3. Masks - 遮罩

  • Path - 路径
  • Opacity - 不透明度
  • Multiple Masks (additive, subtractive and intersection) - 多重掩模(加法,减法和交叉)

4. Track Mattes

  • Alpha Matte

5. Parenting

  • Multiple Parenting
  • Nulls

6. Shape Layers

  • Anchor Point
  • Position
  • Scale
  • Rotation
  • Opacity
  • Path
  • Group Transforms (Anchor point, position, scale etc) - 组变换(锚点,位置,尺度等)
  • Rectangle (All properties) - 矩形(所有属性)
  • Eclipse (All properties) - 椭圆(所有属性)
  • paths in one group - 一组中有多条路径
  • Even-Odd winding paths - 基偶绕数路径
  • Reverse Fill Rule - 反向填充规则

7. Stroke (shape layer)

  • Stroke Color
  • Stroke Opacity
  • Stroke Width
  • Line Cap
  • Dashes (Now Animated!)

8. Fill (shape layer)

  • Fill Color
  • Fill Opacity

9. Trim Paths (shape layer)

  • Trim Paths Start
  • Trim Paths End
  • Trim Paths Offset

10. Repeaters

  • Supports repeater transforms
  • Offset currently not supported

11. Gradients

  • Support for Linear Gradients
  • Support for Radial Gradients

12. Polystar and Polygon

  • Supported! Theres a known bug if the roundness is greater than 100 percent

13. Layer Features

  • Precomps
  • Image Layers
  • Shape Layers
  • Null Layers
  • Solid Layers
  • Parenting Layers
  • Alpha Matte Layers

14. Currently Unsupported After Effects Features

  • Merge Shapes
  • Alpha Inverted Masks
  • Trim Shapes Individually feature of Trim Paths
  • Expressions
  • 3d Layer support
  • Time remapping / Layer Reverse
  • Layer Blend Modes
  • Layer Effects

可替代方案

  • 手工制作动画。 手工制作动画是Android和iOS设计工程需要巨大的时间。 花费太多时间来制作动画通常很难甚至不可能。
  • Facebook Keyframes,关键帧是Facebook构建的一个非常好的新库。 然而,关键帧不支持一些Lottie的功能,如遮罩,修剪路径等等。
  • GIF。Gif的体积大小是bodymovin JSON的两倍,并且呈现为固定大小,无法按比例扩大以匹配大型和高密度屏幕。
  • Png序列。 Png序列甚至比gif更差,因为它们的文件大小通常是bodymovin json的大小的30-50倍,也不能放大。

后记

未完,待续~~

一种动画框架Lottie的解析(二)—— 基本介绍(二)_第11张图片

你可能感兴趣的:(一种动画框架Lottie的解析(二)—— 基本介绍(二))