fix: fadeIn aniamtion

demos/test.html

@@ -49,56 +49,238 @@
     }
   </style>
   <script>
-    G6.Global.updateDuration = 3000;
+      const { forceSimulation, forceManyBody, forceCollide } = d3;
-    const data = {
+      const Util = G6.Util;
-      nodes: [{
+      class ParticleTransport {
-        id: 'node1',
+        constructor(options) {
-        x: 100,
+          this.options = {
-        y: 200
+            getGravitys(graph) {
-      }, {
+              const colors = [ '#FD8C3D', '#D83F43', '#F7BED6', '#E487C7', '#46A848', '#D83F43', '#3B85BA', '#48335B', '#B7CDE9' ]; // 重力点附上颜色
-        id: 'node2',
+              const width = graph.getWidth();
-        x: 200,
+              const height = graph.getHeight();
-        y: 200
+              const padding = 70;
-      }],
+              const center = [
-      edges: [{
+                width / 2,
-        target: 'node2',
+                height / 2
-        source: 'node1'
+              ];
-      }]
+              const gravityCount = 8;
-    };
+              const angleStep = Math.PI * 2 / gravityCount;
-    const graph = new G6.Graph({
+              const radius = Math.min(width, height) / 2 - padding;
-      container: 'mountNode',
+              const initialv = [ 0, -radius ];
-      height: window.innerHeight, // 画布高
+              const gravitys = [ initialv ];
-      animate: true
+              for (let index = 1; index < gravityCount; index++) {
-    });
+                const v = Util.vec2.rotate([], initialv, [ 0, 0 ], angleStep * index);
-    graph.node({
+                gravitys.push(v);
-      size: 16
+              }
-    });
+              gravitys.forEach((gravity, index) => {
-    graph.read(data);
+                gravity[0] = center[0] + gravity[0];
-    setTimeout(()=>{
+                gravity[1] = center[1] + gravity[1];
-      graph.update('node2', {
+                gravity[2] = colors[index];
-        x: 300
+              });
-      })
+              return gravitys;
-    }, 1000);
+            },
-    setTimeout(()=>{
+            ...options
-      graph.preventAnimate(()=>{
+          };
-        graph.update('node2', {
+          this.init();
-          x: 300
+        }
-        })
+        initGraph() {
-      });
+          const graph = new G6.Graph({
-      graph.update('node2', {
+            container: 'mountNode',
-        x: 400
+            height: window.innerHeight, // 画布高
-      })
+            animate: {
-    }, 2000);
+              update({ element, endKeyFrame }) {
-    setTimeout(()=>{
+                const { props } = endKeyFrame;
-      graph.preventAnimate(()=>{
+                element.animate({
-        graph.update('node2', {
+                  matrix: props.matrix,
-          x: 400
+                  ...props.attrs
-        })
+                }, 3000, 'easeQuadOut');
-      });
+              },
-      graph.update('node2', {
+              show: 'fadeIn',
-        x: 500
+              hide: 'fadeOut'
-      })
+            }
-    }, 3000);
+          });
+          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
+            }
+          });
+          setTimeout(()=>{
+            graph.hide('title');
+          }, time);
+          time += showStep;
+          setTimeout(()=>{
+            graph.preventAnimate(()=>{
+              graph.update('title', {
+                label: {
+                  text: '2018.11.22 14:00 ~ 16:00',
+                  fontSize: 18
+                },
+              });
+            });
+            graph.show('title');
+          }, time);
+          time += hideStep;
+          setTimeout(()=>{
+            graph.hide('title');
+          }, time);
+          time += showStep;
+          setTimeout(()=>{
+            graph.preventAnimate(()=>{
+              graph.update('title', {
+                label: {
+                  text: '黄龙万科中心 I 座 3-15',
+                  fontSize: 18
+                },
+              });
+            });
+            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>

src/animation/index.js

@@ -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,35 +64,47 @@ 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) {
-  if (element.isShape) {
+  group.deepEach(element => {
-    const fillOpacity = element.attr('fillOpacity');
+    if (element.isShape) {
-    const strokeOpacity = element.attr('strokeOpacity');
+      const fillOpacity = element.attr('fillOpacity');
-    element.attr({
+      const strokeOpacity = element.attr('strokeOpacity');
-      fillOpacity: 0,
+      element.attr({
-      strokeOpacity: 0
+        fillOpacity: 0,
-    });
+        strokeOpacity: 0
-    element.animate({
+      });
-      fillOpacity,
+      element.animate({
-      strokeOpacity
+        fillOpacity,
-    }, Global.enterDuration, Global.enterEasing, 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) {
-  if (element.isShape) {
+  group.deepEach(element => {
-    element.animate({
+    const fillOpacity = element.attr('fillOpacity');
-      fillOpacity: 0,
+    const strokeOpacity = element.attr('strokeOpacity');
-      strokeOpacity: 0
+    if (element.isShape) {
-    }, Global.leaveDuration, Global.leaveEasing, callback);
+      element.animate({
-  }
+        fillOpacity: 0,
+        strokeOpacity: 0
+      }, 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);
   }
 };