var ease = { linear: function (e) { return e; }, easeInQuad: function (e) { return e * e; }, easeOutQuad: function (e) { return e * (2 - e); }, easeInOutQuad: function (e) { return e < 0.5 ? 2 * e * e : (4 - 2 * e) * e - 1; }, easeInCubic: function (e) { return e * e * e; }, easeOutCubic: function (e) { return --e * e * e + 1; }, easeInOutCubic: function (e) { return e < 0.5 ? 4 * e * e * e : (e - 1) * (2 * e - 2) * (2 * e - 2) + 1; }, easeInQuart: function (e) { return e * e * e * e; }, easeOutQuart: function (e) { return 1 - --e * e * e * e; }, easeInOutQuart: function (e) { return e < 0.5 ? 8 * e * e * e * e : 1 - 8 * --e * e * e * e; }, easeInQuint: function (e) { return e * e * e * e * e; }, easeOutQuint: function (e) { return 1 + --e * e * e * e * e; }, easeInOutQuint: function (e) { return e < 0.5 ? 16 * e * e * e * e * e : 1 + 16 * --e * e * e * e * e; }, easeInOutCustom: function (e) { return e < 0.5 ? 16 * e * e * e * e * e : 1 + 16 * --e * e * e * e * e; }, }; var NEWTON_ITERATIONS = 4, NEWTON_MIN_SLOPE = 0.001, SUBDIVISION_PRECISION = 1e-7, SUBDIVISION_MAX_ITERATIONS = 10, kSplineTableSize = 11, kSampleStepSize = 1 / (kSplineTableSize - 1), float32ArraySupported = "function" == typeof Float32Array, easeInOut = new bezier(0.57, 0.09, 0.105, 1.005); function ads(e, t) { (document.getElementById(t) || document.documentElement).classList.add(e); } function rds(e, t) { (document.getElementById(t) || document.documentElement).classList.remove(e); } function event(e, t, r, n) { // ga && ga('send', 'event', e, t, r, n); } function Vec2(e, t) { this.x = e; this.y = t; this.lerp = function (e, t) { (this.x += (e.x - this.x) * t), (this.y += (e.y - this.y) * t); }; this.plus = function (e) { return new Vec2(this.x + e.x, this.y + e.y); }; this.minus = function (e) { return new Vec2(this.x - e.x, this.y - e.y); }; this.length = function () { return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)); }; } function A(e, t) { return 1 - 3 * t + 3 * e; } function B(e, t) { return 3 * t - 6 * e; } function C(e) { return 3 * e; } function calcBezier(e, t, r) { return ((A(t, r) * e + B(t, r)) * e + C(t)) * e; } function getSlope(e, t, r) { return 3 * A(t, r) * e * e + 2 * B(t, r) * e + C(t); } function binarySubdivide(e, t, r, n, o) { for (var i, a, l = 0; 0 < (i = calcBezier((a = t + (r - t) / 2), n, o) - e) ? (r = a) : (t = a), Math.abs(i) > SUBDIVISION_PRECISION && ++l < SUBDIVISION_MAX_ITERATIONS; ); return a; } function newtonRaphsonIterate(e, t, r, n) { for (var o = 0; o < NEWTON_ITERATIONS; ++o) { var i = getSlope(t, r, n); if (0 === i) return t; t -= (calcBezier(t, r, n) - e) / i; } return t; } function LinearEasing(e) { return e; } function bezier(a, t, l, r) { if (!(0 <= a && a <= 1 && 0 <= l && l <= 1)) throw new Error("bezier x values must be in [0, 1] range"); if (a === t && l === r) return LinearEasing; for (var s = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize), e = 0; e < kSplineTableSize; ++e) s[e] = calcBezier(e * kSampleStepSize, a, l); return function (e) { return 0 === e ? 0 : 1 === e ? 1 : calcBezier( (function (e) { for (var t = 0, r = 1, n = kSplineTableSize - 1; r !== n && s[r] <= e; ++r) t += kSampleStepSize; var o = t + ((e - s[--r]) / (s[r + 1] - s[r])) * kSampleStepSize, i = getSlope(o, a, l); return NEWTON_MIN_SLOPE <= i ? newtonRaphsonIterate(e, o, a, l) : 0 === i ? o : binarySubdivide(e, t, t + kSampleStepSize, a, l); })(e), t, r ); }; } var animUtil = { queue: [], i: 0, init: function () { browserController.addToRenderLoop(animUtil.render); }, runAnimation: function (e, t, r, n) { var o = { callback: e, duration: t, easing: r, then: n, t: 0, p: 0, end: function () { animUtil.finish(this); }, finished: !1, }; return animUtil.queue.push(o), o; }, render: function () { for (animUtil.i = 0; animUtil.i < animUtil.queue.length; animUtil.i++) animUtil.run(animUtil.queue[animUtil.i]); }, run: function (e) { (e.t += browserController.state.delta), (e.p = Math.min(1, e.t / e.duration)), e.callback(e.easing ? e.easing(e.p) : e.p), 1 <= e.p && animUtil.finish(e); }, finish: function (e) { e.then && e.then(), (e.finished = !0), animUtil.queue.splice(animUtil.queue.indexOf(e), 1), animUtil.i--; }, }; /**导航控制器 已整理完毕*/ var navigationController = { startSite: function () { let ti = setTimeout(function () { clearTimeout(ti); ads("show-grid"); // if (isFirstLoad) { // setTimeout(function () { // ads("show-intro"); // }, 10); // } }, 400); }, }; /**浏览器控制器 已整理完毕*/ var browserController = { state: { scrollTop: 0, toRender: [], toResize: [], resizeTimeout: null, mouse: { x: 0, y: 0, xLag: 0, yLag: 0, lag: 3, xLagSlow: 0, yLagSlow: 0, slowLag: 20, down: !1, }, dpi: window.devicePixelRatio || 1, t: 0, d: Date.now(), delta: 0, rem: 0, isMobile: window.innerWidth < 800, isPortrait: window.innerHeight > window.innerWidth, }, initialize: function () { window.addEventListener("resize", browserController.onResize); browserController.renderLoop(); }, addToRenderLoop: function (e) { browserController.state.toRender.push(e); browserController.state.toRender.push(() => {}); }, addToResizeLoop: function (e) { browserController.state.toResize.push(e); }, renderBaseWork: function () { browserController.state.delta = Date.now() - browserController.state.d; browserController.state.t += browserController.state.delta; browserController.state.d = Date.now(); browserController.state.mouse.xLag += (browserController.state.mouse.x - browserController.state.mouse.xLag) / browserController.state.mouse.lag; browserController.state.mouse.yLag += (browserController.state.mouse.y - browserController.state.mouse.yLag) / browserController.state.mouse.lag; browserController.state.mouse.xLagSlow += (browserController.state.mouse.x - browserController.state.mouse.xLagSlow) / browserController.state.mouse.slowLag; browserController.state.mouse.yLagSlow += (browserController.state.mouse.y - browserController.state.mouse.yLagSlow) / browserController.state.mouse.slowLag; }, renderLoop: function () { browserController.renderBaseWork(); browserController.state.toRender.forEach(function (e) { e(); }); requestAnimationFrame(browserController.renderLoop); }, onResize: function () { clearTimeout(browserController.state.resizeTimeout), (browserController.state.resizeTimeout = setTimeout(browserController.resizeLoop, 100)); }, resizeLoop: function () { browserController.state.toResize.forEach(function (e) { e(); }); }, }; /**拖拽工具 已整理完毕*/ var dragUtil = { state: { draggableElements: [], }, init: function () { browserController.addToRenderLoop(dragUtil.render); window.addEventListener("mouseout", function (e) { var t = (e = e || window.event).relatedTarget || e.toElement; (t && "HTML" != t.nodeName) || dragUtil.endAllDrags(); }); }, registerDraggableElement: function (e, t) { var r = { el: e, callback: t, dragging: !1, startPos: { x: 0, y: 0, }, currentPos: { x: 0, y: 0, }, diff: { x: 0, y: 0, }, thisDiff: { x: 0, y: 0, }, endDrag: function () { this.dragging = !1; }, getDist: function () { return Math.sqrt(Math.pow(this.diff.x, 2) + Math.pow(this.diff.y, 2)); }, }; e.addEventListener("mousedown", dragUtil.onDragStart.bind(dragUtil, r)), e.addEventListener("mousemove", dragUtil.onDragMove.bind(dragUtil, r)), e.addEventListener("mouseup", dragUtil.onDragEnd.bind(dragUtil, r)), // e.addEventListener('mouseover', dragUtil.onMouseOver.bind(dragUtil, r)), // e.addEventListener('mouseout', dragUtil.onMouseOut.bind(dragUtil, r)), e.addEventListener("touchstart", dragUtil.onDragStart.bind(dragUtil, r)), e.addEventListener("touchmove", dragUtil.onDragMove.bind(dragUtil, r)), e.addEventListener("touchend", dragUtil.onDragEnd.bind(dragUtil, r)), dragUtil.state.draggableElements.push(r); }, normalizeEvent: function (e) { return e.touches && 0 < e.touches.length ? ((e.clientX = e.touches[0].clientX), (e.clientY = e.touches[0].clientY)) : e.clientX || ((e.clientX = 0), (e.clientY = 0)), e; }, onDragStart: function (e, t) { e.dragging = !0; t = dragUtil.normalizeEvent(t); e.startPos.x = e.currentPos.x = t.clientX; e.startPos.y = e.currentPos.y = t.clientY; e.diff.x = 0; e.diff.y = 0; e.thisDiff.x = 0; e.thisDiff.y = 0; gridController.state.isHandleDrag = !1; }, onDragMove: function (e, t) { if (e.dragging) { t = dragUtil.normalizeEvent(t); e.currentPos.x = t.clientX; e.currentPos.y = t.clientY; var r = e.currentPos.x - e.startPos.x; var n = e.currentPos.y - e.startPos.y; e.thisDiff.x = r - e.diff.x; e.thisDiff.y = n - e.diff.y; e.diff.x = r; e.diff.y = n; // gridController.state.isHandleDrag = !1; } }, onMouseOver: function (e, t) { t = dragUtil.normalizeEvent(t); e.startPos.x = e.currentPos.x = t.clientX; e.startPos.y = e.currentPos.y = t.clientY; e.diff.x = 0; e.diff.y = 0; e.thisDiff.x = 0; e.thisDiff.y = 0; e.endDrag(); e.callback(e); }, onMouseOut: function (e, t) {}, onDragEnd: function (e) { e.dragging && (e.endDrag(), e.callback(e), (gridController.state.isHandleDrag = !0)); }, endAllDrags: function () { dragUtil.state.draggableElements.forEach(function (e) { dragUtil.onDragEnd(e); }); }, clearDraggableElements: function () { dragUtil.state.draggableElements = []; }, render: function () { dragUtil.state.draggableElements.forEach(function (e) { e.dragging && e.callback(e); }); }, }; /**网格控制器 */ var gridController = { state: { items: [], //所有框 showItems: {}, //在屏幕内的框 imageAspect: Math.sqrt(3) / 2, //图像纵横比 原始0.65 screenAspect: window.innerWidth / window.innerHeight, //屏幕纵横比 gridEl: null, rows: 0, cols: 0, colWidth: 0, rowHeight: 0, itemSpace: 0, //间距 itemWidth: 217 * (!window.isMobile ? 1 : 0.6), itemHeight: 251 * (!window.isMobile ? 1 : 0.6), flipWidth: 0, flipHeight: 0, target: new Vec2(1e8, 1e8), offset: new Vec2(1e8, 1e8), initTarget: new Vec2(1e8, 1e8), focus: null, selected: null, count: 32, lerpRate: 1, canDrag: !0, template: null, flipped: !1, canIncrement: !0, cardArray: null, needsCreate: !1, canSelect: 1, isHandleDrag: !0, isClick: false, }, /**初始 */ init: function (e) { gridController.state.grid = document.getElementById("grid"); dragUtil.registerDraggableElement(gridController.state.grid, gridController.handleDrag); gridController.state.screenCenter = new Vec2(window.innerWidth / 2, window.innerHeight / 2); gridController.state.cardArray = e; gridController.create(); browserController.addToRenderLoop(this.render); browserController.addToResizeLoop(this.handleResize); gridController.getgif(5); }, //部分图片转为gif图 getgif: function (seconds) { const tt = setTimeout(() => { clearTimeout(tt); $(".grid__itemPicture.hasurl").each(function () { const gif = $(this).attr("gif"); const newSrc = `https://vr.njmuseum.com/img/ww/${gif}`; $(this).find("img").attr("src", newSrc); }); }, seconds * 1000); }, /**场景调整大小 */ handleResize: function () { gridController.state.screenCenter = new Vec2(window.innerWidth / 2, window.innerHeight / 2); gridController.create(); }, /**创建网格 */ create: function (boo = true) { var e = gridController.state.cardArray; //横屏/竖屏 if (window.innerWidth > window.innerHeight) { let b = Math.ceil(window.innerHeight / (gridController.state.itemHeight * 0.75)); n = Math.ceil(window.innerWidth / gridController.state.itemWidth) + 1; let c = Math.ceil(e.length / n); o = c > b ? c : b; o = o % 2 == 0 ? o : o + 1; } else { let a = Math.ceil(window.innerWidth / gridController.state.itemWidth) + 1; o = Math.ceil(window.innerHeight / (gridController.state.itemHeight * 0.75)); o = o % 2 == 0 ? o : o + 1; let c = Math.ceil(e.length / o); n = c > a ? c : a; } gridController.state.rows = o; gridController.state.cols = n; gridController.state.colWidth = gridController.state.itemWidth; gridController.state.rowHeight = gridController.state.itemHeight; gridController.state.flipWidth = gridController.state.colWidth * n; gridController.state.flipHeight = gridController.state.rowHeight * o * 0.75; gridController.state.count = o * n; gridController.state.grid.innerHTML = ""; gridController.state.showItems = {}; gridController.state.items = []; gridController.state.target = new Vec2(1e8, 1e8); gridController.state.offset = new Vec2(1e8, 1e8); // debugger; for (var l = 0, s = 0; s < n; s++) { for (var d = 0; d < o; d++) { this.createItem(d, s, l); l++; } } let keys = Object.keys(gridController.state.showItems); if (keys.length >= e.length) { gridController.state.canDrag = 0; let showArr = []; if (e.length < 10) { // 排序逻辑 const sortedArray = Object.values(gridController.state.showItems).sort((a, b) => a.interval - b.interval || b.intervalX - a.intervalX); // const sortedArray = [ // ...Object.values(gridController.state.showItems), // ].sort( // (a, b) => a.intervalY - b.intervalY || a.intervalX - b.intervalX // ); showArr = new Array(keys.length).fill(0); for (let i = 0; i < e.length; i++) { let obj = sortedArray[i]; let inx = keys.indexOf(obj.index + ""); showArr[inx] = e[i]; } } else { let arr1 = new Array(keys.length).fill(0); showArr = gridController.replaceRandomly(arr1, e); } let nint = 0; gridController.state.items.forEach((n, inx) => { gridController.state.grid.append(n.el); if (keys.indexOf(n.index + "") != -1) { if (showArr[nint] != 0) { n.card.className = "grid__itemCard"; n.el.id = showArr[nint] + "_" + n.index; n.el.style.zIndex = Math.floor(Math.random() * 9999); n.image = gridController.createImage(showArr[nint], "grid__itemPicture"); n.card.append(n.image); } nint++; } }); } else { let arr1 = new Array(gridController.state.items.length).fill(0); let showArr = gridController.replaceRandomly(arr1, e); gridController.state.items.forEach((n, inx) => { gridController.state.grid.append(n.el); let ids = showArr[inx] != 0 ? showArr[inx] : e[Math.floor(Math.random() * e.length)]; n.card.className = "grid__itemCard"; n.el.id = ids + "_" + n.index; n.el.style.zIndex = Math.floor(Math.random() * 9999); n.image = gridController.createImage(ids, "grid__itemPicture"); n.card.append(n.image); }); } }, replaceRandomly: function (arr1, arr2) { const result = [...arr1]; const availableIndices = result.map((_, index) => index); for (const value of arr2) { if (availableIndices.length === 0) break; const randomIndex = Math.floor(Math.random() * availableIndices.length); const targetIndex = availableIndices[randomIndex]; result[targetIndex] = value; availableIndices.splice(randomIndex, 1); } return result; }, /**创建网格单独对象 */ createItem: function (e, t, r) { var n = { row: e, col: t, el: document.createElement("div"), offset: new Vec2(0, 0), pos: new Vec2(0, 0), target: new Vec2(0, 0), interval: 0, intervalX: 0, intervalY: 0, zDistance: 0, zTarget: 0, zRate: 0.1, angle: 0, angleTarget: 0, index: r, order: 0, uid: "", card: document.createElement("div"), back: document.createElement("div"), image: "", close: document.createElement("div"), anim: null, }; n.el.className = "grid__item"; n.el.id = n.index; n.card.className = "grid__itemCard showBack"; n.back.className = "grid__itemBack"; n.card.append(n.back); n.el.append(n.card); n.el.style.height = gridController.state.itemHeight + "px"; n.el.style.width = gridController.state.itemWidth + "px"; n.el.addEventListener("mousedown", gridController.setFocus.bind(n)); n.el.addEventListener("touchstart", gridController.setFocus.bind(n)); n.offset.x = t * (gridController.state.itemWidth + gridController.state.itemSpace) + (parseInt(e % 2) == 0 ? 0 : gridController.state.itemWidth / 2); n.offset.y = e * gridController.state.itemHeight * 0.75; let xx = ((n.offset.x + gridController.state.offset.x) % gridController.state.flipWidth) - gridController.state.colWidth; let yy = ((n.offset.y + gridController.state.offset.y) % gridController.state.flipHeight) - gridController.state.rowHeight; gridController.state.items.push(n); if (!window.isMobile) { if (xx >= gridController.state.itemWidth * 0.5 && xx < window.innerWidth - gridController.state.itemWidth * 1.5 && yy > 0 && yy < window.innerHeight - gridController.state.itemHeight * 0.75) { n.intervalX = Math.abs(xx + gridController.state.itemWidth * 0.5 - window.innerWidth * 0.5); n.intervalY = Math.abs(yy + gridController.state.itemHeight * 0.5 - window.innerHeight * 0.5); n.interval = gridController.calculateDistance(xx + gridController.state.itemWidth * 0.5, yy + gridController.state.itemHeight * 0.5); gridController.state.showItems[n.index] = n; } } else { // let w = $('.logo').width(); // let h = $('.logo').height(); // let ww = $('.select .option').width(); // let hh = $('.select .option').height(); // console.log(w, h, ww, hh, xx, yy, n.index); // console.log(gridController.state.target); //手机版 if ( // !(xx >= 0 && xx <= w && yy >= 0 && yy <= h) && // !(xx >= ww && xx <= window.innerWidth && yy >= hh && yy <= h) && xx >= 0 && xx < window.innerWidth - gridController.state.itemWidth * 0.5 && yy >= -10 && yy < window.innerHeight - gridController.state.itemHeight * 0.75 ) { n.intervalX = Math.abs(xx + gridController.state.itemWidth * 0.5 - window.innerWidth * 0.5); n.intervalY = Math.abs(yy + gridController.state.itemHeight * 0.5 - window.innerHeight * 0.5); n.interval = gridController.calculateDistance(xx + gridController.state.itemWidth * 0.5, yy + gridController.state.itemHeight * 0.75); gridController.state.showItems[n.index] = n; } } }, /**计算网格到页面中心点的距离 */ calculateDistance: function (pointX, pointY) { const dx = pointX - window.innerWidth * 0.5; const dy = pointY - window.innerHeight * 0.5; return Math.floor(Math.sqrt(dx * dx + dy * dy) * 100) / 100; }, deleteItem: function (newArr) { gridController.state.items.forEach((e, t) => { gridController.state.grid.removeChild(e.el); }); gridController.state.items = []; gridController.state.cardArray = newArr; gridController.create(false); gridController.positionCardsInCenter(); var temptime = setTimeout(() => { gridController.deselectItem(); clearTimeout(temptime); }, 100); }, /**创建网格单独对象图 */ createImage: function (e, t) { let gifArr = [ // "hbts04", "10:12156", "0:5268", // '2:6587', // '0:8178', // '2:823', // '2:6923', "10:23225", "10:8069", "10:2259", "3:2106", "10:26104", "10:19001", "3:7550", "111111", "10:28529", ]; var html = `
${getName(lxs[e].name).dynasty}

${getName(lxs[e].name).name}

`; // 创建一个临时容器 var container = document.createElement("div"); container.innerHTML = html; // 返回生成的 DOM 元素 return container.firstElementChild; }, //拖拽 handleDrag: function (e) { if (gridController.state.canDrag) { var t = browserController.state.isMobile ? 2 : 1; gridController.state.target.x += e.thisDiff.x * t; gridController.state.target.y += e.thisDiff.y * t; } 0 == e.dragging && (e.getDist() < 10 && gridController.state.focus && (!gridController.state.selected && gridController.state.canSelect ? gridController.selectItem(gridController.state.focus) : gridController.deselectItem(), (gridController.state.canSelect = !0)), (gridController.state.focus = null)); }, //设置焦点 setFocus: function () { gridController.state.focus = this; }, // 选择某一个进详情页 selectItem: function (e) { if ($("body").hasClass("wapbody") && !gridController.state.isClick && !$(e.el).hasClass("active")) { gridController.state.isClick = true; $(".grid__item").removeClass("active later"); $(e.el).addClass("active"); let ti = setTimeout(function () { clearTimeout(ti); $(e.el).addClass("later"); gridController.state.isClick = false; }, 400); } }, moveToCenterAnim: function (e) { this.item.target.x = this.item.pos.x = this.start.x + this.move.x * e; this.item.target.y = this.item.pos.y = this.start.y + this.move.y * e; }, /**卡片中心位置 */ positionCardsInCenter: function () { gridController.state.items.forEach(function (e, t) { var r = e.el.getBoundingClientRect(), n = new Vec2(gridController.state.screenCenter.x - r.width / 2, gridController.state.screenCenter.y - r.height / 2); e.target.x = e.pos.x = n.x; e.target.y = e.pos.y = n.y; gridController.drawItem(e); }); }, // 关闭详情页 deselectItem: function () { gridController.state.selected = null; gridController.state.lerpRate = 0.19; setTimeout(function () { let keys = Object.keys(gridController.state.showItems); gridController.state.canDrag = gridController.state.cardArray.length > keys.length; gridController.state.lerpRate = 1; isSwitchingOver = true; }, 500); gridController.state.needsCreate && (gridController.create(), (gridController.state.needsCreate = !1)); }, setOrder: function (e) { e.order = gridController.getOrder(e); }, getOrder: function (e) { return gridController.state.count - ((e.index - gridController.state.selected.index + gridController.state.count) % gridController.state.count); }, render: function () { if (gridController.state.canDrag && gridController.state.isHandleDrag && !document.documentElement.classList.contains("show-intro") && $(".fp-completely").index() === 1) { // 文物自动移动 gridController.state.target.x += 0.3; } gridController.state.offset.lerp(gridController.state.target, 0.1); gridController.state.items.forEach(gridController.updateItem); gridController.state.items.forEach(gridController.drawItem); }, updateItem: function (e) { var t = gridController.state.selected == e; if (gridController.state.selected) { var r = gridController.state.flipped ? 10 : 6; e.zTarget = 2 * e.order - gridController.state.count + (t ? r : 0); } else { e.target.x = ((e.offset.x + gridController.state.offset.x) % gridController.state.flipWidth) - gridController.state.colWidth; e.target.y = ((e.offset.y + gridController.state.offset.y) % gridController.state.flipHeight) - gridController.state.rowHeight; } e.pos.lerp(e.target, gridController.state.lerpRate); }, /**坐标更新 */ drawItem: function (e) { var t; if (browserController.state.isMobile) { t = window.innerWidth / 40; } else { t = 1.5 * Math.min(12, Math.max(0, window.innerHeight - 550) / 40 + 4); } e.el.style.transform = "translate3d(" + e.pos.x + "px, " + e.pos.y + "px, " + e.zDistance * t + "px)"; }, updateInit: function (newArr) { if (isSwitchingOver) { isSwitchingOver = false; let allNum = 0; gridController.state.selected = gridController.state.items[0]; gridController.state.items.forEach((e, t) => { var r = new Vec2(e.pos.x, e.pos.y), n = e.el.getBoundingClientRect(), o = new Vec2(n.left + n.width / 2, n.top + n.height / 2), i = gridController.state.screenCenter.minus(o); e.centerPos = gridController.state.screenCenter.minus(new Vec2(n.width / 2, n.height / 2)); gridController.setOrder(e); gridController.state.lerpRate = 1; var a = e.index * 10 + Math.ceil(300 * Math.random()) + 100; setTimeout(() => { animUtil.runAnimation( gridController.moveToCenterAnim.bind({ start: r, item: e, move: i, }), 600, easeInOut, () => { allNum++; if (allNum >= gridController.state.items.length) { gridController.deleteItem(newArr); gridController.state.target = new Vec2(1e8, 1e8); gridController.state.offset = new Vec2(1e8, 1e8); } } ); }, 0); }); gridController.getgif(3); } }, }; function gridinit() { browserController.initialize(); animUtil.init(); dragUtil.init(); }