Giter Club home page Giter Club logo

lottieinvideo's Introduction

LottieInVideo

Render Lottie in video by AVFoundation

PAG vs Lottie

渲染矢量动画到视频里面,PAG更适合做这件事。
Rendering vector animation in video, PAG is best for this job than lottie.

Lottie 3.1.0

分支 master 使用的 Lottie 版本

Lottie 2.5.2

分支 lottie-2.5.2 在 Lottie 2.5.2 版本,Lottie 重构了生成动画的方案。新的方案使用了各种插值器(Interpolate)来生成每一帧的贝塞尔曲线/点等等,最后用CoreGraphics来画。所以我们可以对layer做截图,然后把生成的图片和视频图片进行叠加。

Lottie 1.0.4

在 Lottie 1.0.4 版本,Lottie 是基于 CAAnimation 实现的动画,那时候合成到视频中需要借助 AVVideoCompositionanimationTool

    let instruction = AVMutableVideoCompositionInstruction()
    instruction.timeRange = CMTimeRange(start: CMTime.zero, duration: asset.duration)
    instruction.layerInstructions = [layerInstruction]
    videoComposition.instructions = [instruction]
    if let animationLayer = createStickerLayer(in: renderSize) {
        let parentLayer = CALayer()
        let videoLayer = CALayer()
        let contentLayer = CALayer()
        parentLayer.frame = CGRect(x: 0, y: 0, width: renderSize.width, height: renderSize.height)
        videoLayer.frame = CGRect(x: 0, y: 0, width: renderSize.width, height: renderSize.height)
        contentLayer.frame = CGRect(x: 0, y: 0, width: renderSize.width, height: renderSize.height)
        contentLayer.addSublayer(animationLayer)
        contentLayer.isGeometryFlipped = true
        parentLayer.addSublayer(videoLayer)
        parentLayer.addSublayer(contentLayer)
        videoComposition.animationTool = AVVideoCompositionCoreAnimationTool(postProcessingAsVideoLayer: videoLayer, in: parentLayer)
    }

    private func createStickerLayer(in size: CGSize) -> CALayer? {
        guard let sticker = sticker else { return nil }
        let layer = CALayer()
        layer.frame = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        do {
            let animationData = try Data(contentsOf: URL(fileURLWithPath: sticker.url))
            if let animationJSON = try JSONSerialization.jsonObject(with: animationData, options: JSONSerialization.ReadingOptions(rawValue: UInt(0))) as? Dictionary<String, Any> {
                let animationLayer = LOTAnimationLayer.animation(fromJSON: animationJSON, customData: [], loop: false)!
                animationLayer.bounds = sticker.bounds(containerBounds: layer.bounds)
                animationLayer.position = sticker.center(containerBounds: layer.bounds)
                animationLayer.setAffineTransform(sticker.transform)
                animationLayer.beginTime = sticker.range.start.seconds
                animationLayer.duration = sticker.range.duration.seconds
                animationLayer.speed = sticker.speed
                layer.addSublayer(animationLayer)
            }
        } catch let e {
            print(e)
        }
        return layer
    }

lottieinvideo's People

Contributors

lvpengwei avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

lottieinvideo's Issues

Export as Gif

Can you show an example in the ReadMe on how to export as Gif instead of embedding in video. Also, if it’s possible to export frames from the Lottie animation so that it can be converted to webp,Apng, Gif e.t.c….thanks

Feature request - Repeat animation

Hi!

Right now you can save lottie animation in a video only by playing the animation one time.
Can you have loop mode ON so you can export the animation playing multiple times before the video ends?
Thanks!

Regards, Drakos

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.