Javascript 使用Animate CC在一个HTML文件中创建4个动画SVG

如何在从Animate CC导出的一个JS/HTML文件中加载4个独立的动画SVG？我创建了1个动画SVG，它在一个HTML中导出3个不同的JS。有没有一种方法可以在不弄乱代码的情况下为其他3个图标SVG重用JS？我知道为每个动画SVG加载一堆JS文件不是一个好做法

仅适用于1个动画SVG（JS）

var画布、舞台、导出根、动画容器、dom覆盖容器、，
fnStartAnimation；
函数init（）{
canvas=document.getElementById（“canvas”）；
anim_container=document.getElementById（“animation_container”）；
dom_overlay_container=document.getElementById（“dom_overlay_container”）；
var comp=AdobeAn.getComposition（“C1F9C7BD5BEEC941A1FE079EA94C1BF3”）；
var lib=comp.getLibrary（）；
手工完成（{}，comp）；
}
功能手柄完成（evt、comp）{
//无论内容如何，始终调用此函数。在令牌create_stage中创建变量“stage”后，可以使用该变量。
var lib=comp.getLibrary（）；
var ss=comp.getSpriteSheet（）；
exportRoot=new lib.iconskyscrapers（）；
阶段=新库阶段（画布）；
//注册“勾选”事件侦听器。
fnStartAnimation=函数（）{
stage.addChild（exportRoot）；
createjs.Ticker.setFPS（lib.properties.fps）；
createjs.Ticker.addEventListener（“勾号”，阶段）
stage.addEventListener（“勾号”，handleTick）
函数getProjectionMatrix（总深度）{
var focalLength=528.25；
var projectionCenter={x:lib.properties.width/2，y:lib.properties.height/2}；
变量标度=（总深度+聚焦长度）/聚焦长度；
var scaleMat=new createjs.Matrix2D；
标度平均a=1/标度；
标度平均d=1/标度；
var projMat=new createjs.Matrix2D；
projMat.tx=-projectionCenter.x；
projMat.ty=-projectionCenter.y；
projMat=projMat.prependMatrix（scaleMat）；
projMat.tx+=projectionCenter.x；
projMat.ty+=projectionCenter.y；
返回projMat；
}
功能手柄（事件）{
var focalLength=528.25；
var cameraInstance=exportRoot.\uuuuuu摄像机\uuuuuuuu实例；
if（cameraInstance！==未定义&&cameraInstance.pinToObject！==未定义）
{
cameraInstance.x=cameraInstance.pinToObject.x+cameraInstance.pinToObject.pinOffsetX；
cameraInstance.y=cameraInstance.pinToObject.y+cameraInstance.pinToObject.pinOffsetY；
if（cameraInstance.pinToObject.parent！==未定义&&cameraInstance.pinToObject.parent.depth！==未定义）
cameraInstance.depth=cameraInstance.pinToObject.parent.depth+cameraInstance.pinToObject.pinOffsetZ；
}
for（exportRoot.children中的子级）
{
var layerObj=exportRoot.children[child]；
如果（layerObj==cameraInstance）
继续；
if（layerObj.currentFrame！=layerObj.parent.currentFrame）
{
layerObj.gotoAndPlay（layerObj.parent.currentFrame）；
}
var matToApply=new createjs.Matrix2D；
var cameraMat=new createjs.Matrix2D；
var totalDepth=layerObj.layerDepth？layerObj.layerDepth:0；
var cameraDepth=0；
if（摄像机姿态和！layerObj.isAttachedToCamera）
{
var stageCenter={'x'：lib.properties.width/2，'y'：lib.properties.height/2}；
var mat=cameraInstance.getMatrix（）；
mat.tx-=stageCenter.x；
mat.ty-=舞台中心y；
cameraMat=mat.invert（）；
cameraMat.prependTransform（stageCenter.x，stageCenter.y，1,1,0,0,0,0）；
cameraMat.appendTransform（-stageCenter.x，-stageCenter.y，1,1,0,0,0,0）；
if（cameraInstance.depth）
cameraDepth=cameraInstance.depth；
}
if（分层深度）
{
总深度=层深度j.深度；
}
//相机深度偏移
总深度-=摄像机深度；
if（总深度<-聚焦长度）
{
matToApply.a=0；
matToApply.d=0；
}
其他的
{
如果（layerObj.layerDepth）
{
var sizeLockedMat=getProjectionMatrix（layerObj.layerDepth）；
如果（sizeLockedMat）
{
sizeLockedMat.invert（）；
matToApply.prependMatrix（sizeLockedMat）；
}
}
matToApply.prependMatrix（cameraMat）；
var projMat=getProjectionMatrix（总深度）；
if（projMat）
{
matToApply.prependMatrix（projMat）；
}
}
layerObj.transformMatrix=matToApply；
}
}
}       
//支持hidpi屏幕和响应缩放的代码。
函数makeResponsive（isResp、respDim、isScale、scaleType）{
var lastW，lastH，lastS=1；
addEventListener（'resize'，resizeCanvas）；
调整画布的大小（）；
函数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；
如果（isResp）{
如果（（respDim='width'和&lastW==iw）| |（respDim='height'和&lastH==ih））{
sRatio=持续时间；
}               
如果（！isScale）{
如果（我）你能添加html代码并将其放入代码段吗？我已经添加了html…它在代码段和JSIDdle中不起作用，只是为了看到错误以及你试图加载本地js文件，所以这可能是我刚刚将文件上载到我的服务器上的原因-
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="icon-skyscrapers.js"></script>
<script>
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");
var comp=AdobeAn.getComposition("C1F9C7BD5BEEC941A1FE079EA94C1BF3");
var lib=comp.getLibrary();
handleComplete({},comp);
  }
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
exportRoot = new lib.iconskyscrapers();
stage = new lib.Stage(canvas);  
//Registers the "tick" event listener.
fnStartAnimation = function() {
    stage.addChild(exportRoot);
    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage)
    stage.addEventListener("tick", handleTick)
    function getProjectionMatrix(totalDepth) {
        var focalLength = 528.25;
        var projectionCenter = { x : lib.properties.width/2, y : lib.properties.height/2 };
        var scale = (totalDepth + focalLength)/focalLength;
        var scaleMat = new createjs.Matrix2D;
        scaleMat.a = 1/scale;
        scaleMat.d = 1/scale;
        var projMat = new createjs.Matrix2D;
        projMat.tx = -projectionCenter.x;
        projMat.ty = -projectionCenter.y;
        projMat = projMat.prependMatrix(scaleMat);
        projMat.tx += projectionCenter.x;
        projMat.ty += projectionCenter.y;
        return projMat;
    }
    function handleTick(event) {
        var focalLength = 528.25;
        var cameraInstance = exportRoot.___camera___instance;
    if(cameraInstance !== undefined && cameraInstance.pinToObject !== undefined)
    {
        cameraInstance.x = cameraInstance.pinToObject.x + cameraInstance.pinToObject.pinOffsetX;
        cameraInstance.y = cameraInstance.pinToObject.y + cameraInstance.pinToObject.pinOffsetY;
        if(cameraInstance.pinToObject.parent !== undefined && cameraInstance.pinToObject.parent.depth !== undefined)
            cameraInstance.depth = cameraInstance.pinToObject.parent.depth + cameraInstance.pinToObject.pinOffsetZ;
    }
        for(child in exportRoot.children)
        {
            var layerObj = exportRoot.children[child];
            if(layerObj == cameraInstance)
                continue;
                if(layerObj.currentFrame != layerObj.parent.currentFrame)
                {
                    layerObj.gotoAndPlay(layerObj.parent.currentFrame);
                }
            var matToApply = new createjs.Matrix2D;
            var cameraMat = new createjs.Matrix2D;
            var totalDepth = layerObj.layerDepth ? layerObj.layerDepth : 0;
            var cameraDepth = 0;
            if(cameraInstance && !layerObj.isAttachedToCamera)
            {
                var stageCenter = { 'x' : lib.properties.width/2, 'y' : lib.properties.height/2 };
                var mat = cameraInstance.getMatrix();
                mat.tx -= stageCenter.x;
                mat.ty -= stageCenter.y;
                cameraMat = mat.invert();
                cameraMat.prependTransform(stageCenter.x, stageCenter.y, 1, 1, 0, 0, 0, 0, 0);
                cameraMat.appendTransform(-stageCenter.x, -stageCenter.y, 1, 1, 0, 0, 0, 0, 0);
                if(cameraInstance.depth)
                    cameraDepth = cameraInstance.depth;
            }
            if(layerObj.depth)
            {
                totalDepth = layerObj.depth;
            }
            //Offset by camera depth
            totalDepth -= cameraDepth;
            if(totalDepth < -focalLength)
            {
                matToApply.a = 0;
                matToApply.d = 0;
            }
            else
            {
                if(layerObj.layerDepth)
                {
                    var sizeLockedMat = getProjectionMatrix(layerObj.layerDepth);
                    if(sizeLockedMat)
                    {
                        sizeLockedMat.invert();
                        matToApply.prependMatrix(sizeLockedMat);
                    }
                }
                matToApply.prependMatrix(cameraMat);
                var projMat = getProjectionMatrix(totalDepth);
                if(projMat)
                {
                    matToApply.prependMatrix(projMat);
                }
            }
            layerObj.transformMatrix = matToApply;
        }
    }
}       
//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;            
        stage.tickOnUpdate = false;            
        stage.update();            
        stage.tickOnUpdate = true;      
    }
}
makeResponsive(false,'both',false,1);   
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
</script>

<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:113px; height:84px">
    <canvas id="canvas" width="113" height="84" 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; width:113px; height:84px; position: absolute; left: 0px; top: 0px; display: block;">
    </div>
</div>
</body>