@lumen5/lottie-web 5.14.0

package/docs/json/sources/image.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "http://json-schema.org/draft-04/schema#",
+  "type": "object",
+  "properties": {
+    "h": {
+      "title": "Height",
+      "description": "Image Height",
+      "type": "number"
+    },
+    "w": {
+      "title": "Width",
+      "description": "Image Width",
+      "type": "number"
+    },
+    "id": {
+      "title": "ID",
+      "description": "Image ID",
+      "type": "string"
+    },
+    "p": {
+      "title": "Image name",
+      "description": "Image name",
+      "type": "string"
+    },
+    "u": {
+      "title": "Image path",
+      "description": "Image path",
+      "type": "string"
+    }
+  }
+}

package/docs/json/sources/precomp.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "http://json-schema.org/draft-04/schema#",
+  "type": "object",
+  "properties": {
+    "id": {
+      "title": "ID",
+      "description": "Precomp ID",
+      "type": "string"
+    },
+    "layers": {
+      "title": "Layers",
+      "description": "List of Precomp Layers",
+      "items": {
+        "oneOf": [
+          {
+            "$ref": "#/layers/shape"
+          },
+          {
+            "$ref": "#/layers/solid"
+          },
+          {
+            "$ref": "#/layers/preComp"
+          },
+          {
+            "$ref": "#/layers/image"
+          },
+          {
+            "$ref": "#/layers/null"
+          },
+          {
+            "$ref": "#/layers/text"
+          }
+        ],
+        "type": "object"
+      },
+      "type": "array"
+    }
+  }
+}

package/index.d.ts

@@ -0,0 +1,197 @@
+export type AnimationDirection = 1 | -1;
+export type AnimationSegment = [number, number];
+export type AnimationEventName = 'drawnFrame' | 'enterFrame' | 'loopComplete' | 'complete' | 'segmentStart' | 'destroy' | 'config_ready' | 'data_ready' | 'DOMLoaded' | 'error' | 'data_failed' | 'loaded_images';
+export type AnimationEventCallback<T = any> = (args: T) => void;
+
+/** Specifies the data for each event type. */
+export interface AnimationEvents {
+  DOMLoaded: undefined;
+  complete: BMCompleteEvent;
+  config_ready: undefined;
+  data_failed: undefined;
+  data_ready: undefined;
+  destroy: BMDestroyEvent;
+  drawnFrame: BMEnterFrameEvent;
+  enterFrame: BMEnterFrameEvent;
+  error: undefined;
+  loaded_images: undefined;
+  loopComplete: BMCompleteLoopEvent;
+  segmentStart: BMSegmentStartEvent;
+}
+
+export interface BMCompleteEvent {
+  direction: number;
+  type: "complete";
+}
+
+export interface BMCompleteLoopEvent {
+  currentLoop: number;
+  direction: number;
+  totalLoops: number;
+  type: "loopComplete";
+}
+
+export interface BMDestroyEvent {
+  type: "destroy";
+}
+
+export interface BMEnterFrameEvent {
+  /** The current time in frames. */
+  currentTime: number;
+  direction: number;
+  /** The total number of frames. */
+  totalTime: number;
+  type: "enterFrame";
+}
+
+export interface BMSegmentStartEvent {
+  firstFrame: number;
+  totalFrames: number;
+  type: "segmentStart";
+}
+
+export type AnimationItem = {
+    name: string;
+    isLoaded: boolean;
+    currentFrame: number;
+    currentRawFrame: number;
+    firstFrame: number;
+    totalFrames: number;
+    frameRate: number;
+    frameMult: number;
+    playSpeed: number;
+    playDirection: number;
+    playCount: number;
+    isPaused: boolean;
+    autoplay: boolean;
+    loop: boolean | number;
+    renderer: any;
+    animationID: string;
+    assetsPath: string;
+    timeCompleted: number;
+    segmentPos: number;
+    isSubframeEnabled: boolean;
+    segments: AnimationSegment | AnimationSegment[];
+    play(name?: string): void;
+    stop(name?: string): void;
+    togglePause(name?: string): void;
+    destroy(name?: string): void;
+    pause(name?: string): void;
+    goToAndStop(value: number | string, isFrame?: boolean, name?: string): void;
+    goToAndPlay(value: number | string, isFrame?: boolean, name?: string): void;
+    includeLayers(data: any): void;
+    setSegment(init: number, end: number): void;
+    resetSegments(forceFlag: boolean): void;
+    hide(): void;
+    show(): void;
+    resize(width?: number, height?: number): void;
+    setSpeed(speed: number): void;
+    setDirection(direction: AnimationDirection): void;
+    setLoop(isLooping: boolean): void;
+    playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag?: boolean): void;
+    setSubframe(useSubFrames: boolean): void;
+    getDuration(inFrames?: boolean): number;
+    triggerEvent<T extends AnimationEventName>(name: T, args: AnimationEvents[T]): void;
+    addEventListener<T extends AnimationEventName>(name: T, callback: AnimationEventCallback<AnimationEvents[T]>): () => void;
+    removeEventListener<T extends AnimationEventName>(name: T, callback?: AnimationEventCallback<AnimationEvents[T]>): void;
+}
+
+export type BaseRendererConfig = {
+    imagePreserveAspectRatio?: string;
+    className?: string;
+};
+
+export type SVGRendererConfig = BaseRendererConfig & {
+    title?: string;
+    description?: string;
+    preserveAspectRatio?: string;
+    progressiveLoad?: boolean;
+    hideOnTransparent?: boolean;
+    viewBoxOnly?: boolean;
+    viewBoxSize?: string;
+    focusable?: boolean;
+    filterSize?: FilterSizeConfig;
+};
+
+export type CanvasRendererConfig = BaseRendererConfig & {
+    clearCanvas?: boolean;
+    context?: CanvasRenderingContext2D;
+    progressiveLoad?: boolean;
+    preserveAspectRatio?: string;
+    dpr?: number;
+};
+
+export type HTMLRendererConfig = BaseRendererConfig & {
+    hideOnTransparent?: boolean;
+};
+
+export type RendererType = 'svg' | 'canvas' | 'html';
+
+export type AnimationConfig<T extends RendererType = 'svg'> = {
+    container: Element;
+    renderer?: T;
+    loop?: boolean | number;
+    autoplay?: boolean;
+    initialSegment?: AnimationSegment;
+    name?: string;
+    assetsPath?: string;
+    rendererSettings?: {
+        svg: SVGRendererConfig;
+        canvas: CanvasRendererConfig;
+        html: HTMLRendererConfig;
+    }[T]
+    audioFactory?(assetPath: string): {
+        play(): void
+        seek(): void
+        playing(): void
+        rate(): void
+        setVolume(): void
+    }
+}
+
+export type TextDocumentData = {
+    t?: string;
+    s?: number;
+    f?: string;
+    ca?: number;
+    j?: number;
+    tr?: number;
+    lh?: number;
+    ls?: number;
+    fc?: [number, number, number];
+}
+
+export type AnimationConfigWithPath<T extends RendererType = 'svg'> = AnimationConfig<T> & {
+    path?: string;
+}
+
+export type AnimationConfigWithData<T extends RendererType = 'svg'> = AnimationConfig<T> & {
+    animationData?: any;
+}
+
+export type FilterSizeConfig = {
+    width: string;
+    height: string;
+    x: string;
+    y: string;
+};
+
+export type LottiePlayer = {
+    play(name?: string): void;
+    pause(name?: string): void;
+    stop(name?: string): void;
+    setSpeed(speed: number, name?: string): void;
+    setDirection(direction: AnimationDirection, name?: string): void;
+    searchAnimations(animationData?: any, standalone?: boolean, renderer?: string): void;
+    loadAnimation<T extends RendererType = 'svg'>(params: AnimationConfigWithPath<T> | AnimationConfigWithData<T>): AnimationItem;
+    destroy(name?: string): void;
+    registerAnimation(element: Element, animationData?: any): void;
+    setQuality(quality: string | number): void;
+    setLocationHref(href: string): void;
+    setIDPrefix(prefix: string): void;
+    updateDocumentData(path: (string|number)[], documentData: TextDocumentData, index: number): void;
+};
+
+declare const Lottie: LottiePlayer;
+
+export default Lottie;

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@lumen5/lottie-web",
+  "version": "5.14.0",
+  "description": "After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript",
+  "main": "./build/player/lottie.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Lumen5/lottie-web.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "npx eslint ./player/js/**/* && rollup -c && node tasks/build_worker",
+    "build_test": "node tasks/build.js",
+    "lint": "npx eslint ./player/js/**/*",
+    "lint:fix": "npx eslint ./player/js/**/* --fix",
+    "test:create": "node test/index.js",
+    "test:compare": "node test/index.js -s compare",
+    "serve": "npx serve -p 3000",
+    "dev": "npm run build && npx serve -p 3000"
+  },
+  "keywords": [
+    "animation",
+    "canvas",
+    "svg",
+    "after effects",
+    "plugin",
+    "export"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.4",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "cheerio": "^1.0.0-rc.2",
+    "command-line-args": "^5.2.1",
+    "eslint": "^7.16.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "express": "^4.18.2",
+    "pixelmatch": "^5.3.0",
+    "pngjs": "^7.0.0",
+    "puppeteer": "^24.40.0",
+    "rollup": "^2.61.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "uglify-js": "^3.4.9",
+    "watch": "^1.0.2"
+  },
+  "types": "./index.d.ts",
+  "license": "MIT"
+}

package/player/index.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8">
+    <style>
+        body, html{
+            background-color:#ccc;
+            margin: 0px;
+            height: 100%;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+
+        #pusher{
+            background-color:#ccc;
+            width:100%;
+            height:0%;
+            display:block;
+            overflow: hidden;
+            transform: translate3d(0,0,0);
+            /*display:none;*/
+        }
+
+        #lottie{
+            background-color:#ccc;
+            width:100%;
+            height:100%;
+            display:block;
+            overflow: hidden;
+            transform: translate3d(0,0,0);
+            /*display:none;*/
+        }
+
+    </style>
+    <!-- build:js lottie.js -->
+    
+    <!-- end Expressions -->
+    <!-- endbuild -->
+    <!-- <script src="js/module.js" type="module"></script> -->
+    <!-- <script src="lottie.js"></script> -->
+    <!-- <script src="bodymovin_light.js"></script> -->
+
+
+
+</head>
+<body>
+<div id="pusher"></div>
+<div id="lottie"></div>
+
+<script>
+    var anim;
+    import('./js/modules/full.js').then(({default: lottie }) => {
+        var elem = document.getElementById('lottie');
+        var animData = {
+            container: elem,
+            renderer: 'svg',
+            loop: 3,
+            autoplay: true,
+            rendererSettings: {
+                progressiveLoad:false,
+                preserveAspectRatio: 'xMidYMid meet',
+                imagePreserveAspectRatio: 'xMidYMid meet',
+                title: 'TEST TITLE',
+                description: 'TEST DESCRIPTION',
+                filterSize: {
+                    width: '500%',
+                    height: '500%',
+                    x: '-200%',
+                    y: '-200%',
+                }
+            },
+            path: 'exports/render/data.json',
+            audioFactory: createAudio,
+        };
+        // lottie.setQuality('low');
+        // anim.setSpeed(0.5)
+        // lottie.useWebWorker(true);
+        window.lottie = lottie;
+        setTimeout(() => {
+
+            anim = lottie.loadAnimation(animData);
+            anim.setSubframe(false);
+            anim.onError = function(errorType, nativeError, errorProps) {
+                console.log(errorType)
+            }
+            
+            anim.addEventListener('error', function(error) {
+                console.log(error)
+            })
+            
+            anim.addEventListener('error', function(error) {
+                console.log(error)
+            })
+            
+            anim.addEventListener('DOMLoaded', function() {
+                // setTimeout(()=>{
+                //     console.log('UPDATEING TEXT');
+                //     anim.updateDocumentData(['a_text','adwqd'], {t: 'eeee'});
+                // }, 100)
+            })
+        }, 1)
+    });
+        
+    // setTimeout(()=>anim.destroy(), 1000);
+
+    function createAudio(assetPath) {
+        return new Howl({
+            src: [assetPath]
+        })
+    }
+
+</script>
+
+</body>
+</html>

package/player/js/3rd_party/BezierEaser.js

@@ -0,0 +1,158 @@
+/* eslint-disable */
+const BezierFactory = (function () {
+  /**
+     * BezierEasing - use bezier curve for transition easing function
+     * by Gaëtan Renaudeau 2014 - 2015 – MIT License
+     *
+     * Credits: is based on Firefox's nsSMILKeySpline.cpp
+     * Usage:
+     * var spline = BezierEasing([ 0.25, 0.1, 0.25, 1.0 ])
+     * spline.get(x) => returns the easing value | x must be in [0, 1] range
+     *
+     */
+
+  var ob = {};
+  ob.getBezierEasing = getBezierEasing;
+  var beziers = {};
+
+  function getBezierEasing(a, b, c, d, nm) {
+    var str = nm || ('bez_' + a + '_' + b + '_' + c + '_' + d).replace(/\./g, 'p');
+    if (beziers[str]) {
+      return beziers[str];
+    }
+    var bezEasing = new BezierEasing([a, b, c, d]);
+    beziers[str] = bezEasing;
+    return bezEasing;
+  }
+
+  // These values are established by empiricism with tests (tradeoff: performance VS precision)
+  var NEWTON_ITERATIONS = 4;
+  var NEWTON_MIN_SLOPE = 0.001;
+  var SUBDIVISION_PRECISION = 0.0000001;
+  var SUBDIVISION_MAX_ITERATIONS = 10;
+
+  var kSplineTableSize = 11;
+  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+  var float32ArraySupported = typeof Float32Array === 'function';
+
+  function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
+  function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
+  function C(aA1) { return 3.0 * aA1; }
+
+  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+  function calcBezier(aT, aA1, aA2) {
+    return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
+  }
+
+  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+  function getSlope(aT, aA1, aA2) {
+    return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
+  }
+
+  function binarySubdivide(aX, aA, aB, mX1, mX2) {
+    var currentX,
+      currentT,
+      i = 0;
+    do {
+      currentT = aA + (aB - aA) / 2.0;
+      currentX = calcBezier(currentT, mX1, mX2) - aX;
+      if (currentX > 0.0) {
+        aB = currentT;
+      } else {
+        aA = currentT;
+      }
+    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+    return currentT;
+  }
+
+  function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
+    for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
+      var currentSlope = getSlope(aGuessT, mX1, mX2);
+      if (currentSlope === 0.0) return aGuessT;
+      var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+      aGuessT -= currentX / currentSlope;
+    }
+    return aGuessT;
+  }
+
+  /**
+     * points is an array of [ mX1, mY1, mX2, mY2 ]
+     */
+  function BezierEasing(points) {
+    this._p = points;
+    this._mSampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
+    this._precomputed = false;
+
+    this.get = this.get.bind(this);
+  }
+
+  BezierEasing.prototype = {
+
+    get: function (x) {
+      var mX1 = this._p[0],
+        mY1 = this._p[1],
+        mX2 = this._p[2],
+        mY2 = this._p[3];
+      if (!this._precomputed) this._precompute();
+      if (mX1 === mY1 && mX2 === mY2) return x; // linear
+      // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+      if (x === 0) return 0;
+      if (x === 1) return 1;
+      return calcBezier(this._getTForX(x), mY1, mY2);
+    },
+
+    // Private part
+
+    _precompute: function () {
+      var mX1 = this._p[0],
+        mY1 = this._p[1],
+        mX2 = this._p[2],
+        mY2 = this._p[3];
+      this._precomputed = true;
+      if (mX1 !== mY1 || mX2 !== mY2) { this._calcSampleValues(); }
+    },
+
+    _calcSampleValues: function () {
+      var mX1 = this._p[0],
+        mX2 = this._p[2];
+      for (var i = 0; i < kSplineTableSize; ++i) {
+        this._mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+      }
+    },
+
+    /**
+         * getTForX chose the fastest heuristic to determine the percentage value precisely from a given X projection.
+         */
+    _getTForX: function (aX) {
+      var mX1 = this._p[0],
+        mX2 = this._p[2],
+        mSampleValues = this._mSampleValues;
+
+      var intervalStart = 0.0;
+      var currentSample = 1;
+      var lastSample = kSplineTableSize - 1;
+
+      for (; currentSample !== lastSample && mSampleValues[currentSample] <= aX; ++currentSample) {
+        intervalStart += kSampleStepSize;
+      }
+      --currentSample;
+
+      // Interpolate to provide an initial guess for t
+      var dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample + 1] - mSampleValues[currentSample]);
+      var guessForT = intervalStart + dist * kSampleStepSize;
+
+      var initialSlope = getSlope(guessForT, mX1, mX2);
+      if (initialSlope >= NEWTON_MIN_SLOPE) {
+        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+      } if (initialSlope === 0.0) {
+        return guessForT;
+      }
+      return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+    },
+  };
+
+  return ob;
+}());
+
+export default BezierFactory;