Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
K-Frame: (Removing animation component does not stop animation from running) EDIT bug has been fixed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Remove K-Frame Animation Test</title>
<script src="aframe-v0.4.0.js"></script>
<script src="aframe-animation-component.js"></script> <!-- use the current component here, not through rawgit -->
</head>
<body>
<a-scene>
<!-- shows how removing a k-frame animation component fails to stop the animation from playing -->
<!-- EDIT bug has been fixed -->
<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"
animation__yoyo="property: position; dir: alternate; dur: 1000; easing: easeInSine; loop: true; to: 0 3 -1">
</a-sphere>
<a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 0 3.8">
<a-camera>
<a-entity cursor="fuse: true; fuseTimeout: 1500"
position="0 0 -1"
scale="0.05 0.05 0.05"
geometry="primitive: ring"
material="color: black; shader: flat">
</a-entity>
</a-camera>
</a-entity>
</a-scene>
<script type="text/javascript">
var sphere = document.querySelector("a-sphere")
var box = document.querySelector("a-box")
var scene = document.querySelector("a-scene");
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener("loaded", run);
}
function run() {
console.log("scene started");
sphere.addEventListener("click", function() {
console.log("sphere clicked");
console.log(this.components.animation__yoyo); // component is attached to the sphere
this.removeAttribute('animation__yoyo');
console.log(this.components.animation__yoyo); // component is removed - animation keeps playing
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.