Lottie 学习记录

什么是Lottie？

首先要说的是：什么是Lottie呢？由Airbnb开发的Lottie是一个将After Effects动画提供给任意一个iOS，macOS，Android还有React Native原生APP的文件库。这些动画通过一个叫Bodymovin的开源After Effects插件，以JSON文件的形式进行输出。Lottie通过JSON格式下载动画数据并实时提供给开发者。

换句话说，你也可以通过设计器直接把JSON文件放入Xcode project，让Lottie帮你下载动画。当然别误会，你还是需要为你的动画写一些代码，但是你会发现Lottie的确将为你的动画编码节省大量的时间。

Lottie现在不仅在GitHub上已经开源，而且还提供一个示例项目和一系列的示例动画，看看下面有没有你能用在iOS Apps当中示例动画吧。

image

image

image

Lottie 动画文件

在使用Lottie之前，你需要一个以JSON文件形式输出的动画数据库。如果你已经有了一个After Effects动画，用Bodymovin插件来创建JSON文件。

如果你不会使用After Effects呢？你要如何准备你的动画？你可以雇一位设计师为你设计动画，或者你学会用After Effects。
幸运的是，这里还有一个选项，那就是：Lottie Files

image

借鉴文章https://www.jianshu.com/p/230bda17a2b5

1. 下载动画.json文件，导入xcode；
2. 首先导入lottie库，cocopods导入；
3. import Lottie or ;
4. 代码实现

   // 动画view
//        let animationView = AnimationView(name: "39937-4-van")
        
        /* 这里可以设置bundle，name，animationCache，
       其中animationCache缓存，默认LRUAnimationCache.sharedCache，设置为nil，不缓存，根据实际情况设置；
       如果是小图、常用，可以缓存；如果是启动图、引导图，可以设置为nil，不缓存。*/
        let animationView = AnimationView(name: "39937-4-van", bundle: .main, imageProvider: nil, animationCache: nil)

        animationView.bounds = CGRect(x: 0, y: 0, width: 400, height: 400)
        animationView.center = self.view.center
        // 适配模式
        animationView.contentMode = .scaleAspectFill
        // 循环模式
        animationView.loopMode = .playOnce
        // 播放速度（负数会特别快播放完，不论赋值多少）
        animationView.animationSpeed = 0.5
        // App退至后台动画行为，默认暂停
        animationView.backgroundBehavior = .pause
        
        view.addSubview(animationView)
        
        // 播放
        animationView.play()
        // 播放并完成回调
        animationView.play { (finish) in
            
        }
        // 从哪帧开始播放， toFrame 帧数
        animationView.play(toFrame: 2)
        animationView.play(fromFrame: 2, toFrame: 19, loopMode: .playOnce) { (finish) in
            
        }
        // 从哪个marker开始播放，toMarker可以理解为标记
        animationView.play(toMarker: "start")
        animationView.play(fromMarker: "start", toMarker: "end", loopMode: .autoReverse) { (finish) in
            
        }
        // 从多少进度开始播放（0~1）
        animationView.play(toProgress: 0.3)
        animationView.play(fromProgress: 0.2, toProgress: 0.9, loopMode: .playOnce) { (finish) in
            
        }

5. 其它属性

 /**
   Sets the animation backing the animation view. Setting this will clear the
   view's contents, completion blocks and current state. The new animation will
   be loaded up and set to the beginning of its timeline.
   */
  public var animation: Animation? {
    didSet {
      makeAnimationLayer()
    }
  }

/// Set animation name from Interface Builder
  @IBInspectable var animationName: String? {
    didSet {
      self.animation = animationName.flatMap {
        Animation.named($0, animationCache: nil)
      }
    }
  }

/**
   Sets the image provider for the animation view. An image provider provides the
   animation with its required image data.
   
   Setting this will cause the animation to reload its image contents.
   */
  public var imageProvider: AnimationImageProvider {
    didSet {
      reloadImages()
    }
  }

/**
   Sets the text provider for animation view. A text provider provides the
   animation with values for text layers
   */
   public var textProvider: AnimationTextProvider {
     didSet {
       animationLayer?.textProvider = textProvider
     }
  }

/**
   Sets the text provider for animation view. A text provider provides the
   animation with values for text layers
   */
   public var fontProvider: AnimationFontProvider {
     didSet {
       animationLayer?.fontProvider = fontProvider
     }
  }

/// Returns `true` if the animation is currently playing.
  public var isAnimationPlaying: Bool {
    return animationLayer?.animation(forKey: activeAnimationName) != nil
  }
  
  /// Returns `true` if the animation will start playing when this view is added to a window.
  public var isAnimationQueued: Bool {
    return animationContext != nil && waitingToPlayAnimation
  }

/**
   When `true` the animation view will rasterize its contents when not animating.
   Rasterizing will improve performance of static animations.
   
   Note: this will not produce crisp results at resolutions above the animations natural resolution.
   
   Defaults to `false`
   */
  public var shouldRasterizeWhenIdle: Bool = false {
    didSet {
      updateRasterizationState()
    }
  }

/**
   Sets the current animation time with a Progress Time
   
   Note: Setting this will stop the current animation, if any.
   Note 2: If `animation` is nil, setting this will fallback to 0
   */
  public var currentProgress: AnimationProgressTime {
    set {
      if let animation = animation {
        currentFrame = animation.frameTime(forProgress: newValue)
      } else {
        currentFrame = 0
      }
    }
    get {
      if let animation = animation {
        return animation.progressTime(forFrame: currentFrame)
      } else {
        return 0
      }
    }
  }

/**
   Sets the current animation time with a time in seconds.
   
   Note: Setting this will stop the current animation, if any.
   Note 2: If `animation` is nil, setting this will fallback to 0
   */
  public var currentTime: TimeInterval {
    set {
      if let animation = animation {
        currentFrame = animation.frameTime(forTime: newValue)
      } else {
        currentFrame = 0
      }
    }
    get {
      if let animation = animation {
        return animation.time(forFrame: currentFrame)
      } else {
        return 0
      }
    }
  }

/**
   Sets the current animation time with a frame in the animations framerate.
   
   Note: Setting this will stop the current animation, if any.
   */
  public var currentFrame: AnimationFrameTime {
    set {
      removeCurrentAnimation()
      updateAnimationFrame(newValue)
    }
    get {
      return animationLayer?.currentFrame ?? 0
    }
  }
......

6. 截图

   
   
   截屏2020-11-25 下午5.48.43.png

截屏2020-11-25 下午5.50.02.png