Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add initial property to animation callbacks #8926

Merged
merged 1 commit into from Apr 17, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 9 additions & 6 deletions docs/configuration/animations.md
Expand Up @@ -252,14 +252,17 @@ The callback is passed the following object:

```javascript
{
// Chart object
chart: Chart,
// Chart object
chart: Chart,

// Number of animations still in progress
currentStep: number,
// Number of animations still in progress
currentStep: number,

// Total number of animations at the start of current animation
numSteps: number,
// `true` for the initial animation of the chart
initial: boolean,

// Total number of animations at the start of current animation
numSteps: number,
}
```

Expand Down
2 changes: 2 additions & 0 deletions docs/samples/.eslintrc.yml
@@ -0,0 +1,2 @@
rules:
no-console: "off"
24 changes: 20 additions & 4 deletions docs/samples/advanced/progress-bar.md
@@ -1,5 +1,11 @@
# Animation Progress Bar

## Initial animation

<progress id="initialProgress" max="1" value="0" style="width: 100%"></progress>

## Other animations

<progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>

```js chart-editor
Expand Down Expand Up @@ -67,6 +73,7 @@ const actions = [
// </block:actions>

// <block:setup:1>
const initProgress = document.getElementById('initialProgress');
const progress = document.getElementById('animationProgress');

const DATA_COUNT = 7;
Expand Down Expand Up @@ -99,11 +106,19 @@ const config = {
options: {
animation: {
duration: 2000,
onProgress: function(animation) {
progress.value = animation.currentStep / animation.numSteps;
onProgress: function(context) {
if (context.initial) {
initProgress.value = context.currentStep / context.numSteps;
} else {
progress.value = context.currentStep / context.numSteps;
}
},
onComplete: function() {
//
onComplete: function(context) {
if (context.initial) {
console.log('Initial animation finished');
} else {
console.log('animation finished');
}
}
},
interaction: {
Expand All @@ -124,5 +139,6 @@ const config = {
module.exports = {
actions: actions,
config: config,
output: 'console.log output is displayed here'
};
```
3 changes: 3 additions & 0 deletions src/core/core.animator.js
Expand Up @@ -26,6 +26,7 @@ export class Animator {

callbacks.forEach(fn => fn({
chart,
initial: anims.initial,
numSteps,
currentStep: Math.min(date - anims.start, numSteps)
}));
Expand Down Expand Up @@ -95,6 +96,7 @@ export class Animator {
if (!items.length) {
anims.running = false;
me._notify(chart, anims, date, 'complete');
anims.initial = false;
}

remaining += items.length;
Expand All @@ -116,6 +118,7 @@ export class Animator {
if (!anims) {
anims = {
running: false,
initial: true,
items: [],
listeners: {
complete: [],
Expand Down