From 63a5259f0da10bdaa0b211cf0b73e5ded9784198 Mon Sep 17 00:00:00 2001 From: zouap Date: Mon, 30 May 2022 10:20:05 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zouap --- custom/public/rotation3D/rotation3D copy.js | 380 -------------------- custom/public/rotation3D/rotation3D.js | 11 +- templates/base/footer.tmpl | 8 +- 3 files changed, 12 insertions(+), 387 deletions(-) delete mode 100644 custom/public/rotation3D/rotation3D copy.js diff --git a/custom/public/rotation3D/rotation3D copy.js b/custom/public/rotation3D/rotation3D copy.js deleted file mode 100644 index 8ec5b6938..000000000 --- a/custom/public/rotation3D/rotation3D copy.js +++ /dev/null @@ -1,380 +0,0 @@ -var cancelFrame = window.cancelAnimationFrame || window.cancelRequestAnimationFrame; -var requestFrame = window.requestAnimationFrame; -var time = !window.performance || !window.performance.now ? - function () {return +new Date()}: - function () {return performance.now()}; - -/** - * 计算两点距离 - * @param points - * @returns {number} - * distance([{x:0,y:0},{x:1,y:1}]); - */ -var distance = function(points) { - var p1=points[0]; - var p2=points[1]; - var a = p2.x-p1.x; - var b = p2.y-p1.y; - return Math.sqrt(a*a+b*b); -}; - -/** - * 圆公式 - * @param rotation 弧度 - * 计算公式： - * Math.PI; //圆周率 - * Math.sin(); //正弦 x -左 +右 - * Math.cos; //余弦 y -下 +上 - */ -var circleMath = { - /** - * 根据弧度计算角度 - * @param rotation 弧度 - * rotation, farScale, xs, xr, ys, yr, itemWidth - */ - // parseRotate: function (rotation) { - // return (180 / Math.PI * rotation) - 180; - // }, - parseRotate: function (rotation, self) { - var sin = Math.sin(rotation), cos = Math.cos(rotation); - var sin_cos = sin*cos; //得出偏移正负值，从0°向左依次 +-+- - var angle = (180 / Math.PI * rotation) - 180; - var lastAngle = angle; - - // console.log('rotation',rotation) - // console.log('sin',sin) - // console.log('cos',cos) - // console.log('sin*cos',sin*cos); - // console.log('统一偏移角度',self.yr * (sin_cos/Math.PI)) - - lastAngle = angle + (self.yr * (sin_cos/(Math.PI+1))); - - return lastAngle; - }, - /** - * 计算scale,x,y - * scale 最小尺寸 + ((1 - 最小尺寸) * (sin正弦 + 1) * 0.5) - * x x起点 + (尺寸 * cos余弦 * x半径) - 元素宽度一半 - * y y起点 + (尺寸 * sin正弦 * x半径) - 元素宽度一半 - * farScale, xs, xr, ys, yr, itemWidth - */ - parseSXY: function (rotation, self) { - var farScale=self.farScale; - var itemWidth=self.itemWidth; - var xs=self.xs; var xr=self.xr; var ys=self.ys; var yr=self.yr; - var sin = Math.sin(rotation), cos = Math.cos(rotation); - var scale = farScale + ((1 - farScale) * (sin + 1) * 0.5); //单个尺寸 - - // 按设置尺寸 - // var x = xs + (scale * cos * xr) - (itemWidth * 0.5); - // var y = ys + (scale * sin * yr) - (itemWidth * 0.5); - // 不使用压缩 - // var x = xs + (cos * xs) - (itemWidth * 0.5); - // var y = ys + (sin * ys) - (itemWidth * 0.5); - // 使用压缩 - var x = xs + (cos * xr) - (itemWidth * 0.5); - var y = ys + (sin * yr) - (itemWidth * 0.5); - var distanceNumber = distance([ - {x:self.$rotation.width()/2 - self.$item.width()/2, y:self.$rotation.height()/2 - self.$item.height()/2}, - {x:x,y:y}] - ); - - // console.log({x:self.$rotation.width()/2, y:self.$rotation.height()/2}) - // console.log('x,y',x,y) - // console.log('两点距离',distanceNumber) - - return { - x: x, - y: y, - scale: scale, - distanceNumber: distanceNumber, - } - }, -} -/** - * 3D旋转 - * @param id - */ -var Rotation3D = window.Rotation3D = function (_opts) { - var self=this; - this.$rotation = $(_opts.id) - this.$lineList = this.$rotation.find('.lineList') - this.$item = this.$rotation.find('.rotation3D__item') - this.$line = this.$rotation.find('.rotation3D__line') - this.itemWidth = this.$item.width(); - this.itemHeight = this.$item.height(); - this.length = this.$item.length; - // 圆计算 - this.rotation = Math.PI / 2; //圆周率/2 - this.destRotation = this.rotation; - - var xr = this.$rotation.width() * 0.5; - var yr = this.$rotation.height() * 0.5; - var xRadius = _opts.xRadius || 0; - var yRadius = _opts.yRadius || 0; - - var opts = Object.assign({ - farScale: 1, // 最小尺寸 - xs: xr, // x起点 - ys: yr, // y起点 - xr: xr - xRadius, // x半径-压缩 - yr: yr - yRadius, // y半径-压缩 - // 播放 - autoPlay:false, - autoPlayDelay:3000, - currenIndex:-1, - fps:30, - speed:4, - },_opts) - Object.assign(this, opts) - - // 遍历子元素 - this.$item.each(function (index) { - $(this).click(function () { - $(this).addClass('active').siblings().removeClass('active') - self.goTo(index) - }) - }) - // 当前控件进入离开 - this.$rotation.mouseenter(function () { - clearInterval(self.autoPlayTimer) - }) - this.$rotation.mouseleave(function () { - self.onAutoPlay() - }) - - this.onAutoPlay() - this.onDrag() - this.render() - -} -/** - * item样式 - * x x起点 + (尺寸 * 余弦 * x压缩) - 元素宽度一半 - * y y起点 + (尺寸 * 正弦 * y压缩) - 元素宽度一半 - */ -Rotation3D.prototype.itemStyle = function($item, index, rotation) { - console.log("itemStyle=" + rotation + " index=" + index); - var parseSXY = circleMath.parseSXY(rotation, this); - var scale = parseSXY.scale; - var x = parseSXY.x; - var y = parseSXY.y; - var $line = this.$lineList.find('.rotation3D__line').eq(index); - - //设置当前子菜单的位置（left,top） = (x,y) - $item.find('.scale').css({ - 'transform': `scale(${scale})`, - // 'top': `${this.itemWidth * (1-scale) }`, - }) - $item.css({ - position: 'absolute', - display: 'inline-block', - // opacity: scale, - 'z-index': parseInt(scale * 100), - 'transform-origin': '0px 0px', - // 'transform': `translate(${x}px, ${y}px) scale(${scale})`, - 'transform': `translate(${x}px, ${y}px)`, - }); - - /** - * 线样式 - */ - $line.css({ - height:parseSXY.distanceNumber, - }) - $line.find('svg').css({ - height:parseSXY.distanceNumber, - }) - $line.find('.dot1').css({ - 'offset-path':`path("M0 ${parseSXY.distanceNumber}, 0 0")`, - }) - $line.find('#path1').attr({ - 'd':`M0 ${parseSXY.distanceNumber}, 0 0`, - }) - - $line.find('.dot2').css({ - 'offset-path':`path("M0 ${parseSXY.distanceNumber/2}, 0 0")`, - }) - $line.find('#path2').attr({ - 'd':`M0 ${parseSXY.distanceNumber}, 0 0`, - }) - - $line.find('.dot3').css({ - 'offset-path':`path("M20 ${parseSXY.distanceNumber} S 0 ${parseSXY.distanceNumber/2}, 20 0")`, - }) - $line.find('#path3').attr({ - 'd':`M20 ${parseSXY.distanceNumber} S 0 ${parseSXY.distanceNumber/2}, 20 0`, - }) - - $line.find('.dot4').css({ - 'offset-path':`path("M20 0 S 40 ${parseSXY.distanceNumber/2}, 20 ${parseSXY.distanceNumber}")`, - }) - $line.find('#path4').attr({ - 'd':`M20 0 S 40 ${parseSXY.distanceNumber/2}, 20 ${parseSXY.distanceNumber}`, - }) - -} -/** - * line样式 - */ -Rotation3D.prototype.lineStyle = function($line, index, rotation) { - var rotate = circleMath.parseRotate(rotation, this) - console.log("lineStyle=" + rotation + " index=" + index); - - $line.css({ - transform: 'rotate(' + rotate + 'deg)', - }) - this.$lineList.css({ - // transform: `rotateX(${this.yRadius / 3}deg)`, - }) -} - -/** - * 旋转至index - */ -Rotation3D.prototype.goTo = function (index) { - var self = this; - this.currenIndex = index; - console.log('goTo currenIndex', index); - /** - * 1.计算floatIndex,用于控死amdiff - */ - var itemsRotated = this.length * ((Math.PI / 2) - this.rotation) / (2 * Math.PI); - var floatIndex = itemsRotated % this.length; - if (floatIndex < 0) { floatIndex = floatIndex + this.length; } - - /** - * 2.计算diff,判断方向正反 - */ - var diff = index - (floatIndex % this.length); - if (2 * Math.abs(diff) > this.length) { - diff -= (diff > 0) ? this.length : -this.length; - } - // 停止任何正在进行的旋转 - this.destRotation += (2 * Math.PI / this.length) * -diff; - this.scheduleNextFrame(); - -} -/** - * 定时器渐近旋转 - */ -Rotation3D.prototype.scheduleNextFrame = function () { - var self = this - this.lastTime = time(); - // 暂停 - var pause = function () { - cancelFrame ? cancelFrame(this.timer) : clearTimeout(self.timer); - self.timer = 0; - } - // 渐进播放 - var playFrame = function () { - var rem = self.destRotation - self.rotation; - var now = time(), dt = (now - self.lastTime) * 0.002; - self.lastTime = now; - // console.log('rem',rem) - - if (Math.abs(rem) < 0.003) { - self.rotation = self.destRotation; - pause(); - } else { - // 渐近地接近目的地 - self.rotation = self.destRotation - rem / (1 + (self.speed * dt)); - self.scheduleNextFrame(); - } - self.render(); - } - - this.timer = cancelFrame ? - requestFrame(playFrame) : - setTimeout(playFrame, 1000 / this.fps); -} -/** - * 更新 - */ -Rotation3D.prototype.render = function () { - var self=this; - - // 图形间隔：弧度 - var spacing = 2 * Math.PI / this.$item.length; - var itemRotation = this.rotation; - var lineRotation = this.rotation + (Math.PI/2); - - this.$item.each(function (index) { - self.itemStyle($(this), index, itemRotation) - itemRotation += spacing; - }) - this.$line.each(function (index) { - self.lineStyle($(this), index, lineRotation) - lineRotation += spacing; - }) -} -/** - * 自动播放 - */ -Rotation3D.prototype.onAutoPlay = function () { - var self = this; - - if (this.autoPlay) { - this.autoPlayTimer = setInterval(function () { - if (self.currenIndex < 0) { - self.currenIndex = self.length - 1 - } - console.log("autoPlayTimer...."); - self.goTo(self.currenIndex); - self.currenIndex--; //倒叙 - }, this.autoPlayDelay) - } -} -/** - * 拖拽 - */ -Rotation3D.prototype.onDrag = function () { - var self = this; - var startX, startY, moveX, moveY, endX, endY; - console.log("onDrag...."); - // 拖拽：三个事件-按下 移动 抬起 - //按下 - this.$rotation.mousedown(function (e) { - startX = e.pageX; startY = e.pageY; - console.log("mousedown...."); - // 移动 - $(document).mousemove(function (e) { - // console.log('移动'); - endX = e.pageX; endY = e.pageY; - moveX = endX - startX; moveY = endY - startY; - // console.log('x,y',moveX,moveY); - }) - // 抬起 - $(document).mouseup(function (e) { - endX = e.pageX; endY = e.pageY; - moveX = endX - startX; moveY = endY - startY; - console.log("mouseup...."); - // 每40旋转一步 - var moveIndex = parseInt(Math.abs(moveX) / 50) - console.log('moveIndex',moveIndex) - if (moveIndex > 0) { - // console.log(moveX<0 ? '向左' : '向右') - if (moveX < 0) { //向左 - self.currenIndex = self.currenIndex - moveIndex - play(moveIndex) - } else { //向右 - self.currenIndex = self.currenIndex + moveIndex - play(moveIndex) - } - } - - // 解绑 - $(document).unbind("mousemove"); - $(document).unbind("mouseup"); - }) - - }) - - function play() { - if (self.currenIndex == 0) { - self.currenIndex = self.length - 1 - } - self.goTo(self.currenIndex % self.length); - } - -} \ No newline at end of file diff --git a/custom/public/rotation3D/rotation3D.js b/custom/public/rotation3D/rotation3D.js index 5a29de481..8ec5b6938 100644 --- a/custom/public/rotation3D/rotation3D.js +++ b/custom/public/rotation3D/rotation3D.js @@ -166,8 +166,15 @@ Rotation3D.prototype.itemStyle = function($item, index, rotation) { 'transform': `scale(${scale})`, // 'top': `${this.itemWidth * (1-scale) }`, }) - var tmp = `translate(${x}px, ${y}px)` - $item.attr("style","position: absolute;display: inline-block;z-index: " + parseInt(scale * 100) + ";transform-origin:0px 0px;transform:" + tmp); + $item.css({ + position: 'absolute', + display: 'inline-block', + // opacity: scale, + 'z-index': parseInt(scale * 100), + 'transform-origin': '0px 0px', + // 'transform': `translate(${x}px, ${y}px) scale(${scale})`, + 'transform': `translate(${x}px, ${y}px)`, + }); /** * 线样式 diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl index a013d724c..68af56e59 100644 --- a/templates/base/footer.tmpl +++ b/templates/base/footer.tmpl @@ -40,16 +40,14 @@ {{if .RequireTribute}} {{end}} -{{if .PageIsHome}} - - -{{end}} + {{template "custom/footer" .}} {{if .PageIsHome}} - + +