From 473c20675bb3f22f6f809b70d66013229cf5ee58 Mon Sep 17 00:00:00 2001 From: richie Date: Mon, 12 Nov 2018 16:16:18 +0800 Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 4 + build.xml | 130 ++++++++++++ lib/report/.gitkeep | 0 plugin.xml | 18 ++ pom.xml | 18 ++ .../fr/plugin/loading/GradientFileLoader.java | 15 ++ .../com/fr/plugin/loading/web/loader.js | 188 ++++++++++++++++++ 7 files changed, 373 insertions(+) create mode 100644 .gitignore create mode 100644 build.xml create mode 100644 lib/report/.gitkeep create mode 100644 plugin.xml create mode 100644 pom.xml create mode 100644 src/main/java/com/fr/plugin/loading/GradientFileLoader.java create mode 100644 src/main/resources/com/fr/plugin/loading/web/loader.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..895df04 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +*.iml +.idea/ +target/ +lib/report/*.jar \ No newline at end of file diff --git a/build.xml b/build.xml new file mode 100644 index 0000000..b96da61 --- /dev/null +++ b/build.xml @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/lib/report/.gitkeep b/lib/report/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/plugin.xml b/plugin.xml new file mode 100644 index 0000000..c19a5ce --- /dev/null +++ b/plugin.xml @@ -0,0 +1,18 @@ + + + com.fr.plugin.loading.gradient + + yes + 1.2 + 8.0 + 2016-04-19 + author + + + [2017-09-06]去除遮罩问题。
+ ]]> + + + + \ No newline at end of file diff --git a/pom.xml b/pom.xml new file mode 100644 index 0000000..4dea37d --- /dev/null +++ b/pom.xml @@ -0,0 +1,18 @@ + + + 4.0.0 + + + com.fr.plugin + starter + 10.0 + + jar + demo-page-loading + + + ${project.basedir}/../webroot/WEB-INF/plugins/plugin-com.fr.plugin.loading.gradient-1.0/classes + + \ No newline at end of file diff --git a/src/main/java/com/fr/plugin/loading/GradientFileLoader.java b/src/main/java/com/fr/plugin/loading/GradientFileLoader.java new file mode 100644 index 0000000..42bf18b --- /dev/null +++ b/src/main/java/com/fr/plugin/loading/GradientFileLoader.java @@ -0,0 +1,15 @@ +package com.fr.plugin.loading; + +import com.fr.stable.fun.impl.AbstractJavaScriptFileHandler; + +/** + * Created by richie on 16/4/20. + */ +public class GradientFileLoader extends AbstractJavaScriptFileHandler { + @Override + public String[] pathsForFiles() { + return new String[]{ + "/com/fr/plugin/loading/web/loader.js" + }; + } +} \ No newline at end of file diff --git a/src/main/resources/com/fr/plugin/loading/web/loader.js b/src/main/resources/com/fr/plugin/loading/web/loader.js new file mode 100644 index 0000000..f53e38e --- /dev/null +++ b/src/main/resources/com/fr/plugin/loading/web/loader.js @@ -0,0 +1,188 @@ +;(function ($) { + + $.extend(FR.HtmlLoader, { + + loadingEffect : function (cfg) { + var el = cfg.el; + var config = $.extend({ + show : false, + overflow : false + }, cfg || {}); + var $indicator = el.data('indicator'); + if (!$indicator) { + $indicator = $(''); + var o = { + position: 'fixed', + margin: 'auto', + left: '0px', + right: '0px', + top: '0px', + bottom: '0px', + height: '300px', + width: '400px' + }; + $indicator.css(o).css('pointer-events','none'); + el.data('indicator', $indicator); + } + var c = $indicator[0]; + var ctx = c.getContext('2d'), + cw = c.width = 400, + ch = c.height = 300, + rand = function (a, b) { + return ~~((Math.random() * (b - a + 1)) + a); + }, + dToR = function (degrees) { + return degrees * (Math.PI / 180); + }, + circle = { + x: (cw / 2) + 5, + y: (ch / 2) + 22, + radius: 90, + speed: 2, + rotation: 0, + angleStart: 270, + angleEnd: 90, + hue: 220, + thickness: 18, + blur: 25 + }, + particles = [], + particleMax = 100, + updateCircle = function () { + if (circle.rotation < 360) { + circle.rotation += circle.speed; + } else { + circle.rotation = 0; + } + }, + renderCircle = function () { + ctx.save(); + ctx.translate(circle.x, circle.y); + ctx.rotate(dToR(circle.rotation)); + ctx.beginPath(); + ctx.arc(0, 0, circle.radius, dToR(circle.angleStart), dToR(circle.angleEnd), true); + ctx.lineWidth = circle.thickness; + ctx.strokeStyle = gradient1; + ctx.stroke(); + ctx.restore(); + }, + renderCircleBorder = function () { + ctx.save(); + ctx.translate(circle.x, circle.y); + ctx.rotate(dToR(circle.rotation)); + ctx.beginPath(); + ctx.arc(0, 0, circle.radius + (circle.thickness / 2), dToR(circle.angleStart), dToR(circle.angleEnd), true); + ctx.lineWidth = 2; + ctx.strokeStyle = gradient2; + ctx.stroke(); + ctx.restore(); + }, + renderCircleFlare = function () { + ctx.save(); + ctx.translate(circle.x, circle.y); + ctx.rotate(dToR(circle.rotation + 185)); + ctx.scale(1, 1); + ctx.beginPath(); + ctx.arc(0, circle.radius, 30, 0, Math.PI * 2, false); + ctx.closePath(); + var gradient3 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 30); + gradient3.addColorStop(0, 'hsla(330, 50%, 50%, .35)'); + gradient3.addColorStop(1, 'hsla(330, 50%, 50%, 0)'); + ctx.fillStyle = gradient3; + ctx.fill(); + ctx.restore(); + }, + renderCircleFlare2 = function () { + ctx.save(); + ctx.translate(circle.x, circle.y); + ctx.rotate(dToR(circle.rotation + 165)); + ctx.scale(1.5, 1); + ctx.beginPath(); + ctx.arc(0, circle.radius, 25, 0, Math.PI * 2, false); + ctx.closePath(); + var gradient4 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 25); + gradient4.addColorStop(0, 'hsla(30, 100%, 50%, .2)'); + gradient4.addColorStop(1, 'hsla(30, 100%, 50%, 0)'); + ctx.fillStyle = gradient4; + ctx.fill(); + ctx.restore(); + }, + createParticles = function () { + if (particles.length < particleMax) { + particles.push({ + x: (circle.x + circle.radius * Math.cos(dToR(circle.rotation - 85))) + (rand(0, circle.thickness * 2) - circle.thickness), + y: (circle.y + circle.radius * Math.sin(dToR(circle.rotation - 85))) + (rand(0, circle.thickness * 2) - circle.thickness), + vx: (rand(0, 100) - 50) / 1000, + vy: (rand(0, 100) - 50) / 1000, + radius: rand(1, 6) / 2, + alpha: rand(10, 20) / 100 + }); + } + }, + updateParticles = function () { + var i = particles.length; + while (i--) { + var p = particles[i]; + p.vx += (rand(0, 100) - 50) / 750; + p.vy += (rand(0, 100) - 50) / 750; + p.x += p.vx; + p.y += p.vy; + p.alpha -= .01; + + if (p.alpha < .02) { + particles.splice(i, 1) + } + } + }, + renderParticles = function () { + var i = particles.length; + while (i--) { + var p = particles[i]; + ctx.beginPath(); + ctx.fillRect(p.x, p.y, p.radius, p.radius); + ctx.closePath(); + ctx.fillStyle = 'hsla(0, 0%, 100%, ' + p.alpha + ')'; + } + }, + clear = function () { + ctx.globalCompositeOperation = 'destination-out'; + ctx.fillStyle = 'rgba(0, 0, 0, .1)'; + ctx.fillRect(0, 0, cw, ch); + ctx.globalCompositeOperation = 'lighter'; + } + + ctx.shadowBlur = circle.blur; + ctx.shadowColor = 'hsla(' + circle.hue + ', 80%, 60%, 1)'; + ctx.lineCap = 'round'; + + var gradient1 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius); + gradient1.addColorStop(0, 'hsla(' + circle.hue + ', 60%, 50%, .25)'); + gradient1.addColorStop(1, 'hsla(' + circle.hue + ', 60%, 50%, 0)'); + + var gradient2 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius); + gradient2.addColorStop(0, 'hsla(' + circle.hue + ', 100%, 50%, 0)'); + gradient2.addColorStop(.1, 'hsla(' + circle.hue + ', 100%, 100%, .7)'); + gradient2.addColorStop(1, 'hsla(' + circle.hue + ', 100%, 50%, 0)'); + + + var draw = function () { + clear(); + updateCircle(); + renderCircle(); + renderCircleBorder(); + renderCircleFlare(); + renderCircleFlare2(); + createParticles(); + updateParticles(); + renderParticles(); + }; + if (!config.show) { + clearInterval(FR.HtmlLoader.loadingMark); + } else if (config.show && !$indicator.is(':visible')) { + el.append($indicator); + clearInterval(FR.HtmlLoader.loadingMark); + FR.HtmlLoader.loadingMark = setInterval(draw, 16); + } + } + }); +})(jQuery); \ No newline at end of file