fanruan
/
demo-page-loading
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

自定义加载动画示例

master
richie 6 years ago
commit
473c20675b
7 changed files with 373 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      .gitignore
  2. 130
      build.xml
  3. 0
      lib/report/.gitkeep
  4. 18
      plugin.xml
  5. 18
      pom.xml
  6. 15
      src/main/java/com/fr/plugin/loading/GradientFileLoader.java
  7. 188
      src/main/resources/com/fr/plugin/loading/web/loader.js

4
.gitignore vendored
Unescape View File

@ -0,0 +1,4 @@
*.iml
.idea/
target/
lib/report/*.jar

130
build.xml
Unescape View File

@ -0,0 +1,130 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<project basedir="." default="jar" name="plugin">
<!-- JDK路径，根据自己机器上实际位置修改-->
<property name="jdk.home" value="/Library/Java/JavaVirtualMachines/jdk1.8.0_172.jdk/Contents/Home"/>
<property name="libs" value="${basedir}/lib"/>
<property name="publicLibs" value=""/>
<property name="reportLibs" value="${basedir}/lib/report"/>
<property name="destLoc" value="."/>
<property name="classes" value="classes"/>
<xmlproperty file="${basedir}/plugin.xml"/>
<property name="current-version" value="${plugin.version}"/>
<!-- 插件版本-->
<property name="plugin-version" value="${current-version}"/>
<!-- 插件名字-->
<property name="plugin-name" value="demo-web-request"/>
<property name="plugin-jar" value="fr-plugin-${plugin-name}-${plugin-version}.jar"/>
<target name="prepare">
<delete dir="${classes}"/>
<delete dir="fr-plugin-${plugin-name}-${plugin-version}"/>
<xmlproperty file="${basedir}/plugin.xml"/>
<delete dir="${destLoc}/${plugin.name}"/>
</target>
<path id="compile.classpath">
<fileset dir="${libs}">
<include name="**/*.jar"/>
</fileset>
<fileset dir="${publicLibs}">
<include name="**/*.jar"/>
</fileset>
<fileset dir="${reportLibs}">
<include name="**/*.jar"/>
</fileset>
</path>
<patternset id="resources4Jar">
<exclude name="**/.settings/**"/>
<exclude name=".classpath"/>
<exclude name=".project"/>
<exclude name="**/*.java"/>
<exclude name="**/*.db"/>
<exclude name="**/*.g"/>
<exclude name="**/package.html"/>
</patternset>
<target name="copy_resources">
<echo message="从${resources_from}拷贝图片,JS,CSS等资源文件"/>
<delete dir="tmp"/>
<copy todir="tmp">
<fileset dir="${resources_from}/src/main/resources">
<patternset refid="resources4Jar"/>
</fileset>
</copy>
<copy todir="${classes}">
<fileset dir="tmp"/>
</copy>
<delete dir="tmp"/>
</target>
<target name="compile_javas">
<echo message="编译${compile_files}下的Java文件"/>
<javac destdir="${classes}" debug="false" optimize="on" source="${source_jdk_version}"
target="${target_jdk_version}"
fork="true" memoryMaximumSize="512m" listfiles="false" srcdir="${basedir}"
executable="${compile_jdk_version}/bin/javac">
<src path="${basedir}/src/main/java"/>
<exclude name="**/.svn/**"/>
<compilerarg line="-encoding UTF8 "/>
<classpath refid="compile.classpath"/>
</javac>
<taskdef name="pretreatment" classname="com.fr.plugin.pack.PluginPretreatmentTask">
<classpath refid="compile.classpath"/>
</taskdef>
<pretreatment baseDir="${basedir}"/>
</target>
<target name="jar_classes">
<echo message="打Jar包:${jar_name}"/>
<delete file="${basedir}/${jar_name}"/>
<jar jarfile="${basedir}/${jar_name}">
<fileset dir="${classes}">
</fileset>
</jar>
</target>
<target name="super_jar" depends="prepare">
<antcall target="copy_resources">
<param name="resources_from" value="${basedir}"/>
</antcall>
<antcall target="compile_javas">
<param name="source_jdk_version" value="1.6"/>
<param name="target_jdk_version" value="1.6"/>
<param name="compile_jdk_version" value="${jdk.home}"/>
<param name="compile_files" value="${basedir}/src"/>
</antcall>
<echo message="compile plugin success!"/>
<antcall target="jar_classes">
<param name="jar_name" value="${plugin-jar}"/>
</antcall>
<delete dir="${classes}"/>
</target>
<target name="jar" depends="super_jar">
<antcall target="zip"/>
</target>
<target name="zip">
<property name="plugin-folder" value="fr-plugin-${plugin-name}-${plugin-version}"/>
<echo message="----------zip files----------"/>
<mkdir dir="${plugin-folder}"/>
<copy todir="${plugin-folder}">
<fileset dir=".">
<include name="${plugin-jar}"/>
<include name="plugin.xml"/>
</fileset>
<fileset dir="${libs}">
<include name="*.jar"/>
<include name="*.dll"/>
</fileset>
</copy>
<zip destfile="${basedir}/${plugin-folder}.zip" basedir=".">
<include name="${plugin-folder}/*.jar"/>
<include name="${plugin-folder}/*.dll"/>
<include name="${plugin-folder}/plugin.xml"/>
</zip>
<move file="${plugin-folder}.zip" todir="${destLoc}/install"/>
</target>
</project>

0
lib/report/.gitkeep
Unescape View File

18
plugin.xml
Unescape View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<plugin>
<id>com.fr.plugin.loading.gradient</id>
<name><![CDATA[渐变加载动画]]></name>
<active>yes</active>
<version>1.2</version>
<env-version>8.0</env-version>
<jartime>2016-04-19</jartime>
<vendor>author</vendor>
<description><![CDATA[修改加载报表时的等待动画]]></description>
<change-notes><![CDATA[
[2016-05-06]修复额外引入的全局变量的问题。<br/>
[2017-09-06]去除遮罩问题。<br/>
]]></change-notes>
<extra-core>
<JavaScriptFileHandler class="com.fr.plugin.loading.GradientFileLoader"/>
</extra-core>
</plugin>

18
pom.xml
Unescape View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>com.fr.plugin</groupId>
<artifactId>starter</artifactId>
<version>10.0</version>
</parent>
<packaging>jar</packaging>
<artifactId>demo-page-loading</artifactId>
<build>
<!---如果要更改调试插件，改这里的配置就可以了-->
<outputDirectory>${project.basedir}/../webroot/WEB-INF/plugins/plugin-com.fr.plugin.loading.gradient-1.0/classes</outputDirectory>
</build>
</project>

15
src/main/java/com/fr/plugin/loading/GradientFileLoader.java
Unescape View File

@ -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"
};
}
}

188
src/main/resources/com/fr/plugin/loading/web/loader.js
Unescape View File

@ -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 = $('<canvas>');
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);
Write Preview
Loading…
Cancel
Save