radi
Version:
**Radi** is a tiny javascript framework.
131 lines (117 loc) • 3.26 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Radi.js - SinWave</title>
<style>
.animated-sin-wave {
position: relative;
height: 150px;
width: 100%;
overflow: hidden;
}
.animated-sin-wave>.bar {
position: absolute;
height: 100%;
border-radius: 50%;
max-width: 10px;
transform: scale(0.8, .5) translateY(0%) rotate(0deg)
}
.animated-sin-wave-description {
width: 100%;
text-align: center;
font-size: 0.8em;
color: #747678;
padding: 2em;
}
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="../../dist/radi.js"></script>
<script src="../../src/devTools/index.js"></script>
<script>
const { r, component, list, link, mount } = radi;
const sinWave = component({
name: 'sin-wave',
view: function () {
return r('div',
{ class: 'animated-sin-wave' },
list(l(this.bars), function (bar, i) {
return r('div',
{
class: 'bar',
style: {
width: this.barWidth + '%',
left: (this.barWidth * i) + '%',
transform: l('scale(0.8,.5) translateY(' + bar.translateY + '%) rotate(' + bar.rotation + 'deg)'),
// transform: ll(function() {return 'scale(0.8,.5) translateY(' + bar.translateY + '%) rotate(' + bar.rotation + 'deg)';}, [[bar, 'rotation']], 'bar.rotation'),
// transform: l(this.rotation),
// transform: l(bar.transform),
backgroundColor: l(bar.color)
}
}
);
})
);
},
state: {
barWidth: 1,
barCount: 100,
active: false,
count: 0,
step: 0.5,
translateY: 0,
rotation: 0,
bars: []
},
actions: {
onMount() {
console.log('Mounted');
this.active = true;
this.bars = this.getColors();
this.nextFrame();
},
onDestroy() {
console.log('Destroyed');
this.active = false;
this.bars.splice(0, this.bars.length);
},
getColors() {
var arr = [];
for (var i = 0; i < this.barCount; i++) {
var hue = (360 / this.barCount * i - this.count) % 360;
arr.push({
id: i,
color: 'hsl(' + hue + ',95%,55%)',
translateY: Math.sin(this.count / 10 + i / 5) * 100 * .5,
rotation: (this.count + i) % 360,
});
}
return arr;
},
nextFrame() {
if (this.active) {
this.count += this.step;
this.bars = this.getColors();
window.requestAnimationFrame(() => {
this.nextFrame();
});
}
}
}
});
mount(r('div',
new sinWave(),
// new sinWave(),
// new sinWave(),
), 'app');
</script>
</body>
</html>