源码阅读计划：lottie

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中，就可以进行动画了

最后编辑于：2019.07.02 11:32:05