slides/ani/ani.html (207 lines of code) (raw):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reveal.js</title>
<base target="_blank"/>
<link rel="stylesheet" href="./asset/md2reveal-0.1.7/css/reveal.css">
<link rel="stylesheet" href="./asset/md2reveal-0.1.7/css/theme/black.css" id="theme">
<link rel="stylesheet" href="./asset/md2reveal-0.1.7/css/theme/black-md2reveal.css" id="themeMine">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="./asset/md2reveal-0.1.7/lib/css/zenburn.css">
</head>
<body>
<div class="reveal">
<div class="slides"><section data-markdown><script type="text/template">
### Animation
</script></section><section ><section data-markdown><script type="text/template">
#### just effects
<div class="fragment" data-fragment-index="0">example: hover, select, ...</div>
<div style="min-width: 1050px; text-align: center;">
<div style="display:inline-block;">
<div class="fragment" data-fragment-index="1"><iframe style="width:450px;height:400px;" data-md2r-src="./asset/ec-demo/ani-effect-hover.html"></iframe></div>
</div>
<div style="display:inline-block;">
<div class="fragment" data-fragment-index="2"><iframe style="width:450px;height:400px;" data-md2r-src="./asset/ec-demo/ani-effect-hover.html?animation=false"></iframe></div>
</div>
</div>
</script></section><section data-markdown><script type="text/template">
#### functional effects
<div class="fragment" data-fragment-index="0">example: opening animation</div>
<div class="fragment" data-fragment-index="1"><iframe style="width:1200px;height:500px;" data-md2r-src="./asset/ec-demo/ani-effect-delay.html"></iframe></div>
</script></section><section data-markdown><script type="text/template">
#### functional effects
<div class="fragment" data-fragment-index="0">example: stream</div>
<div class="fragment" data-fragment-index="1"><iframe style="width:800px;height:500px;" data-md2r-src="./asset/ec-demo/fn-effect-lines.html"></iframe></div>
</script></section><section data-markdown><script type="text/template">
#### for transform
<div style="min-width: 1050px; text-align: center;">
<div style="display:inline-block;">
<div class="fragment" data-fragment-index="0"><iframe style="width:450px;height:400px;" data-md2r-src="./asset/ec-demo/transform-timeline.html"></iframe></div>
</div>
<div style="display:inline-block;">
<div class="fragment" data-fragment-index="1"><iframe style="width:450px;height:400px;" data-md2r-src="./asset/ec-demo/transform-timeline.html?animation=false"></iframe></div>
</div>
</div>
</script></section><section data-markdown><script type="text/template">
#### for transform
<div class="fragment" data-fragment-index="0">example: layout</div>
<div style="min-width: 1050px; text-align: center;">
<div style="display:inline-block;">
<div class="fragment" data-fragment-index="0"><iframe style="width:450px;height:400px;" data-md2r-src="./asset/ec-demo/transform-graph.html"></iframe></div>
</div>
<div style="display:inline-block;">
<div class="fragment" data-fragment-index="1"><iframe style="width:450px;height:400px;" data-md2r-src="./asset/ec-demo/transform-graph.html?animation=false"></iframe></div>
</div>
</div>
</script></section><section data-markdown><script type="text/template">
#### for transform
<div class="fragment" data-fragment-index="0">example: data zoom</div>
<div style="min-width: 1050px; text-align: center;">
<div style="display:inline-block;">
<div class="fragment" data-fragment-index="1"><iframe style="width:450px;height:400px;" data-md2r-src="./asset/ec-demo/transform-data-zoom.html"></iframe></div>
</div>
<div style="display:inline-block;">
<div class="fragment" data-fragment-index="2"><iframe style="width:450px;height:400px;" data-md2r-src="./asset/ec-demo/transform-data-zoom.html?animation=false"></iframe></div>
</div>
</div>
</script></section><section data-markdown><script type="text/template">
#### for transform
<div class="fragment" data-fragment-index="0">example: roam</div>
<div style="min-width: 1050px; text-align: center;">
<div style="display:inline-block;">
<div class="fragment" data-fragment-index="1"><iframe style="width:450px;height:400px;" data-md2r-src="./asset/ec-demo/transform-focus-geo.html"></iframe></div>
</div>
<div style="display:inline-block;">
<div class="fragment" data-fragment-index="2"><iframe style="width:450px;height:400px;" data-md2r-src="./asset/ec-demo/transform-focus-geo.html?animation=false"></iframe></div>
</div>
</div>
</script></section></section><section ><section data-markdown><script type="text/template">
Animation Requirements
+ Reduce complexity of programming.
+ robustness
+ development efficiency
+ Performance.
</script></section><section data-markdown><script type="text/template">
Animation Module
+ main loop, requestAnimationFrame
+ frame, interpolation, easing
</script></section><section data-markdown><script type="text/template">
Programming Requirements
+ <div class="fragment" data-fragment-index="0">Best practice => pattern</div>
+ <div class="fragment" data-fragment-index="1">Pattern should be simple</div>
</script></section><section data-markdown><script type="text/template">
<iframe style="width:900px;height:200px;" data-md2r-src="./asset/ec-demo/data-zoom2.html"></iframe>
<div class="fragment" data-fragment-index="0"></div>
<aside class="notes" data-markdown>Creating shape each time is an easy way.
But, animation requires shape reuse.</aside></script></section><section data-markdown><script type="text/template">
Programming Pattern: Data Diff
```js
// 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();
```
</script></section><section data-markdown><script type="text/template">
```js
option = {
animation: true,
animationDuration: ...,
animationEasing: ...,
animationDelay: ...,
...,
xxxx: [{
animation: true,
animationDuration: ...,
animationEasing: ...,
animationDelay: ...,
...
}, {
...
}]
};
```
</script></section><section data-markdown><script type="text/template">
```js
itemStyle: {
normal: {
color: ...,
...
},
emphasis: {
color: ...,
...
}
}
```
</script></section><section data-markdown><script type="text/template">
Programming Pattern: Unified API
```js
graphic.updateProps(symbolEl, {
// properties to be updated with or without animation.
position: point,
...
}, seriesModel);
```
</script></section><section data-markdown><script type="text/template">
Throttle
```js
fn = echarts.throttle(fn);
```
</script></section></section></div>
</div>
<script src="./asset/md2reveal-0.1.7/lib/js/head.min.js"></script>
<script src="./asset/md2reveal-0.1.7/js/reveal.js"></script>
<script src="./asset/md2reveal-0.1.7/js/md2reveal.js"></script>
<script>
function extend() {
var target = {};
for (var i = 0; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (source.hasOwnProperty(key)) {
target[key] = source[key];
}
}
}
return target;
}
// Optional libraries used to extend on reveal.js
var deps = [
{ src: './asset/md2reveal-0.1.7/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: './asset/md2reveal-0.1.7/plugin/markdown/marked.js', condition: function() { return !!document.querySelector('[data-markdown]'); } },
{ src: './asset/md2reveal-0.1.7/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector('[data-markdown]'); } },
{ src: './asset/md2reveal-0.1.7/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: './asset/md2reveal-0.1.7/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
// { src: './asset/md2reveal-0.1.7/plugin/math/math.js', async: true }
];
// default options to init reveal.js
var defaultOptions = {
controls: true,
progress: true,
history: true,
center: true,
transition: 'default',
dependencies: deps
};
// options from URL query string
var queryOptions = Reveal.getQueryHash() || {};
var options = {};
options = extend(defaultOptions, options, queryOptions);
Reveal.initialize(options);
</script>
</body>
</html>