Skip to content

S
svga-player
Commit dc936b45 authored by wjf's avatar wjf
Browse files
Options

l

parents
Pipeline #292743 failed with stages
      in 0 seconds
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 962 additions and 0 deletions
      .gitignore 0 → 100644
      View file @ dc936b45
      # project ignores
      node_modules
      .vscode
      package-lock.json
      \ No newline at end of file
      .npmignore 0 → 100644
      View file @ dc936b45
      # project ignores
      node_modules
      /src
      /build/svgaPlayer.min.js.map
      tsConfig.json
      webpack.config.js
      /.vscode
      /scripts
      \ No newline at end of file
      README.md 0 → 100644
      View file @ dc936b45
      # SvgaPlayer
      兼容web和淘宝小程序的svga文件播放器 1.0.3版本
      仅web轻量解析 1.0.4版本
      ### 网页使用
      ```html
      <div>
      <canvas id="testCanvas" width="500" height="500" style="background-color: #000000; "></canvas>
      </div>
      <script src="../build/svgaPlayer.min.js"></script>
      <script>
      window.onload = function () {
      var canvas = document.getElementById("testCanvas");
      //创建一个动画容器，一个canvas，里面可放多个MovieClip，且各自的MovieClip可以修改位置，缩放，旋转，锚点。
      var svgaStage = new SvgaPlayer.SvgaStage(canvas)
      //循环起来
      loop()
      function loop(){
      svgaStage.flush()
      requestAnimationFrame(loop)
      }
      //加载动画数据
      SvgaPlayer.loadSvga("./angel.svga", function (videoItem) {
      //实例化动画
      var mv = new SvgaPlayer.MovieClip(videoItem);
      //添加进动画容器
      svgaStage.addChild(mv)
      //可设置canvas的尺寸，尽量自行适配，canva实际尺寸和canvas的style尺寸
      canvas.width = mv.videoWidth;
      canvas.height = mv.videoHeight;
      //一些api的方法
      mv.stop();
      setTimeout(() => {
      mv.gotoAndPlay(1, false)
      }, 200)
      setTimeout(() => {
      mv.startAniRange(1, mv.totalFrames / 2, 2, () => {
      console.log(112)
      })
      }, 2000)
      // mv.rotation = 45
      // mv.x= 100
      // mv.scaleX=1.5
      // mv.y= 200
      mv.anchorX= 750/2;
      mv.anchorY= 750/2;
      setInterval(()=>{
      mv.rotation+=1
      },16.7)
      })
      //再加一个
      SvgaPlayer.loadSvga("./step1-1.svga", function (videoItem) {
      var mv = new SvgaPlayer.MovieClip(videoItem);
      svgaStage.addChild(mv)
      }, function (error) {
      alert(error);
      })
      }
      </script>
      ```
      ### npm使用
      ```js
      npm install @mrkwon/svga-player
      import { loadSvga, SvgaStage, MovieClip } from "@mrkwon/svga-player"
      var svgaStage = new SvgaStage(canvas)
      loadSvga("./svga/step1-1.svga", (v) => {
      var mv = new MovieClip(videoItem);
      //添加进动画容器
      svgaStage.addChild(mv)
      }, (err) => { console.log(err) })
      //循环起来
      loop()
      function loop(){
      svgaStage.flush()
      requestAnimationFrame(loop)
      }
      ```
      ### 淘宝小程序使用
      ```js
      import { loadSvga, SvgaStage, MovieClip } from "@mrkwon/svga-player"
      Page({
      onCanvasReady() {
      this.canvas = my.createCanvas({
      id: 'canvas',
      success: (canvas) => {
      var systemInfo = my.getSystemInfoSync();
      //适配尺寸
      canvas.width = 750 * systemInfo.pixelRatio;
      canvas.height = 500 * systemInfo.pixelRatio;
      //创建一个动画容器，一个canvas
      var svgaStage = new SvgaStage(canvas);
      //加载动画数据，域名必须是阿里系的白名单域名，或者cloud链接
      loadSvga("./angel.svga", function (videoItem) {
      //实例化动画
      var mv = new MovieClip(videoItem);
      //添加进动画容器
      svgaStage.addChild(mv)
      }, function (error) {
      alert(error);
      })
      //再加一个
      loadSvga("./step1-1.svga", function (videoItem) {
      var mv = new MovieClip(videoItem);
      svgaStage.addChild(mv)
      }, function (error) {
      alert(error);
      })
      //循环起来
      loop()
      function loop(){
      svgaStage.flush()
      canvas.requestAnimationFrame(loop)
      }
      }
      });
      }
      })
      ```
      \ No newline at end of file
      build/SvgaPlayer.d.ts 0 → 100644
      View file @ dc936b45
      declare namespace SvgaPlayer{
      export enum Event {
      /**
      * 每帧的监听
      */
      ENTER_FRAME = "onEnterFrame",
      /**
      * 最后一帧的监听
      */
      END_FRAME = "onEndFrame"
      }
      export class EventDispatcher {
      protected eventTypes: any;
      constructor();
      addEventListener(type: string, listener: Function, context?: any): this;
      /**
      * 监听一次
      * @param type
      * @param listener
      * @param context
      * @param useCapture
      */
      once(type: string, listener: Function, context?: any): this;
      dispatchEvent(event: string, data?: any): boolean;
      /**
      * 移除对应类型的侦听
      * @method removeEventListener
      * @public
      * @since 1.0.0
      * @param {string} type 要移除的侦听类型
      * @param {Function} listener 及侦听时绑定的回调方法
      * @param context listener和context都相等的才移除，默认自身
      */
      removeEventListener(type: string, listener: Function, context?: any): this;
      /**
      * 移除对象中所有的侦听
      * @method removeAllEventListener
      * @public
      * @since 1.0.0
      */
      removeAllEventListener(): void;
      hasEventListener(type: string): boolean;
      destroy(): void;
      }
      export class MovieClip extends EventDispatcher {
      private transform;
      private dirty;
      x: number;
      y: number;
      scaleX: number;
      scaleY: number;
      /**
      * 角度制
      */
      rotation: number;
      anchorX: number;
      anchorY: number;
      /**
      * 锁步将按时间间隔来执行动画
      */
      lockStep: boolean;
      /**
      * mc的当前帧,从1开始
      * @property currentFrame
      * @public
      * @since 1.0.0
      * @type {number}
      * @default 1
      * @readonly
      */
      readonly currentFrame: number;
      /**
      * @property _curFrame
      * @type {number}
      * @private
      * @since 2.0.0
      * @default 1
      */
      private _curFrame;
      /**
      * 当前动画是否处于播放状态
      * @property isPlaying
      * @readOnly
      * @public
      * @since 1.0.0
      * @type {boolean}
      * @default true
      * @readonly
      */
      readonly isPlaying: boolean;
      /**
      * @property _isPlaying
      * @type {boolean}
      * @private
      * @since 2.0.0
      * @default true
      */
      private _isPlaying;
      /**
      * 动画的播放方向,是顺着播还是在倒着播
      * @property isFront
      * @public
      * @since 1.0.0
      * @type {boolean}
      * @default true
      * @readonly
      */
      readonly isFront: boolean;
      /**
      * @property _isFront
      * @type {boolean}
      * @private
      * @default true
      */
      private _isFront;
      /**
      * 当前动画的总帧数
      * @property totalFrames
      * @public
      * @since 1.0.0
      * @type {number}
      * @default 1
      * @readonly
      */
      readonly totalFrames: number;
      readonly videoWidth: number;
      readonly videoHeight: number;
      /**
      * 锁步的时间间隔，按fps定,毫秒
      */
      private timeInterval;
      /**
      * 前提引擎按60设置
      */
      private deltaFrame;
      /**
      * 中间帧计时
      */
      private frameCount;
      /**
      * 动画数据
      */
      videoItem: SvgaParser.VideoEntity;
      /**
      * 构造函数
      * @method MovieClip
      * @public
      * @param mv VideoEntity格式，这里不给了
      */
      constructor(mv: SvgaParser.VideoEntity);
      /**
      * 可以手动用init，
      * @param mv
      */
      init(mv: SvgaParser.VideoEntity): void;
      /**
      * 调用止方法将停止当前帧
      * @method stop
      * @public
      * @since 1.0.0
      */
      stop(): void;
      /**
      * 将播放头向后移一帧并停在下一帧,如果本身在最后一帧则不做任何反应
      * @method nextFrame
      * @since 1.0.0
      * @public
      */
      nextFrame(): void;
      /**
      * 将播放头向前移一帧并停在下一帧,如果本身在第一帧则不做任何反应
      * @method prevFrame
      * @since 1.0.0
      * @public
      */
      prevFrame(): void;
      /**
      * 将播放头跳转到指定帧并停在那一帧,如果本身在第一帧则不做任何反应
      * @method gotoAndStop
      * @public
      * @since 1.0.0
      * @param {number} frameIndex 批定帧的帧数或指定帧的标签名
      */
      gotoAndStop(frameIndex: number): void;
      /**
      * 如果当前时间轴停在某一帧,调用此方法将继续播放.
      * @method play
      * @public
      * @since 1.0.0
      */
      play(isFront?: boolean): void;
      /**
      * @property _lastFrame
      * @type {number}
      * @private
      * @default 0
      */
      private _lastFrame:number;
      /**
      * 刚执行到的帧数，用于帧监听时判断用，刚好执行到当前帧，而不是之前保留的状态
      * 不是60fps的videoItem的中间有几帧curFrame会不变，判断只执行一次监听时会出错，刚好动画满帧60fps时就无所谓
      */
      readonly isInTimeFrame: boolean;
      /**
      * 将播放头跳转到指定帧并从那一帧开始继续播放
      * @method gotoAndPlay
      * @public
      * @since 1.0.0
      * @param {number} frameIndex 批定帧的帧数或指定帧的标签名
      * @param {boolean} isFront 跳到指定帧后是向前播放, 还是向后播放.不设置些参数将默认向前播放
      */
      gotoAndPlay(frameIndex: number, isFront?: boolean): void;
      /**
      * 记录的startAniRange对应的fun
      */
      private startAniRangeFun;
      /**
      * 优先级最高，会覆盖
      * @param beginFrame 默认1
      * @param endFrame 默认 this.totalFrames
      * @param loops 默认1 0
      */
      startAniRange(beginFrame?: number, endFrame?: number, loops?: number, callback?: Function): void;
      /**
      * 开始时间，每次有play的时候就需要重置now
      * 锁步思想，设置开始时间，后面每帧实际时间与开始时间相减，得到当前帧数
      *
      */
      private startTime;
      /**
      * 开始时的frame
      */
      private startFrame;
      /**
      * 与startFrame相间隔的帧数量，绝对值
      */
      private lastDeltaFrame;
      /**
      * 锁步时的每次end的标识
      */
      private _endMark;
      commonDeltaTime: number;
      updateFrame(): void;
      private getCurFrameWhenLockStep;
      /**
      * 修改自身位置
      */
      updateTransform(): void;
      destroy(): void;
      }
      export const _bitmapCache: {};
      export class SvgaStage extends EventDispatcher {
      /**
      * 用于 requestAnimationFrame,cancelAnimationFrame ,createImage
      */
      private canvas;
      private context;
      private children;
      resolution: number;
      /**
      *
      * @param canvas 渲染的canvas
      * @param resolution canvas和显示对象的尺寸比例
      */
      constructor(canvas: any, resolution?: number);
      addChild(mv: MovieClip): MovieClip;
      addChildAt(mv: MovieClip, index?: number): MovieClip;
      removeChild(mv: MovieClip): MovieClip;
      removeChildAt(index: number): any;
      removeAllChildren(): MovieClip[];
      /**
      * 将所有MovieClip画到canvas上
      */
      render(): void;
      private drawSprite;
      flush(): void;
      }
      export const loadSvga: typeof SvgaParser.loadSvga;}
      declare module "svga-player" {export = SvgaPlayer;}
      \ No newline at end of file
      build/svgaPlayer.min.js 0 → 100644
      View file @ dc936b45
      This source diff could not be displayed because it is too large. You can view the blob instead.
      build/svgaPlayer.min.js.map 0 → 100644
      View file @ dc936b45
      This source diff could not be displayed because it is too large. You can view the blob instead.
      package.json 0 → 100644
      View file @ dc936b45
      {
      "name": "@mrkwon/svga-player",
      "version": "1.0.4",
      "description": "",
      "main": "build/svgaPlayer.min.js",
      "types": "build/SvgaPlayer.d.ts",
      "dependencies": {},
      "devDependencies": {
      "svga-parser": "^1.0.2",
      "ts-loader": "^4.0.0",
      "typescript": "^2.7.2",
      "uglifyjs-webpack-plugin": "^2.1.2",
      "webpack": "^4.1.0",
      "webpack-cli": "^3.3.2"
      },
      "scripts": {
      "declare": "node scripts/declare.js src/index.ts",
      "build": "webpack",
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "webpack -w",
      "watch": "webpack --watch"
      },
      "author": "MrKwon",
      "license": "ISC",
      "keywords": [
      "svga",
      "player",
      "canvas"
      ]
      }
      scripts/declare.js 0 → 100644
      View file @ dc936b45
      const fs = require('fs');
      const ts = require("typescript");
      const regLine = /(export|declare)((?!from).)*/g;
      function compile(fileNames, options) {
      const host = ts.createCompilerHost(options);
      const exports = [];
      host.writeFile = (fileName, fileContent) => {
      const result = fileContent.match(regLine);
      for (let line of result) {
      if (line.match(/export (default)? \w+;/)) {
      continue;
      }
      if (line.endsWith(';')) {
      if (!line.startsWith('_') && !line.startsWith('export default function')) {
      exports.push(line);
      }
      } else {
      if (line.endsWith('{')) {
      let start = fileContent.indexOf(line);
      const block = fileContent.substring(start, fileContent.indexOf('\n}', start) + 2);
      if (!block.startsWith('_')) {
      exports.push(block);
      }
      }
      }
      }
      };
      const program = ts.createProgram(fileNames, options, host);
      program.emit();
      let allExports = exports.join('\n\n')
      .replace(/export default _default;/g, '')
      .replace(/export declare/g, 'export ')
      .replace(/export default/g, 'export ')
      .replace(/declare /g, 'export ')
      ;
      // const content = `declare module FYGE{${allExports}}`;
      const content = `declare namespace SvgaPlayer{\n${allExports}}\ndeclare module "svga-player" {export = SvgaPlayer;}`;
      fs.writeFileSync('build/SvgaPlayer.d.ts', content);
      }
      compile(process.argv.slice(2), {
      allowJs: true,
      declaration: true,
      emitDeclarationOnly: true,
      });
      src/EventDispatcher.ts 0 → 100644
      View file @ dc936b45
      export enum Event {
      /**
      * 每帧的监听
      */
      ENTER_FRAME = "onEnterFrame",
      /**
      * 最后一帧的监听
      */
      END_FRAME = "onEndFrame"
      }
      /**
      * 只为动画用的事件
      */
      export class EventDispatcher {
      protected eventTypes: any = {};
      public constructor() {
      }
      public addEventListener(type: string, listener: Function, context?: any): this {
      if (!type) {
      throw new Error("添加侦听的type值为undefined");
      }
      if (!listener) {
      throw new Error("侦听回调函数不能为null");
      }
      let s = this;
      let eventTypes = s.eventTypes;
      if (!eventTypes[type]) {
      eventTypes[type] = [];
      }
      for (var i = 0, len = eventTypes[type].length; i < len; i++) {
      let ee: EE = eventTypes[type][i]
      if (ee.fn === listener && ee.context === context) {
      console.log("已添加过该事件")
      return s
      }
      }
      eventTypes[type].unshift(new EE(listener, context || s));
      return s
      }
      /**
      * 监听一次
      * @param type
      * @param listener
      * @param context
      * @param useCapture
      */
      public once(type: string, listener: Function, context?: any): this {
      if (!type) {
      throw new Error("添加侦听的type值为undefined");
      }
      if (!listener) {
      throw new Error("侦听回调函数不能为null");
      }
      let s = this;
      let eventTypes = s.eventTypes;
      if (!eventTypes[type]) {
      eventTypes[type] = [];
      }
      //考虑是否要检查已添加过该事件
      eventTypes[type].unshift(new EE(listener, context || s, true));
      return s
      }
      public dispatchEvent(event: string, data: any = null): boolean {
      let s = this;
      let listeners: EE[] = s.eventTypes[event];
      if (listeners) {
      let len = listeners.length;
      for (let i = len - 1; i >= 0; i--) {
      if (listeners[i]) {
      let listener = listeners[i];
      listener.fn.call(listener.context, data)
      //必须做单独指向，因为有可能出现上面的fn.里执行的就是removeEventListener，导致listeners[i]不存在
      if (listener.once) {
      s.removeEventListener(event, listener.fn, listener.context);
      }
      // listeners[i](event);
      } else {
      //空的直接移除，
      listeners.splice(i, 1);
      }
      }
      return true;
      } else {
      return false;
      }
      }
      /**
      * 移除对应类型的侦听
      * @method removeEventListener
      * @public
      * @since 1.0.0
      * @param {string} type 要移除的侦听类型
      * @param {Function} listener 及侦听时绑定的回调方法
      * @param context listener和context都相等的才移除，默认自身
      */
      public removeEventListener(type: string, listener: Function, context?: any): this {
      let s = this;
      let listeners: EE[] = s.eventTypes[type];
      if (listeners) {
      let len = listeners.length;
      let thisObject = context || s;
      for (let i = len - 1; i >= 0; i--) {
      if (listeners[i].fn === listener && listeners[i].context === thisObject) {
      listeners.splice(i, 1);
      }
      }
      }
      return s
      }
      /**
      * 移除对象中所有的侦听
      * @method removeAllEventListener
      * @public
      * @since 1.0.0
      */
      public removeAllEventListener() {
      this.eventTypes = {};
      }
      public hasEventListener(type: string): boolean {
      let s = this;
      if (s.eventTypes[type] && s.eventTypes[type].length > 0) {
      return true
      }
      return false;
      }
      destroy(): void {
      let s = this;
      s.removeAllEventListener();
      s.eventTypes = null;
      }
      }
      /**
      * 为了实现带入this和once
      * 暂不做回收处理，因为存在引用fn,context.内存销毁可能出问题
      * 如果非要作回收，回收时必须将fn,context置null；这样还有必要回收？
      */
      class EE {
      fn: Function;
      context: any;
      once: boolean;
      constructor(fn: Function, context: any, once: boolean = false) {
      this.fn = fn;
      this.context = context;
      this.once = once;
      }
      }
      src/MovieClip.ts 0 → 100644
      View file @ dc936b45
      This diff is collapsed.
      src/SvgaStage.ts 0 → 100644
      View file @ dc936b45
      import { EventDispatcher, Event } from "./EventDispatcher";
      import { MovieClip } from "./MovieClip";
      import { VideoEntity } from "svga-parser";
      /**
      * 缓存的图片，缓存好的图片才能绘制，key为imageKey
      */
      export const _bitmapCache = {};
      /**
      * svga播放动画的容器
      *
      */
      export class SvgaStage extends EventDispatcher {
      //适配的尺寸怎么弄
      /**
      * 用于 requestAnimationFrame,cancelAnimationFrame ,createImage
      */
      private canvas;
      private context: CanvasRenderingContext2D;
      private requestAnimationFrame
      private children: MovieClip[];
      resolution: number;
      /**
      *
      * @param canvas 渲染的canvas
      * @param resolution canvas和显示对象的尺寸比例
      */
      constructor(canvas, resolution: number = 1) {
      super();
      this.canvas = canvas;
      this.context = canvas.getContext("2d");
      this.children = [];
      //计算canvas尺寸和动画显示尺寸之间的比例，暂时只有缩放
      this.resolution = resolution;
      this.requestAnimationFrame = canvas.requestAnimationFrame&&canvas.requestAnimationFrame.bind(canvas)||window.requestAnimationFrame.bind(window)
      //直接刷吧
      // this.flush();
      }
      addChild(mv: MovieClip): MovieClip {
      return this.addChildAt(mv, this.children.length);
      }
      addChildAt(mv: MovieClip, index: number = this.children.length) {
      var s = this
      //如果这里面已经有了，就先移掉
      var indexOri = this.children.indexOf(mv);
      if (indexOri > -1) this.removeChildAt(indexOri);
      //自己添加
      var len = s.children.length;
      if (index >= len) {
      s.children[s.children.length] = mv;
      } else if (index == 0 || index < 0) {
      s.children.unshift(mv);
      } else {
      s.children.splice(index, 0, mv);
      }
      return mv;
      }
      removeChild(mv: MovieClip) {
      const index = this.children.indexOf(mv);
      if (index === -1) return null;
      this.removeChildAt(index);
      return mv
      }
      removeChildAt(index: number) {
      let s = this;
      let child: any;
      let len = s.children.length - 1;
      if (len < 0) return;
      if (index == len) {
      child = s.children.pop();
      } else if (index == 0) {
      child = s.children.shift();
      } else {
      child = s.children.splice(index, 1)[0];
      }
      return child
      }
      removeAllChildren() {
      this.children = [];
      return this.children.slice();
      }
      /**
      * 将所有MovieClip画到canvas上
      */
      render() {
      //清空画布
      this.context.setTransform(1, 0, 0, 1, 0, 0)
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      for (var i = 0; i < this.children.length; i++) {
      let child = this.children[i];
      //更新位置信息
      child.updateTransform();
      //更新帧数据
      child.updateFrame();
      //派发事件
      child.dispatchEvent(Event.ENTER_FRAME, child.currentFrame)
      //获取当前帧
      let frame = child.currentFrame - 1;
      //根据当前帧绘制
      var sprites = child.videoItem.sprites;
      sprites.forEach((sprite, index) => {
      var imageKey = sprite.imageKey;
      //加载中
      if (_bitmapCache[imageKey] == 1) return;
      //加载
      if (!_bitmapCache[imageKey]) {
      let src = child.videoItem.images[imageKey];
      if (src.indexOf("iVBO") === 0 || src.indexOf("/9j/2w") === 0) {
      let imgTag = this.canvas.createImage && this.canvas.createImage() || new Image();
      imgTag.onload = function () {
      _bitmapCache[imageKey] = imgTag;
      };
      imgTag.src = 'data:image/png;base64,' + src;
      _bitmapCache[imageKey] = 1;//表示在加载中
      }
      }
      //绘制
      else {
      this.drawSprite(sprite, frame)
      }
      });
      }
      }
      private drawSprite(sprite, frame) {
      let frameItem = sprite.frames[frame];
      if (frameItem.alpha < 0.05) return;
      var ctx = this.context
      ctx.globalAlpha = frameItem.alpha;
      ctx.setTransform(
      frameItem.transform.a * this.resolution,
      frameItem.transform.b * this.resolution,
      frameItem.transform.c * this.resolution,
      frameItem.transform.d * this.resolution,
      frameItem.transform.tx * this.resolution,
      frameItem.transform.ty * this.resolution
      )
      ctx.drawImage(_bitmapCache[sprite.imageKey], 0, 0);
      }
      flush() {
      var s = this;
      if (!s.canvas) return;
      s.render();
      // (s.canvas.requestAnimationFrame || window.requestAnimationFrame)(s.flush.bind(s))
      // this.requestAnimationFrame(s.flush.bind(s));
      }
      }
      src/index.ts 0 → 100644
      View file @ dc936b45
      import * as SvgaParser from "svga-parser"
      export const loadSvga = SvgaParser.loadSvga;
      export * from "./SvgaStage"
      export * from "./MovieClip"
      export * from "./EventDispatcher"
      \ No newline at end of file
      test/angel.svga 0 → 100644
      View file @ dc936b45
      File added
      test/test.html 0 → 100644
      View file @ dc936b45
      <html>
      <body style="text-align: center">
      <div>
      <!-- <div id="testCanvas" style="background-color: #000000; width: 500px; height: 500px; margin: auto"></div> -->
      <canvas id="testCanvas" width="500" height="500" style="background-color: #000000; "></canvas>
      </div>
      <script src="../build/svgaPlayer.min.js"></script>
      <script>
      window.onload = function () {
      var canvas = document.getElementById("testCanvas");
      //创建一个动画容器，一个canvas
      var svgaStage = new SvgaPlayer.SvgaStage(canvas)
      //加载动画数据
      SvgaPlayer.loadSvga("./angel.svga", function (videoItem) {
      //实例化动画
      var mv = new SvgaPlayer.MovieClip(videoItem);
      //添加进动画容器
      svgaStage.addChild(mv)
      //可设置canvas的尺寸，尽量自行适配，canva实际尺寸和canvas的style尺寸
      canvas.width = mv.videoWidth;
      canvas.height = mv.videoHeight;
      //一些api的方法
      mv.stop();
      setTimeout(() => {
      mv.gotoAndPlay(1, false)
      }, 200)
      setTimeout(() => {
      mv.startAniRange(1, mv.totalFrames / 2, 2, () => {
      console.log(112)
      })
      }, 2000)
      // mv.rotation = 45
      // mv.x= 100
      // mv.scaleX=1.5
      // mv.y= 200
      mv.anchorX= 750/2;
      mv.anchorY= 750/2;
      setInterval(()=>{
      mv.rotation+=1
      },16.7)
      }, function (error) {
      alert(error.message);
      })
      //启循环
      loop()
      function loop(){
      svgaStage.flush()
      requestAnimationFrame(loop)
      }
      //再加一个
      SvgaPlayer.loadSvga("./step1-1.svga", function (videoItem) {
      var mv = new SvgaPlayer.MovieClip(videoItem);
      svgaStage.addChild(mv)
      }, function (error) {
      alert(error);
      })
      }
      </script>
      </body>
      </html>
      \ No newline at end of file
      tsConfig.json 0 → 100644
      View file @ dc936b45
      {
      "compilerOptions": {
      "module": "commonjs",
      "target": "es5",
      "noImplicitAny": false,
      "sourceMap": true,
      "removeComments": true,
      "noEmitOnError":true,
      // "declarationDir": "types",
      // "declaration": true,
      "outDir":"dist",
      /*"outFile": "./index.js",*/
      "lib": [
      "es5",
      "dom",
      "es2015.promise"
      ]
      },
      "exclude": [
      "node_modules"
      ]
      }
      \ No newline at end of file
      webpack.config.js 0 → 100644
      View file @ dc936b45
      const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
      var path = require('path');
      var webpack = require('webpack')
      module.exports = {
      mode: "production",
      entry: {
      "svgaPlayer.min": "./src/index.ts",
      },
      output: {
      path: __dirname,
      filename: "build/[name].js",
      libraryTarget: 'umd',
      library: 'SvgaPlayer',
      },
      module: {
      rules: [
      {
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/
      }
      ]
      },
      devtool: 'source-map',
      plugins: [
      new UglifyJSPlugin(
      { sourceMap: true }
      ), new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
      })
      ],
      resolve: {
      extensions: ['.webpack.js', '.web.js', '.ts', '.js']
      }
      }
      \ No newline at end of file
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment