antvis / antvis/G2

waveIn 动画支持更新图形

Open
#4,852 0 comments 0 reactions 1 assignee Claimed by @pearmini View on GitHub
v5
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

目前使用 waveIn 动画更新数据的时候,还是从 0 度旋转到最终的角度,期望能从起始角度开始。

![animation-wave-in](https://user-images.githubusercontent.com/49330279/228494039-bc07d159-f406-44ab-a362-9f9e5b3cb170.gif)

```js
import { Chart } from '@antv/g2';

const chart = new Chart({
theme: 'classic',
container: 'container',
width: 200,
height: 200,
});

chart
.interval()
.coordinate({ type: 'radial', innerRadius: 0.7, outerRadius: 0.95 })
.data([{ name: 'CPU', percent: 27, color: 'rgba(90, 132, 226, 1)' }])
.encode('x', 'name')
.encode('y', 'percent')
.encode('color', 'color')
.encode('key', 'name')
.encode('size', 100)
.scale('y', { domainMax: 100 })
.scale('color', { type: 'identity' })
.tooltip({ name: '已使用', channel: 'y' })
.axis(false)
.style('radius', 26)
.style('shadowColor', 'color')
.style('shadowBlur', 10)
.style('shadowOffsetX', -1)
.style('shadowOffsetY', -1)
.animate('enter', { type: 'waveIn', duration: 1000 })
.animate('update', { type: 'waveIn' });

chart.render().then(() => {
chart.changeData([
{ name: 'CPU', percent: 40, color: 'rgba(90, 132, 226, 1)' },
]);
});
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.