GitBucket
Newer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animation of Color</title>
<meta name="description" content="Animation of Color - A-Frame">
<script src="../../../dist/aframe-master.js"></script>
</head>
<script>
AFRAME.registerComponent('pulse', {
play: function () {
var boxEls = document.querySelectorAll('[mixin~="box"]');
pulse();
function pulse () {
var index;
var loop;
requestAnimationFrame(pulse);
index = 0;
loop = setInterval(function loopPulse () {
boxEls[index].emit('pulse')
boxEls[boxEls.length - 1 - index].emit('pulse')
index++;
if (index >= boxEls.length / 2) { clearInterval(loop); }
}, 100);
}
}
});
</script>
<body>
<a-scene pulse stats>
<a-assets>
<a-mixin id="box" geometry="primitive: box; depth: 0.5; height: 1; width: 0.5" material="color: #2D4659">
<a-mixin id="pulse" animation="property: components.material.material.color; type: color; from: #FDFBDA; to: #2D4659; dur: 1000; startEvents: pulse"></a-mixin>
</a-assets>
<a-sky color="#EFF2DD" animation="property: components.material.material.color; type: color; dur: 10000; dir: alternate; from: #afafaf; to: #352D4D"></a-sky>
<a-entity position="4.5 1 -7" mixin="box pulse"></a-entity>
<a-entity position="4 1 -7" mixin="box pulse"></a-entity>
<a-entity position="3.5 1 -7" mixin="box pulse"></a-entity>
<a-entity position="3 1 -7" mixin="box pulse"></a-entity>
<a-entity position="2.5 1 -7" mixin="box pulse"></a-entity>
<a-entity position="2 1 -7" mixin="box pulse"></a-entity>
<a-entity position="1.5 1 -7" mixin="box pulse"></a-entity>
<a-entity position="1 1 -7" mixin="box pulse"></a-entity>
<a-entity position="0.5 1 -7" mixin="box pulse"></a-entity>
<a-entity position="0 1 -7" mixin="box pulse"></a-entity>
<a-entity position="-0.5 1 -7" mixin="box pulse"></a-entity>
<a-entity position="-1 1 -7" mixin="box pulse"></a-entity>
<a-entity position="-1.5 1 -7" mixin="box pulse"></a-entity>
<a-entity position="-2 1 -7" mixin="box pulse"></a-entity>
<a-entity position="-2.5 1 -7" mixin="box pulse"></a-entity>
<a-entity position="-3 1 -7" mixin="box pulse"></a-entity>
<a-entity position="-3.5 1 -7" mixin="box pulse"></a-entity>
<a-entity position="-4 1 -7" mixin="box pulse"></a-entity>
<a-entity position="-4.5 1 -7" mixin="box pulse"></a-entity>
<a-entity position="4.5 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="4 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="3.5 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="3 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="2.5 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="2 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="1.5 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="1 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="0.5 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="0 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="-0.5 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="-1 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="-1.5 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="-2 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="-2.5 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="-3 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="-3.5 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="-4 1 -7.5" mixin="box pulse"></a-entity>
<a-entity position="-4.5 1 -7.5" mixin="box pulse"></a-entity>
<a-plane rotation="-90 0 0" width="40" height="40" color="#A7BCB9"></a-plane>
</a-scene>
</body>
</html>