设置元素移动同时调整元素角度，添加动画效果后，会失效一个动作

[cb492wq2dz-blip]

<script> import { Graph } from '@antv/g6'; import {nextTick} from "vue"; export default { setup() { let graph = null const state = { x: 0, y: 0, theta: 0 }; const init = () => { graph = new Graph({ container: 'topo-map', width: 800, height: 600, modes: { default: ['drag-node', 'zoom-canvas', 'drag-canvas'], }, node: { type: 'rect', style: { size: [60, 30], radius: 6, labelText: (d) => d.id, labelFill: '#fff', fill: '#1890ff', }, animation: { update:[ { fields: ['iconFill'], // 对 iconFill 属性进行动画 duration: 500, // 动画持续时间为 500 毫秒(半秒) easing: 'ease-in-out' // 缓动函数使动画更平滑 }, { fields: ['transform'], // 对 iconFill 属性进行动画 duration: 800, // 动画持续时间为 500 毫秒(半秒) easing: 'ease-in-out' // 缓动函数使动画更平滑 } ], } }, data: { nodes: [ {id: 'agv1', style: {x: 400, y: 300}}, ], }, }); graph.render(); update() } const update = () => { let step = 0; const interval = setInterval(() => { const deltaX = (Math.random() * 2 - 1) * 2; // Random value between -2 and 2 const deltaY = (Math.random() * 2 - 1) * 2; // Random value between -2 and 2 const deltaTheta = 0.3; // Fixed rotation increment // Update state state.x += deltaX; state.y += deltaY; state.theta += deltaTheta; console.log(state.theta / Math.PI * 180) graph.updateNodeData( [{ id: 'agv1', style: { x: 400 + state.x, y: 300 + state.y, // } : {}), transform: [['rotate', state.theta / Math.PI * 180]], }, }] ) graph.draw() step++; if (step > 50) { clearInterval(interval); } }, 1000) } init() return {} } } </script> <style scoped lang="scss"> /* 左侧面板 */ .left-panel { min-width: 230px; max-width: 230px; height: 100%; background-color: #fff; border-right: 2px solid #e8e8e8; } .expand-button { position: absolute; left: -5px; top: 50%; transform: translateY(-50%); z-index: 1; } .map-button { position: absolute; top: 12px; left: 12px; } :deep(.ant-tree-iconEle) { height: unset !important; vertical-align: middle !important; justify-items: center; } :deep(.ant-tree-node-content-wrapper) { display: flex; align-items: center; } :deep(.ant-tree-title) { flex: 1; } .station-item { .station-item-edit { display: none; } &:hover { .station-item-edit { display: block; } } } </style>

我模拟了一个元素，想要设置同时修改元素的位置以及旋转角度，不过一旦我设置了transform的动画，位移效果就会失效，设置位移效果的动画，旋转效果就会失效，仿佛这两个功能是互斥的

[pratikrath126]

你好！看起来是 transform 动画和位移动画互相覆盖了（都在改 transform），所以一个会把另一个“顶掉”。一般有两种解决思路：

1. 把位移和旋转合并到同一个 transform 动画里（同一次 update 里同时更新 translate + rotate）。
2. 如果可以的话，把旋转放到子元素上，位移放到父元素上，这样 transform 不会互相覆盖。

另外，G6 的 updateNodeData 里用 animation.update 时，如果 fields 里有 transform，最好不要再单独对 x/y 做动画，改成用 transform: [['translate', x, y], ['rotate', angle]] 统一控制。希望能帮到你！