自定义节点,执行path路径动画; #5870

cjcj5438 posted onGitHub

Describe the bug / 问题描述

registerNode 中怎么配置动画

Reproduction link / 重现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

代码一

G6.registerNode('car-circle', {
    afterDraw(cfg, group) {
        const avatar = group?.addShape('image', {
            attrs: {
                id:cfg.id,
                x: 15,
                y:15,
                width: 30,
                height: 30,
                img: cfg.img,
                clipCfg: {
                    show: true,
                    type: 'circle',
                    r: 15
                }
            },
            name: 'avatar'
        });

        avatar?.animate({
               // path:"M 460 195 L 494 314"
            },
            3000,
            'easeLinear',
            // 动画结束后的回调
            (data:any)=>{
                console.log('动画结束',data)
            },
            100
        );
    },
    update:undefined
}, 'circle');

代码二

....code.....

  useMount(() => {
    if (!graphRef.current && flowRef.current) {

    graphRef.current = new G6.Graph({
        renderer: 'svg',
     ....othercode...
      })

      const node1 = graphRef.current.addItem('node', {
        id: 'car-00200',
        x: 0,
        y: 0,
        type: 'car-circle',
        img:'01.png'
      })
    }
  })
....othercode....

希望node1 节点通过path轨迹运动 ;  我看源码中 有animate重载写法.  请问toAttrs 这个应该怎么弄??  
  /**
         * 执行动画   源码的里面的类型声明
         * @param {ElementAttrs} toAttrs 动画最终状态
         * @param {number}       duration 动画执行时间
         * @param {string}       easing 动画缓动效果
         * @param {function}     callback 动画执行后的回调
         * @param {number}       delay 动画延迟时间
         */
animate(toAttrs: ElementAttrs, duration: number, easing?: string, callback?: Function, delay?: number);

G6 Version / G6 版本

4.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

No response

这个只能通过改变group的matrix来实现的 const group = item.getContainer(); group.animate( { matrix: [ 1, 0, 0, 0, 1, 0, 180, 30, 1 ] }, { duration: 1000, }, ); }

posted by zmcode 10 months ago

image.animate(
  (ratio) => {
    每一帧的操作，入参 ratio：这一帧的比例值（Number）返回值：这一帧需要变化的参数集（Object）
    const toMatrix = Util.transform(
      [1, 0, 0, 0, 1, 0, 0, 0, 1],// 当前矩阵
      [['t', 0, 0], // 平移到左上角]
    );
    return {
      matrix: toMatrix,
    };
  },
  {
    repeat: true,
    duration: 3000,
    easing: 'easeCubic',
  },
);
g6的transform本质上也是转化成矩阵形式：
matrix = transform(matrix, [
      ['t', minX, minY], // 平移到左上角
      ['s', ratio, ratio], // 缩放到正好撑着 minimap
      ['t', dx, dy], // 移动到画布中心
    ]);
t代表translate平移
s代表scale缩放
r代表rotate旋转

源码中的transform
/**
 * 根据 actions 来做 transform
 * @param m
 * @param actions
 */
export function transform(m: number[], actions: any[][]) {
  const matrix = m ? [].concat(m) : [1, 0, 0, 0, 1, 0, 0, 0, 1];


  for (let i = 0, len = actions.length; i < len; i++) {
    const action = actions[i];
    switch (action[0]) {
      case 't':
        leftTranslate(matrix, matrix, [action[1], action[2]]);
        break;
      case 's':
        leftScale(matrix, matrix, [action[1], action[2]]);
        break;
      case 'r':
        leftRotate(matrix, matrix, action[1]);
        break;
      case 'm':
        leftMultiply(matrix, matrix, action[1]);
        break;
      default:
        break;
    }
  }


  return matrix;
}
如s代表的缩放：
export function fromScaling(out, v) {
  out[0] = v[0];
  out[1] = 0;
  out[2] = 0;


  out[3] = 0;
  out[4] = v[1];
  out[5] = 0;


  out[6] = 0;
  out[7] = 0;
  out[8] = 1;
  return out;
}

posted by longsfreedom 10 months ago

这是来自QQ邮箱的假期自动回复邮件。

你好，我最近正在休假中，无法亲自回复你的邮件。我将在假期结束后，尽快给你回复。

posted by zmcode 10 months ago

Fund this Issue

$0.00

Funded

Only logged in users can fund an issue

Pull requests

Do you want to work on this issue?

自定义节点,执行path路径动画; #5870

Describe the bug / 问题描述

Reproduction link / 重现链接

Steps to Reproduce the Bug or Issue / 重现步骤

G6 Version / G6 版本

Operating System / 操作系统

Browser / 浏览器

Additional context / 补充说明

Company

Community

Support

Connect