0

Суть проблемы такова: есть анимированный дизайнером логотип. Необходимо сделать из него прелоадер. Ни так, ни сяк, мне это не удается. Выкладываю оригинал кода

(function(lib, img, cjs, ss, an) {
  var p; // shortcut to reference prototypes
  lib.webFontTxtInst = {};
  var loadedTypekitCount = 0;
  var loadedGoogleCount = 0;
  var gFontsUpdateCacheList = [];
  var tFontsUpdateCacheList = [];
  lib.ssMetadata = [];
  lib.updateListCache = function(cacheList) {
    for (var i = 0; i < cacheList.length; i++) {
      if (cacheList[i].cacheCanvas)
        cacheList[i].updateCache();
    }
  };
  lib.addElementsToCache = function(textInst, cacheList) {
    var cur = textInst;
    while (cur != exportRoot) {
      if (cacheList.indexOf(cur) != -1)
        break;
      cur = cur.parent;
    }
    if (cur != exportRoot) {
      var cur2 = textInst;
      var index = cacheList.indexOf(cur);
      while (cur2 != cur) {
        cacheList.splice(index, 0, cur2);
        cur2 = cur2.parent;
        index++;
      }
    } else {
      cur = textInst;
      while (cur != exportRoot) {
        cacheList.push(cur);
        cur = cur.parent;
      }
    }
  };
  lib.gfontAvailable = function(family, totalGoogleCount) {
    lib.properties.webfonts[family] = true;
    var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
    for (var f = 0; f < txtInst.length; ++f)
      lib.addElementsToCache(txtInst[f], gFontsUpdateCacheList);
    loadedGoogleCount++;
    if (loadedGoogleCount == totalGoogleCount) {
      lib.updateListCache(gFontsUpdateCacheList);
    }
  };
  lib.tfontAvailable = function(family, totalTypekitCount) {
    lib.properties.webfonts[family] = true;
    var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];
    for (var f = 0; f < txtInst.length; ++f)
      lib.addElementsToCache(txtInst[f], tFontsUpdateCacheList);
    loadedTypekitCount++;
    if (loadedTypekitCount == totalTypekitCount) {
      lib.updateListCache(tFontsUpdateCacheList);
    }
  };
  // symbols:
  // helper functions:
  function mc_symbol_clone() {
    var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop));
    clone.gotoAndStop(this.currentFrame);
    clone.paused = this.paused;
    clone.framerate = this.framerate;
    return clone;
  }

  function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
    var prototype = cjs.extend(symbol, cjs.MovieClip);
    prototype.clone = mc_symbol_clone;
    prototype.nominalBounds = nominalBounds;
    prototype.frameBounds = frameBounds;
    return prototype;
  }
  (lib.Symbol2 = function(mode, startPosition, loop) {
    this.initialize(mode, startPosition, loop, {});
    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#373535").s().p("ACsFDIisnRIitHRIiSAAIDzqFICZAAIDzKFg");
    this.shape.setTransform(0, 0, 1.151, 1.151);
    this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
  }).prototype = getMCSymbolPrototype(lib.Symbol2, new cjs.Rectangle(-36.7, -37.1, 73.6, 74.3), null);
  // stage content:
  (lib.Rofas_Levitation = function(mode, startPosition, loop) {
    this.initialize(mode, startPosition, loop, {});
    // Layer 3
    this.instance = new lib.Symbol2();
    this.instance.parent = this;
    this.instance.setTransform(391.2, 75.7);
    this.timeline.addTween(cjs.Tween.get(this.instance).wait(84).to({
      y: 45.4
    }, 55, cjs.Ease.get(-1)).wait(96).to({
      y: 75.7
    }, 22, cjs.Ease.get(1)).wait(1));
    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#373535").s().p("EAhEAJ9IgkgEIgNgBQgdgDgUgEQhVgRhSgpQgHgDAAgIIABiwQBVBFBiAaQAaAHAaAEQBBAKA+gLQBJgNAuguQAmgmAJg1QAJg5gdgvQgfg0g4gjQhHgvhzhJIgYgPQgygegUgPQgmgbgagbQhGhIgOhaIgFgiIAAgxIABgJIAHgiQADgUAEgOQAghoBeg8QAugdA8gQQAjgJAogEIBegEIA+AHQBfAPBLAqQAHAEAAAIIAACgIgBAIIgIgGQhZhBhpgTQhQgOhCARQgiAJgZAPQgqAYgUApQgmBNApBKQAWAkAlAcIAOAJQBQA1B7BMQA7AlAbATQAuAiAfAjQA5A/AQBOQACAIAGApIAAAtIgJA6QgaBwhaBEQhSA/h8ANIhVAEgAv2J/IgHgCQhngFheglQi8hIhuioQhUiCgPiiIgDgdIAAhEIACgJQADhEAUhHQA5jGCdh8QCQhwC9gTIBlgDIAJACQBUAFBMAYQCCApBjBZQBkBbA1B7QAmBYAKBdIAFAwIAABEIgCAJQgEBSgZBPQg/DGioB3QiJBiivAQIgeAEgAyEnBQiZA8hQCNQhcCjAmC+QAaCBBVBfQBqB1CcAdQBhATBigWQB+gaBdhWQCNiFALjNQAFhbgchVQgviRh1hYQh9hfiegBQhjAAhTAigAYEJsIh+lSQgDgJgKAAQjxABjygBQgKAAgDAJIh6FSIiqAAIgHgCIC8nxILfAAIC8HzgAh7JsIAAzXIKaAAIAACVIn+AAIAAG5IHaAAIAACVInaAAIAAH0gA9XJsIgQhLQgiiHg6hmQgrhLgxgxQgPgOgPgMQhLg8hUAEIhzAAIAAIGIidAAIAAzYIGJAAIAGACQAsAEASADIAGABQBeAQBIA1QBQA8AdBjQAbBagSBgQgRBSg2A7Qg+BEhiAbIgRAFIAKAGQA/AgA5BDQA+BJAuBpQA4CAAbCkgEglOgHWIAAGnIDMAAQAxAAAmgLIAMgDQBEgZAkg4QAegwAAhAQAAhxhRg7QgYgSgdgKQgqgQg0AAg");
    this.shape.setTransform(275, 100.7);
    this.timeline.addTween(cjs.Tween.get(this.shape).wait(258));
  }).prototype = p = new cjs.MovieClip();
  p.nominalBounds = new cjs.Rectangle(296, 136.8, 508.2, 127.8);
  // library properties:
  lib.properties = {
    width: 550,
    height: 200,
    fps: 50,
    color: "#FFFFFF",
    opacity: 1.00,
    webfonts: {},
    manifest: [],
    preloads: []
  };
})(lib = lib || {}, images = images || {}, createjs = createjs || {}, ss = ss || {}, AdobeAn = AdobeAn || {});
var lib, images, createjs, ss, AdobeAn;

var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;

function init() {
  canvas = document.getElementById("canvas");
  anim_container = document.getElementById("animation_container");
  dom_overlay_container = document.getElementById("dom_overlay_container");
  handleComplete();
}

function handleComplete() {
  //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
  exportRoot = new lib.Rofas_Levitation();
  stage = new createjs.Stage(canvas);
  stage.addChild(exportRoot);
  //Registers the "tick" event listener.
  fnStartAnimation = function() {
    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
  }
  //Code to support hidpi screens and responsive scaling.
  function makeResponsive(isResp, respDim, isScale, scaleType) {
    var lastW, lastH, lastS = 1;
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    function resizeCanvas() {
      var w = lib.properties.width,
        h = lib.properties.height;
      var iw = window.innerWidth,
        ih = window.innerHeight;
      var pRatio = window.devicePixelRatio || 1,
        xRatio = iw / w,
        yRatio = ih / h,
        sRatio = 1;
      if (isResp) {
        if ((respDim == 'width' && lastW == iw) || (respDim == 'height' && lastH == ih)) {
          sRatio = lastS;
        } else if (!isScale) {
          if (iw < w || ih < h)
            sRatio = Math.min(xRatio, yRatio);
        } else if (scaleType == 1) {
          sRatio = Math.min(xRatio, yRatio);
        } else if (scaleType == 2) {
          sRatio = Math.max(xRatio, yRatio);
        }
      }
      canvas.width = w * pRatio * sRatio;
      canvas.height = h * pRatio * sRatio;
      canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w * sRatio + 'px';
      canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h * sRatio + 'px';
      stage.scaleX = pRatio * sRatio;
      stage.scaleY = pRatio * sRatio;
      lastW = iw;
      lastH = ih;
      lastS = sRatio;
    }
  }
  makeResponsive(false, 'both', false, 1);
  fnStartAnimation();
}
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<body onload="init();" style="margin:0px;">
  <div id="animation_container" style="margin-left: auto; margin-right: auto; padding-top: 40vh">
    <canvas id="canvas" width="550" height="200" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00)"></canvas>
    <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; position: absolute; left: 0px; top: 0px; display: block">
    </div>
  </div>
</body>

2
  • Какой должен быть результат? Что должно получиться?
    – kizoso
    Commented 5 июн. 2017 в 10:35
  • Что за lib? Зачем вы приложили пример кода с синтаксическими ошибками и отсутствующей библиотекой?
    – Darth
    Commented 5 июн. 2017 в 10:36

1 ответ 1

0

Решено

setTimeout(function() {
  $("#animation_container").hide();
}, 5000);
setTimeout(function() {
  $(".pure-g").show();
}, 5000);
<div id="animation_container"><canvas></canvas></div>
<div class="pure-g"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.