test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-04 20:59:15 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

feat: add fade animation

Browse Source
This commit is contained in:
huangtong.ht 2018-11-11 01:39:50 +08:00
parent e6b1e14d34
commit 46820b696e
5 changed files with 161 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/animation/index.js Normal file
View File

@ -0,0 +1,131 @@
/**
* @fileOverview entry file
* the animation cfg description
* @param {object} cfg - animate config
* @property {object} cfg.element - G.Element
* @property {object} cfg.item - G6.Item
* @property {object} cfg.startKeyFrame - start key frame
* @property {object} cfg.endKeyFrame - end key frame
* @property {object} cfg.startStashes - start key frames stashes
* @property {object} cfg.endStashes - end key frames stashes
* @property {function} cfg.done - should be executed when animate finished
* @author huangtonger@aliyun.com
*/
const Global = require('../global');
// const Util = require('../util/');
/**
* scale in animate
* @param {object} item - graph item
* @param {function} callback callback when animate finshed
*/
function scaleIn(item, callback) {
const group = item.getGraphicGroup();
const box = item.getBBox();
const x = (box.minX + box.maxX) / 2;
const y = (box.minY + box.maxY) / 2;
const m = group.getMatrix();
const s = m[0];
group.transform([
[ 't', -x, -y ],
[ 's', 0.01 / s, 0.01 / s ],
[ 't', x, y ]
]);
group.animate({
transform: [
[ 't', -x, -y ],
[ 's', 100 * s, 100 * s ],
[ 't', x, y ]
]
}, Global.enterDuration, Global.enterEasing, callback);
}
/**
* scale out animate
* @param {object} item - graph item
* @param {function} callback callback when animate finshed
*/
function scaleOut(item, callback) {
const group = item.getGraphicGroup();
const box = item.getBBox();
const x = (box.minX + box.maxX) / 2;
const y = (box.minY + box.maxY) / 2;
const m = group.getMatrix();
const s = m[0];
group.animate({
transform: [
[ 't', -x, -y ],
[ 's', 0.01 / s, 0.01 / s ],
[ 't', x, y ]
]
}, Global.leaveDuration, Global.leaveEasing, callback);
}
/**
* fade in animate
* @param {object} element - graph item
* @param {function} callback callback when animate finshed
*/
function fadeIn(element, callback) {
if (element.isShape) {
const fillOpacity = element.attr('fillOpacity');
const strokeOpacity = element.attr('strokeOpacity');
element.attr({
fillOpacity: 0,
strokeOpacity: 0
});
element.animate({
fillOpacity,
strokeOpacity
}, Global.leaveDuration, Global.leaveEasing, callback);
}
}
/**
* fade out animate
* @param {object} element - graph item
* @param {function} callback callback when animate finshed
*/
function fadeOut(element, callback) {
if (element.isShape) {
element.animate({
fillOpacity: 0,
strokeOpacity: 0
}, Global.enterDuration, Global.enterEasing, callback);
}
}
module.exports = {
enterScaleIn({ item, element }) {
if (!element.isItemContainer) return;
scaleIn(item);
},
showScaleIn({ item, element }) {
if (!element.isItemContainer) return;
scaleIn(item);
},
leaveScaleOut({ item, element, done }) {
if (!element.isItemContainer) return;
scaleOut(item, () => {
done();
});
},
hideScaleOut({ item, element, done }) {
if (!element.isItemContainer) return;
scaleOut(item, () => {
done();
});
},
enterFadeIn({ element }) {
fadeIn(element);
},
showFadeIn({ element }) {
fadeIn(element);
},
leaveFadeOut({ element, done }) {
fadeOut(element, done);
},
hideFaseOut({ element, done }) {
fadeOut(element, done);
}
};

101
src/controller/animate.js
View File

@ -4,6 +4,7 @@
*/
const Base = require('./base');
const Animation = require('../animation/');
const Util = require('../util/');
const Global = require('../global');
const INVALID_ATTRS = [ 'matrix', 'fillStyle', 'strokeStyle', 'endArrow', 'startArrow' ];
@ -13,87 +14,31 @@ class Controller extends Base {
return {
/**
* show animate
* @type {function}
* @param {object} cfg - animate config
* @property {object} cfg.element - G.Element
* @property {object} cfg.item - G6.Item
* @property {object} cfg.startKeyFrame - start key frame
* @property {object} cfg.endKeyFrame - end key frame
* @property {object} cfg.startStashes - start key frames stashes
* @property {object} cfg.endStashes - end key frames stashes
* @property {function} cfg.done - should be executed when animate finished
* @type {function|string}
*/
show({ item, element }) {
if (!item.getKeyShape() || !element.isItemContainer) return;
Util.scaleIn(item);
},
show: 'scaleIn',
/**
* hide animate
* @type {function}
* @param {object} cfg - animate config
* @property {object} cfg.element - G.Element
* @property {object} cfg.item - G6.Item
* @property {object} cfg.startKeyFrame - start key frame
* @property {object} cfg.endKeyFrame - end key frame
* @property {object} cfg.startStashes - start key frames stashes
* @property {object} cfg.endStashes - end key frames stashes
* @property {function} cfg.done - should be executed when animate finished
* @type {function|string}
*/
hide({ item, element, done }) {
if (!element.isItemContainer) return;
Util.scaleOut(item, () => {
done();
});
},
hide: 'scaleOut',
/**
* enter animate
* @type {function}
* @param {object} cfg - animate config
* @property {object} cfg.element - G.Element
* @property {object} cfg.item - G6.Item
* @property {object} cfg.startKeyFrame - start key frame
* @property {object} cfg.endKeyFrame - end key frame
* @property {object} cfg.startStashes - start key frames stashes
* @property {object} cfg.endStashes - end key frames stashes
* @property {function} cfg.done - should be executed when animate finished
* @type {function|string}
*/
enter({ item, element }) {
if (!item.getKeyShape() || !element.isItemContainer) return;
Util.scaleIn(item);
},
enter: 'scaleIn',
/**
* leave animate
* @type {function}
* @param {object} cfg - animate config
* @property {object} cfg.element - G.Element
* @property {object} cfg.item - G6.Item
* @property {object} cfg.startKeyFrame - start key frame
* @property {object} cfg.endKeyFrame - end key frame
* @property {object} cfg.startStashes - start key frames stashes
* @property {object} cfg.endStashes - end key frames stashes
* @property {function} cfg.done - should be executed when animate finished
* @type {function|string}
*/
leave({ item, element, done }) {
if (!element.isItemContainer) return;
Util.scaleOut(item, () => {
done();
});
},
leave: 'scaleOut',
/**
* update animate
* @type {function}
* @param {object} cfg - animate config
* @property {object} cfg.element - G.Element
* @property {object} cfg.item - G6.Item
* @property {object} cfg.startKeyFrame - start key frame
* @property {object} cfg.endKeyFrame - end key frame
* @property {object} cfg.startStashes - start key frames stashes
* @property {object} cfg.endStashes - end key frames stashes
* @property {function} cfg.done - should be executed when animate finished
*/
update({ element, endKeyFrame }) {
const { props } = endKeyFrame;
@ -151,17 +96,29 @@ class Controller extends Base {
}
return stash;
}
/**
* get animate
* @param {object} item - item
* @param {string} type - animate type could be `show`, `hide`, `enter`, `leave`, 'update'
* @return {function} animate function
*/
_getAnimation(item, type) {
const shapeObj = item.shapeObj;
const defaultAnimation = this[type];
const shapeAnimation = shapeObj[type + 'Animation'] || shapeObj[type + 'Animate']; // compatible with Animate
const animation = shapeAnimation ? shapeAnimation : defaultAnimation;
return Util.isString(animation) ? Animation[type + Util.upperFirst(animation)] : animation;
}
cache(item, stash, type) {
const group = item.getGraphicGroup();
const { show, hide, leave, enter, update } = this;
group.deepEach(element => {
const id = element.gid;
const subStash = type === 'startStashes' ? this._getStash(element) : this._getStash(element.gid);
subStash.enterAnimate = item.getAnimate('enter', enter);
subStash.leaveAnimate = item.getAnimate('leave', leave);
subStash.showAnimate = item.getAnimate('show', show);
subStash.hideAnimate = item.getAnimate('hide', hide);
subStash.updateAnimate = item.getAnimate('update', update);
subStash.enterAnimate = this._getAnimation(item, 'enter');
subStash.leaveAnimate = this._getAnimation(item, 'leave');
subStash.showAnimate = this._getAnimation(item, 'show');
subStash.hideAnimate = this._getAnimation(item, 'hide');
subStash.updateAnimate = this._getAnimation(item, 'update');
subStash.item = item;
subStash.element = element;
subStash.visible = element.get('visible');
@ -189,12 +146,12 @@ class Controller extends Base {
}
}
} else {
endKeyFrame.element.isItemContainer && enterElements.push(k);
enterElements.push(k);
}
});
Util.each(startStashes, (v, k) => {
if (!endStashes[k]) {
v.element.isItemContainer && leaveElements.push(k);
leaveElements.push(k);
}
});
this.enterElements = enterElements;

11
src/item/item.js
View File

@ -110,17 +110,6 @@ class Item {
getGraph() {
return this.graph;
}
/**
* get animate
* @param {string} type - animate type could be `show`, `hide`, `enter`, `leave`, 'update'
* @param {function} defaultAnimate - default animate
* @return {function} animate function
*/
getAnimate(type, defaultAnimate) {
const shapeObj = this.shapeObj;
const animate = shapeObj[type + 'Animate'];
return animate ? animate : defaultAnimate;
}
_setShapeObj() {
const graph = this.graph;
const type = this.type;

49
src/util/animate.js
View File

@ -1,49 +0,0 @@
const Global = require('../global');
module.exports = {
/**
* scale in animate
* @param {object} item - graph item
* @param {function} callback callback when animate finshed
*/
scaleIn(item, callback) {
const group = item.getGraphicGroup();
const box = item.getBBox();
const x = (box.minX + box.maxX) / 2;
const y = (box.minY + box.maxY) / 2;
const m = group.getMatrix();
const s = m[0];
group.transform([
[ 't', -x, -y ],
[ 's', 0.01 / s, 0.01 / s ],
[ 't', x, y ]
]);
group.animate({
transform: [
[ 't', -x, -y ],
[ 's', 100 * s, 100 * s ],
[ 't', x, y ]
]
}, Global.enterDuration, Global.enterEasing, callback);
},
/**
* scale out animate
* @param {object} item - graph item
* @param {function} callback callback when animate finshed
*/
scaleOut(item, callback) {
const group = item.getGraphicGroup();
const box = item.getBBox();
const x = (box.minX + box.maxX) / 2;
const y = (box.minY + box.maxY) / 2;
const m = group.getMatrix();
const s = m[0];
group.animate({
transform: [
[ 't', -x, -y ],
[ 's', 0.01 / s, 0.01 / s ],
[ 't', x, y ]
]
}, Global.leaveDuration, Global.leaveEasing, callback);
}
};

3
src/util/index.js
View File

@ -10,6 +10,5 @@ const BaseUtil = require('./base');
const DomUtil = require('./dom');
const GraphUtil = require('./graph');
const GraphicUtil = require('./graphic');
const AnimateUtil = require('./animate');
BaseUtil.mix(Util, BaseUtil, GraphUtil, GraphicUtil, DomUtil, PathUtil, MathUtil, AnimateUtil);
BaseUtil.mix(Util, BaseUtil, GraphUtil, GraphicUtil, DomUtil, PathUtil, MathUtil);
module.exports = Util;