|
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | 4 | <title>vue.js version</title> |
5 | | - <script src="https://cdn.jsdelivr.net/stats.js/r11/stats.min.js"></script> |
6 | | - <script src="../../dist/vue.js"></script> |
| 5 | + <script src="https://cdn.jsdelivr.net/stats.js/r11/stats.min.js"></script> |
| 6 | + <script src="../../dist/vue.js"></script> |
7 | 7 | <style> |
8 | | -html, body { |
9 | | - height: 100%; |
10 | | - width: 100%; |
11 | | - padding: 0; |
12 | | - margin: 0; |
13 | | -} |
14 | | -svg { |
15 | | - width: 800px; |
16 | | - height: 600px; |
17 | | -} |
| 8 | + html, body { |
| 9 | + height: 100%; |
| 10 | + width: 100%; |
| 11 | + padding: 0; |
| 12 | + margin: 0; |
| 13 | + } |
| 14 | + svg { |
| 15 | + width: 800px; |
| 16 | + height: 600px; |
| 17 | + } |
18 | 18 | </style> |
19 | 19 | </head> |
20 | 20 | <body> |
21 | | - <div id="app"> |
22 | | - <svg> |
23 | | - <circle v-for='point in points' :cx='point.x' :cy='point.y' r='2px' fill='#FC309D'></circle> |
24 | | - </svg> |
25 | | -</div> |
| 21 | + <h1>Animating 1000 SVG dots</h1> |
| 22 | + <div id="app"> |
| 23 | + <p> |
| 24 | + <button @click="toggleOptimization"> |
| 25 | + {{ optimized ? 'disable' : 'enable' }} optimization (Object.freeze) |
| 26 | + </button> |
| 27 | + </p> |
| 28 | + <svg> |
| 29 | + <circle v-for='point in model.points' :cx='point.x' :cy='point.y' r='2px' fill='#FC309D'></circle> |
| 30 | + </svg> |
| 31 | + </div> |
26 | 32 | <script type="text/javascript" charset="utf-8"> |
27 | | -var stats = new Stats(); |
28 | | -stats.setMode(0); // 0: fps, 1: ms, 2: mb |
29 | | - |
30 | | -// align top-left |
31 | | -stats.domElement.style.position = 'absolute'; |
32 | | -stats.domElement.style.left = '0px'; |
33 | | -stats.domElement.style.top = '0px'; |
34 | | - |
35 | | -document.body.appendChild( stats.domElement ); |
| 33 | +var stats = new Stats() |
| 34 | +stats.setMode(0) |
| 35 | +stats.domElement.style.position = 'absolute' |
| 36 | +stats.domElement.style.right = '0px' |
| 37 | +stats.domElement.style.top = '0px' |
| 38 | +document.body.appendChild(stats.domElement) |
36 | 39 |
|
37 | 40 | var WIDTH = 800 |
38 | 41 | var HEIGHT = 600 |
39 | | -var model = createModel(1000); |
40 | 42 |
|
41 | 43 | new Vue({ |
42 | 44 | el: '#app', |
43 | | - data: model, |
| 45 | + data: { |
| 46 | + model: createModel(1000), |
| 47 | + optimized: false |
| 48 | + }, |
44 | 49 | created: function () { |
45 | 50 | var self = this |
46 | | - self.raf = window.requestAnimationFrame(render) |
| 51 | + requestAnimationFrame(render) |
47 | 52 | stats.begin() |
48 | 53 | function render () { |
49 | 54 | stats.end() |
50 | 55 | stats.begin() |
51 | | - self.raf = window.requestAnimationFrame(render) |
52 | | - self.step() |
| 56 | + requestAnimationFrame(render) |
| 57 | + self.model.step() |
| 58 | + if (self.optimized) { |
| 59 | + self.$forceUpdate() |
| 60 | + } |
| 61 | + } |
| 62 | + }, |
| 63 | + methods: { |
| 64 | + toggleOptimization: function () { |
| 65 | + this.model = this.optimized |
| 66 | + ? createModel(1000) |
| 67 | + : Object.freeze(createModel(1000)) |
| 68 | + this.optimized = !this.optimized |
53 | 69 | } |
54 | 70 | } |
55 | 71 | }); |
|
72 | 88 |
|
73 | 89 | function step () { |
74 | 90 | points.forEach(move) |
75 | | - // move(points[0]) |
76 | 91 | } |
77 | 92 |
|
78 | 93 | function move (p) { |
|
0 commit comments