test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-05 05:09:07 +08:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

fix: fadeIn aniamtion

Browse Source
This commit is contained in:
huangtong.ht 2018-11-25 22:36:30 +08:00
parent fd118fd7e1
commit e14ca2cf34
2 changed files with 276 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

256
demos/test.html
View File

@ -49,56 +49,238 @@
}
</style>
<script>
G6.Global.updateDuration = 3000;
const data = {
nodes: [{
id: 'node1',
x: 100,
y: 200
}, {
id: 'node2',
x: 200,
y: 200
}],
edges: [{
target: 'node2',
source: 'node1'
}]
const { forceSimulation, forceManyBody, forceCollide } = d3;
const Util = G6.Util;
class ParticleTransport {
constructor(options) {
this.options = {
getGravitys(graph) {
const colors = [ '#FD8C3D', '#D83F43', '#F7BED6', '#E487C7', '#46A848', '#D83F43', '#3B85BA', '#48335B', '#B7CDE9' ]; // 重力点附上颜色
const width = graph.getWidth();
const height = graph.getHeight();
const padding = 70;
const center = [
width / 2,
height / 2
];
const gravityCount = 8;
const angleStep = Math.PI * 2 / gravityCount;
const radius = Math.min(width, height) / 2 - padding;
const initialv = [ 0, -radius ];
const gravitys = [ initialv ];
for (let index = 1; index < gravityCount; index++) {
const v = Util.vec2.rotate([], initialv, [ 0, 0 ], angleStep * index);
gravitys.push(v);
}
gravitys.forEach((gravity, index) => {
gravity[0] = center[0] + gravity[0];
gravity[1] = center[1] + gravity[1];
gravity[2] = colors[index];
});
return gravitys;
},
...options
};
this.init();
}
initGraph() {
const graph = new G6.Graph({
container: 'mountNode',
height: window.innerHeight, // 画布高
animate: true
animate: {
update({ element, endKeyFrame }) {
const { props } = endKeyFrame;
element.animate({
matrix: props.matrix,
...props.attrs
}, 3000, 'easeQuadOut');
},
show: 'fadeIn',
hide: 'fadeOut'
}
});
graph.node({
size: 16
this.graph = graph;
}
getRandom(array) {
return array[parseInt(array.length * Math.random())];
}
initData() {
const { gravitys } = this;
const data = {
nodes: []
};
gravitys.forEach((gravity, index) => {
const maxCount = 16 * (index + 1);
const minCount = 2 * (index + 1);
const nodeCount = parseInt(Math.random() * maxCount);
for (let index = 0; index < nodeCount; index++) {
data.nodes.push({
size: 4 + 6 * Math.random(),
color: gravity[2],
gx: gravity[0],
gy: gravity[1],
x: gravity[0] + Math.random() * 5,
y: gravity[1] + Math.random() * 5,
style: {
stroke: null
}
});
}
});
this.graph.read(data);
this.data = data;
}
initSimulation() {
const { nodes } = this.data;
const graph = this.graph;
this.simulation = forceSimulation(nodes)
.force('charge', forceManyBody())
.force('collision', forceCollide().radius(model => {
return model.size / 2 + 2;
}))
.on('tick', function() {
// const alpha = 1/node.gx - node.x;
nodes.forEach(node => {
node.x += (node.gx - node.x) * 0.04;
node.y += (node.gy - node.y) * 0.04;
});
graph.preventAnimate(() => {
graph.updateNodePosition();
});
});
}
initGravitys() {
const { getGravitys } = this.options;
this.gravitys = getGravitys(this.graph);
}
init() {
this.initGraph();
this.initGravitys();
this.initData();
this.initSimulation();
const graph = this.graph;
let time = 3000;
let showStep = 1000;
let hideStep = 3000;
graph.add('node', {
id: 'title',
label: {
text: '2018 AntV 品牌日',
fontSize: 18
},
x: graph.getWidth()/2,
y: graph.getHeight()/2,
style: {
fillOpacity: 0,
strokeOpacity: 0
}
});
graph.read(data);
setTimeout(()=>{
graph.update('node2', {
x: 300
})
}, 1000);
graph.hide('title');
}, time);
time += showStep;
setTimeout(()=>{
graph.preventAnimate(()=>{
graph.update('node2', {
x: 300
})
graph.update('title', {
label: {
text: '2018.11.22 14:00 ~ 16:00',
fontSize: 18
},
});
graph.update('node2', {
x: 400
})
}, 2000);
});
graph.show('title');
}, time);
time += hideStep;
setTimeout(()=>{
graph.hide('title');
}, time);
time += showStep;
setTimeout(()=>{
graph.preventAnimate(()=>{
graph.update('node2', {
x: 400
})
graph.update('title', {
label: {
text: '黄龙万科中心 I 座 3-15',
fontSize: 18
},
});
graph.update('node2', {
x: 500
})
}, 3000);
});
graph.show('title');
}, time);
time += hideStep;
setTimeout(()=>{
graph.hide('title');
}, time);
time += showStep;
setTimeout(()=>{
graph.preventAnimate(()=>{
graph.update('title', {
label: {
text: '欢迎大家到来',
fontSize: 18
},
});
});
graph.show('title');
}, time);
time += hideStep;
setTimeout(()=>{
graph.hide('title');
}, time);
time += showStep;
setTimeout(()=>{
graph.preventAnimate(()=>{
graph.update('title', {
label: {
text: 'Power By G6',
fontSize: 18
},
});
});
graph.show('title');
}, time);
// setTimeout(()=>{
// graph.preventAnimate(()=>{
// graph.update('title', {
// label: '欢迎大家到来'
// });
// });
// graph.show('title');
// }, time);
// setTimeout(()=>{
// graph.hide('title');
// }, time);
// setTimeout(()=>{
// graph.preventAnimate(()=>{
// graph.update('title', {
// label: {
// text: 'Power By G6',
// fontSize: 18
// },
// });
// });
// graph.show('title');
// }, time);
// setTimeout(()=>{
// graph.hide('title');
// }, time);
setInterval(() => {
const { nodes } = this.data;
const count = 10;
for (let index = 0; index < count; index++) {
const node = this.getRandom(nodes);
const gravity = this.getRandom(this.gravitys);
graph.update(node.id, {
gx: gravity[0],
gy: gravity[1],
color: gravity[2]
});
}
this.simulation.alpha(0.003).restart();
}, 200);
}
}
new ParticleTransport();
</script>
</body>
</html>

38
src/animation/index.js
View File

@ -17,7 +17,7 @@ const Global = require('../global');
/**
* scale in animate
* @param {object} item - graph item
* @param {object} item - G.Element
* @param {function} callback callback when animate finshed
*/
function scaleIn(item, callback) {
@ -43,7 +43,7 @@ function scaleIn(item, callback) {
/**
* scale out animate
* @param {object} item - graph item
* @param {object} item - G.Element
* @param {function} callback callback when animate finshed
*/
function scaleOut(item, callback) {
@ -64,10 +64,11 @@ function scaleOut(item, callback) {
/**
* fade in animate
* @param {object} element - graph item
* @param {object} group - G.Group item.getGraphicGroup()
* @param {function} callback callback when animate finshed
*/
function fadeIn(element, callback) {
function fadeIn(group, callback) {
group.deepEach(element => {
if (element.isShape) {
const fillOpacity = element.attr('fillOpacity');
const strokeOpacity = element.attr('strokeOpacity');
@ -80,19 +81,30 @@ function fadeIn(element, callback) {
strokeOpacity
}, Global.enterDuration, Global.enterEasing, callback);
}
});
}
/**
* fade out animate
* @param {object} element - graph item
* @param {object} group - G.Group item.getGraphicGroup()
* @param {function} callback callback when animate finshed
*/
function fadeOut(element, callback) {
function fadeOut(group, callback) {
group.deepEach(element => {
const fillOpacity = element.attr('fillOpacity');
const strokeOpacity = element.attr('strokeOpacity');
if (element.isShape) {
element.animate({
fillOpacity: 0,
strokeOpacity: 0
}, Global.leaveDuration, Global.leaveEasing, callback);
}, Global.leaveDuration, Global.leaveEasing, () => {
element.attr({
fillOpacity,
strokeOpacity
});
callback();
});
}
});
}
module.exports = {
@ -116,16 +128,20 @@ module.exports = {
done();
});
},
enterFadeIn({ element }) {
enterFadeIn({ element, item }) {
if (!element.isItemContainer || !item.getKeyShape()) return;
fadeIn(element);
},
showFadeIn({ element }) {
showFadeIn({ element, item }) {
if (!element.isItemContainer || !item.getKeyShape()) return;
fadeIn(element);
},
leaveFadeOut({ element, done }) {
leaveFadeOut({ element, item, done }) {
if (!element.isItemContainer || !item.getKeyShape()) return;
fadeOut(element, done);
},
hideFaseOut({ element, done }) {
hideFadeOut({ element, item, done }) {
if (!element.isItemContainer || !item.getKeyShape()) return;
fadeOut(element, done);
}
};