源码阅读计划: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中,就可以进行动画了

你可能感兴趣的:(源码阅读计划:lottie)