美文网首页工作生活
源码阅读计划:lottie

源码阅读计划:lottie

作者: 亲爱的八路 | 来源:发表于2019-07-02 11:06 被阅读0次

lottie是一个动画库,能使用ae导出的json文件直接生成动画。最新版的lottie有些复杂,于是我下载了lottie1.0,这样锦上添花的功能少一点,能直接看到核心功能(先写lottie1.0动画实现部分,未完待续)

lottie生成动画过程:

  • 读取json文件
  • 生成帧动画CAKeyframeAnimation
读取json文件

形成存储数据的结构体,它最上层的结构体叫LAComposition(下面是笔者用swift写的伪代码,真实的lottie1.0是用oc写的):

/* json的最上层结构,没啥特殊功能,就是个数据容器 */
struct LAComposition {
    var layers: [LALayer]? //界面和动画信息的复合体,里面有界面数据,也有动画数据
    var compBounds: CGRect?
    var startFrame: NSNumber?
    var endFrame: NSNumber?
    var framerate: NSNumber? //动画播放的速度,设置成2会用2倍速率播放动画
    var timeDuration: TimeInterval? //动画总共的时间
    
    init(with json: [String: Any]) {
        mapFromJson(jsonDic: json)
    }
    
    func mapFromJson(jsonDic: [String: Any]) {
        //从json dic中提取自己上面的那些属性
    }
}

其中的layes属性是LALayer数组,LALayer存储着界面的图形数据和动画数据。这里只写了动画数据相关的属性

/* 界面显示信息 + 动画信息,一个LALayer可以生成一个CALayer */
struct LALayer {
    /*
        LAAnimatableXXXValue 是(xxx类型 + 动画信息)
        比如LAAnimatableNumberValue,可以用来解析number类型的动画或者就是单纯的number类型
     */
    var opacity: LAAnimatableNumberValue? //对应layer.opacity
    var rotation: LAAnimatableNumberValue? //sublayerTransform.rotation
    var position: LAAnimatablePointValue? //position
    
    var anchor: LAAnimatablePointValue? //anchorPoint
    var scale: LAAnimatableScaleValue? //transform
    
    init(with json: [String: Any], from composition: LAComposition) {
        map(from: json, from: composition)
    }
    
    func map(from json: [String: Any], from composition: LAComposition) {
        //从json dic中提取自己上面的那些属性
    }
}

其中LAAnimatableNumberValue、LAAnimatablePointValue、LAAnimatableScaleValue是CAKeyframeAnimation的过渡,他们可以从json文件中解析CAKeyframeAnimation需要的值,通过LAAnimatableValue协议提供了转换成CAKeyframeAnimation的方法

protocol LAAnimatableValue {
    func hasAnimation() -> Bool
    func animation(for keyPath: String) -> CAKeyframeAnimation?
}

/* 用来解析point类型和point类型的动画信息 */
struct LAAnimatablePointValue {
    //动画路径,对应CAKeyframeAnimation中的path
    var animationPath: UIBezierPath?
    
    //路径上的关键点,对应CAKeyframeAnimation中的values
    //和animationPath提供的信息一样,所以互斥,有animationPath的情况下不会使用pointKeyframes
    var pointKeyframes: [CGPoint]?
    
    //值在0-1之间,是动画进度的意思
    var keyTimes: [CGFloat]?
    
    //时间的映射,可以控制动画的速度,实现先快后慢、先慢后快等这样的效果。系统的easyIn啥啥的动画效果就是用这个来实现的
    var timingFunctions: [CAMediaTimingFunction]?
    
    //动画总时长
    var duration: TimeInterval?
    
    var startFrame: Int?
    var durationFrames: Int?
    var frameRate: CGFloat?
}

/* 用来解析number类型和number类型的动画信息 */
struct LAAnimatableNumberValue {
    //值的变化,对应CAKeyframeAnimation中的values
    var valueKeyframes: [CGFloat]?
    
    //其他属性同LAAnimatablePointValue
}

/* 用来解析transform类型和transform类型的动画信息 */
struct LAAnimatableScaleValue {
    //值的变化,对应CAKeyframeAnimation中的values
    var scaleKeyframes: [CATransform3D]?
    
    //其他属性同LAAnimatablePointValue
}

然后LALayerView,一个CALayer类型,就可以从LAComposition获取LALayer,再然后获取到遵循LAAnimatableValue协议的动画的类型,然后转换一下,就从LAAnimatableValue类型获取到了CAKeyframeAnimation。CAKeyframeAnimation加入到LALayerView中,就可以进行动画了

相关文章

  • 源码阅读计划:lottie

    lottie是一个动画库,能使用ae导出的json文件直接生成动画。最新版的lottie有些复杂,于是我下载了lo...

  • Android之Lottie动画详解(非原创)

    文章大纲 一、Lottie介绍二、Lottie实战三、项目源码下载四、参考文章 一、Lottie介绍 1. 什么是...

  • Lottie源码分析

    简介 我们使用Lottie的时候,最关键的类就是LottieAnimationView(继承自ImageView)...

  • lottie源码分析

    lottie简介 Lottie是Airbnb开源的一个动画渲染库,同时支持Android、IOS、React Na...

  • Lottie iOS 源码研究

    Lottie是什么,怎么用这里就不多说了。一开始我还稍微有点抗拒,觉得这种东西肯定没有手写的动画效果好,但用了以后...

  • Python框架之Tornado(概述)

    本系列博文计划: 1、剖析基于Python的Web框架Tornado的源码,为何要阅读源码? Tornado 由前...

  • redis 源码阅读计划

    从进开始进行 redis 源码的阅读,每天下班之余用于学习 redis 并做好笔记。贵在坚持,希望自己可以坚持学习...

  • 源码阅读计划 - ARouter

    初始化 ARouter的源码相对来讲还是比较简单易懂的,我们先从初始化部分的逻辑开始看。它的初始化代码只有一行,一...

  • 源码阅读计划 - LiveData

    LiveData是Jetpack里一个十分常用的组件,它是一个可以被观察的数据源。能够感知 Activity等的生...

  • 源码阅读计划-EventBus

    EventBus的api很简单: 注册监听的原理 坦白讲内部的实现原理也挺简单的,我们从注册开始看: 使用Find...

网友评论

    本文标题:源码阅读计划:lottie

    本文链接:https://www.haomeiwen.com/subject/esfzcctx.html