| 1 | <!DOCTYPE html>
|
| 2 | <html lang="en">
|
| 3 |
|
| 4 | <head>
|
| 5 | <meta charset="UTF-8">
|
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 7 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 8 | <title>Radi.js - SinWave</title>
|
| 9 | <style>
|
| 10 | .animated-sin-wave {
|
| 11 | position: relative;
|
| 12 | height: 150px;
|
| 13 | width: 100%;
|
| 14 | overflow: hidden;
|
| 15 | }
|
| 16 |
|
| 17 | .animated-sin-wave>.bar {
|
| 18 | position: absolute;
|
| 19 | height: 100%;
|
| 20 | border-radius: 50%;
|
| 21 | max-width: 10px;
|
| 22 | transform: scale(0.8, .5) translateY(0%) rotate(0deg)
|
| 23 | }
|
| 24 |
|
| 25 | .animated-sin-wave-description {
|
| 26 | width: 100%;
|
| 27 | text-align: center;
|
| 28 | font-size: 0.8em;
|
| 29 | color: #747678;
|
| 30 | padding: 2em;
|
| 31 | }
|
| 32 |
|
| 33 | body {
|
| 34 | margin: 0;
|
| 35 | padding: 0;
|
| 36 | }
|
| 37 | </style>
|
| 38 | </head>
|
| 39 |
|
| 40 | <body>
|
| 41 | <div id="app"></div>
|
| 42 | <script src="../../dist/radi.js"></script>
|
| 43 | <script src="../../src/devTools/index.js"></script>
|
| 44 | <script>
|
| 45 | const { r, component, list, link, mount } = radi;
|
| 46 |
|
| 47 | const sinWave = component({
|
| 48 | name: 'sin-wave',
|
| 49 | view: function () {
|
| 50 | return r('div',
|
| 51 | { class: 'animated-sin-wave' },
|
| 52 | list(l(this.bars), function (bar, i) {
|
| 53 | return r('div',
|
| 54 | {
|
| 55 | class: 'bar',
|
| 56 | style: {
|
| 57 | width: this.barWidth + '%',
|
| 58 | left: (this.barWidth * i) + '%',
|
| 59 | transform: l('scale(0.8,.5) translateY(' + bar.translateY + '%) rotate(' + bar.rotation + 'deg)'),
|
| 60 |
|
| 61 |
|
| 62 |
|
| 63 | backgroundColor: l(bar.color)
|
| 64 | }
|
| 65 | }
|
| 66 | );
|
| 67 | })
|
| 68 | );
|
| 69 | },
|
| 70 | state: {
|
| 71 | barWidth: 1,
|
| 72 | barCount: 100,
|
| 73 | active: false,
|
| 74 | count: 0,
|
| 75 | step: 0.5,
|
| 76 | translateY: 0,
|
| 77 | rotation: 0,
|
| 78 | bars: []
|
| 79 | },
|
| 80 | actions: {
|
| 81 | onMount() {
|
| 82 | console.log('Mounted');
|
| 83 |
|
| 84 | this.active = true;
|
| 85 | this.bars = this.getColors();
|
| 86 |
|
| 87 | this.nextFrame();
|
| 88 | },
|
| 89 | onDestroy() {
|
| 90 | console.log('Destroyed');
|
| 91 |
|
| 92 | this.active = false;
|
| 93 | this.bars.splice(0, this.bars.length);
|
| 94 | },
|
| 95 | getColors() {
|
| 96 | var arr = [];
|
| 97 | for (var i = 0; i < this.barCount; i++) {
|
| 98 | var hue = (360 / this.barCount * i - this.count) % 360;
|
| 99 | arr.push({
|
| 100 | id: i,
|
| 101 | color: 'hsl(' + hue + ',95%,55%)',
|
| 102 | translateY: Math.sin(this.count / 10 + i / 5) * 100 * .5,
|
| 103 | rotation: (this.count + i) % 360,
|
| 104 | });
|
| 105 | }
|
| 106 | return arr;
|
| 107 | },
|
| 108 | nextFrame() {
|
| 109 | if (this.active) {
|
| 110 | this.count += this.step;
|
| 111 |
|
| 112 | this.bars = this.getColors();
|
| 113 |
|
| 114 | window.requestAnimationFrame(() => {
|
| 115 | this.nextFrame();
|
| 116 | });
|
| 117 | }
|
| 118 | }
|
| 119 | }
|
| 120 | });
|
| 121 |
|
| 122 | mount(r('div',
|
| 123 | new sinWave(),
|
| 124 |
|
| 125 |
|
| 126 | ), 'app');
|
| 127 | </script>
|
| 128 | </body>
|
| 129 |
|
| 130 | </html>
|