Animation

---

just effects

{0|example: hover, select, ...}

---

functional effects

{0|example: opening animation}

{1|~1200*500}

---

functional effects

{0|example: stream}

{1|~800*500}

---

for transform

---

for transform

{0|example: layout}

---

for transform

{0|example: data zoom}

---

for transform

{0|example: roam}

---

Animation Requirements

• Reduce complexity of programming.
  • robustness
  • development efficiency
• Performance.

---

Animation Module

• main loop, requestAnimationFrame
• frame, interpolation, easing

---

Programming Requirements

• {0|Best practice => pattern}
• {1|Pattern should be simple}

---

~900*200

{0|}

Note: Creating shape each time is an easy way. But, animation requires shape reuse.

---

Programming Pattern: Data Diff

// diff: map by key.
data.diff(oldData)
    .add(function (newIdx) {
        // Create symbol
        ...
        // Store symbol on data.
        data.setItemGraphicEl(newIdx, symbolEl);
    })
    .update(function (newIdx, oldIdx) {
        // Create or update symbol.
        ...
        // Store symbol on data.
        data.setItemGraphicEl(newIdx, symbolEl);
    })
    .remove(function (oldIdx) {
        // Remove symbol.
    })
    .execute();

---

option = {
    animation: true,
    animationDuration: ...,
    animationEasing: ...,
    animationDelay: ...,
    ...,

    xxxx: [{
        animation: true,
        animationDuration: ...,
        animationEasing: ...,
        animationDelay: ...,
        ...
    }, {
        ...
    }]
};

---

itemStyle: {
    normal: {
        color: ...,
        ...
    },
    emphasis: {
        color: ...,
        ...
    }
}

---

Programming Pattern: Unified API

graphic.updateProps(symbolEl, {
    // properties to be updated with or without animation.
    position: point,
    ...
}, seriesModel);

---

Throttle

fn = echarts.throttle(fn);