When I create an element of a-animation,I want to know the exact time when the animation finished.I know the "dur" or "begin" can calculate the approximate time,but is there any callback function when I use the a-animation element!
You can listen to the animationend event on the a-animation element. Like so:
sphereAnimation.addEventListener('animationend', function () {
sphere.setAttribute('color', '#88ff99');
});
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<a-scene>
<a-plane color="#EFED5E" rotation="45 0 0" scale="3 3 3" position="0 0 -3"></a-plane>
<a-sphere id="sphere" color="#EF2D5E" position="0 0 -3">
<a-animation
id="sphereAnimation"
attribute="position"
to="0 2 -3"
direction="alternate"
repeat="3"
easing="ease-in-out">
</a-animation>
</a-sphere>
</a-scene>
The 'a-animation' tag is depricated in favour of animation="". You need to attach the event handler for the animationcomplete event to the object which is being animated. Here's what worked for me.
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
function sphereEventListener(){
aSphere.addEventListener('animationcomplete', function(){
console.log("Do something interesting here...");
});
};
</script>
</head>
<body onload="sphereEventListener()">
<a-scene>
<a-sphere
animation="dur: 1000; property: position; to: 5 0 -10"
id="aSphere"
position="-5 0 -10"
>
</a-sphere>
<a-sky color="black"></a-sky>
</a-scene>
</body>
Related
I want to know if I can make one object, like a box or sphere, do 2 animations, as in rotation and color.
I know you can set these in the property section of the animation attribute, but if I try to put multiple animation attributes on one object, or if I try to put 2 properties in 1 animation attribute, it either doesn't animate, or only does one of the animations.
Here is the code I'm using, I would appreciate if any of you could edit it to make it work, if this is possible:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="lightblue"></a-sky>
<a-box position="0 0 -5" width="2" depth="2" height="2" color= rgb(0,0,0)
animation="
property: rotation;
from: 0 0 0;
to: -360 -360 -360;
loop: true;
dur: 3000;
dir: alternate;
property: color;
from: rgb(0,0,0);
to: rgb(255,255,255);
loop: true;
dur: 3000;
dir: alternate;"></a-box>
</a-scene>
</body>
</html>
You need to split the animation instructions into separate animation components, which should look like this:
animation__<id>="stuff"
// like this:
animation__first="single animation related stuff"
animation__second="another single animation related stuff"
your code should look a bit more like this:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-sky color="lightblue"></a-sky>
<a-box position="0 0 -5" width="2" depth="2" height="2" color=rgb(0,0,0)
animation__rotation="
property: rotation;
from: 0 0 0;
to: -360 -360 -360;
loop: true;
dur: 3000;
dir: alternate;"
animation__color="
property: color;
from: rgb(0,0,0);
to: rgb(255,255,255);
loop: true;
dur: 3000;
dir: alternate;"></a-box>
</a-scene>
Based on this How do I rotate a box in A-Frame by moving or dragging the mouse?
how i can do it with a 3d model? i need rotate a 3d model/object in a view
i have tried this code, but doesn't works
<html>
<head>
<title>Rotation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
</head>
<body>
<script type="text/javascript">
AFRAME.registerComponent('drag-rotate-component',{
schema : { speed : {default:1}},
init : function(){
this.ifMouseDown = false;
this.x_cord = 0;
this.y_cord = 0;
document.addEventListener('mousedown',this.OnDocumentMouseDown.bind(this));
document.addEventListener('mouseup',this.OnDocumentMouseUp.bind(this));
document.addEventListener('mousemove',this.OnDocumentMouseMove.bind(this));
},
OnDocumentMouseDown : function(event){
this.ifMouseDown = true;
this.x_cord = event.clientX;
this.y_cord = event.clientY;
},
OnDocumentMouseUp : function(){
this.ifMouseDown = false;
},
OnDocumentMouseMove : function(event)
{
if(this.ifMouseDown)
{
var temp_x = event.clientX-this.x_cord;
var temp_y = event.clientY-this.y_cord;
if(Math.abs(temp_y)<Math.abs(temp_x))
{
this.el.object3D.rotateY(temp_x*this.data.speed/1000);
}
else
{
this.el.object3D.rotateX(temp_y*this.data.speed/1000);
}
this.x_cord = event.clientX;
this.y_cord = event.clientY;
}
}
});
</script>
<a-scene>
<a-assets>
<a-asset-item id="man" src="./assets/models/man/man.dae"></a-asset-item>
</a-assets>
<a-collada-model src="#man" rotation="0 45 0"></a-model>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 -0.5 1">
<a-camera look-controls="enabled:false"></a-camera>
</a-entity>
</a-scene>
</body>
</html>
Thanks in advance!
Also have tried this, but not luck
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title - Demo 3D Model</title>
<meta name="description" content="Inlabs demo - 3D Model">
<script src="../../../dist/aframe-master.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="man" src="./assets/models/man/man.dae"></a-asset-item>
</a-assets>
<a-collada-model src="#man" rotation="0 45 0"></a-model>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 -0.5 1">
<a-camera drag-rotate-component look-controls="enabled:false"></a-camera>
</a-entity>
</a-scene>
</body>
</html>
Attach the drag-rotate-component to the model not the camera.
<a-collada-model drag-rotate-component>
Also, you don't need to add -component to the component name.
EDIT: sorry, my bad, this is not correct as it doesn't answer the question.
I think you simply forgot to append the name of the component drag-rotate-component as an attribute to the camera entity. See this pen.
<a-camera drag-rotate-component look-controls="enabled:false"></a-camera>
I'm getting started with A-Frame and this is a very basic question. I checked a number of examples to draw a line and then a curve in A-Frame but they don't show up in the scene. I have a plane there that shows up correctly.
I can use document.querySelector('a-plane').object3D; to get the plane but document.querySelector('a-curve').object3D; returns undefined.
Here is a code sample:
<!DOCTYPE html>
<html>
<head>
<title>A-frame room</title>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"> </a-plane>
<a-sky color="#ffffff"></a-sky>
<a-curve type="CatmullRom" curve="closed:true" visible="true">
<a-curve-point id="checkpoint1" position="0 0 -4" visible="true"></a-curve-point>
<a-curve-point id="checkpoint2" position="0 10 -4" visible="true"></a-curve-point>
<a-curve-point id="checkpoint3" position="0 10 -8" visible="true"></a-curve-point>
<a-curve-point id="checkpoint4" position="0 0 -8" visible="true"></a-curve-point>
</a-curve>
</a-scene>
</body>
</html>
You need to import the JS component that provides <a-curve>. It's a community component.
https://www.npmjs.com/package/aframe-curve-component
How can I change the view area for a graph.
I have this example below se code an image
The left axes goes from 0 to 10 because there is data from 0 to 10 , but I still would like to show only 4 to 9, almost like its zoomed.
Is it possible ?
<title>Graf TEST </title>
</head>
<script src="http://127.0.0.1/charts/js/teechart.js" type="text/javascript"> </script>
<script src="http://127.0.0.1/charts/js/teechart-extras.js" type="text/javascript"></script>
<script language="JavaScript">
function draw() {
var Chart1=new Tee.Chart("canvas");
Chart1.title.text="test";
Chart1.applyTheme("minimal");
Chart1.palette.colors[0] ="green";
Chart1.addSeries(new Tee.Line([]) );
var Series1 = Chart1.series.items[0];
Series1.marks.style="value";
Series1.marks.visible=true;
Series1.colorEach="no";
Series1.format.stroke.size=3;
Series1.pointer.visible=true;
Series1.data.values[0]=6;
Series1.data.labels[0] ="Okt";
Series1.data.values[1]=9;
Series1.data.labels[1] ="Nov";
Series1.data.values[2]=10;
Series1.data.labels[2] ="Dec";
Series1.data.values[3]=0;
Series1.data.labels[3] ="Jan";
Chart1.draw();Chart1.toImage("img");canvas.style.display="none";
}
</script>
<p>
<BODY onload="draw()">
<img id="img"><canvas id="canvas" width="800" height="400"></canvas>
</html>
You should do that manually setting axis minimum and maximum values, for example:
Chart1.axes.left.setMinMax(4,9);
Does anyone know how to modify jquery tools tooltip:
http://flowplayer.org/tools/tooltip.html
to use event special hover:
http://blog.threedubmedia.com/2008/08/eventspecialhover.html
jQuery tools tooltip doesn't rely on hover method, so just loading the plugin is insufficient.
Source for event hover:
http://threedubmedia.googlecode.com/files/jquery.event.hover-1.0.js
Here's the source for jquery tools tooltip:
http://flowplayer.org/js/tools/tools.tooltip-1.1.1.js
I've been trying to get this to work for a while. Thanks in advance.
#Jourkey, What I understood from question is that you want to show the tooltip only when HOVER event is reported by jquery.event.hover plugin. If this is the case then after lot of trial and error I got it like this:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.event.hover-1.0.js"></script>
<script type="text/javascript" src="tools.tooltip-1.1.1.js"></script>
<style type="text/css">
div.hovering{background-color:yellow;}
div.normal{background-color:white;}
#demotip { display:none; background:transparent url(tooltip/white.png);
font-size:12px; height:60px; width:160px; padding:25px; color:#0505ff;}
</style>
<div id="rect" style="height:200px;width:200px;border:2px blue groove;"
class="normal" title='This is testing tooltip'></div>
<div id="demotip"> </div>
<span id="btnShow" style="border:1px solid black;">click</span>
<span id="btnClose" style="border:1px solid black;">close</span>
JavaScript:
<script type="text/javascript">
var api; //TO TAKE CARE OF TOOLTIP OBJECT
var hovering=false; //TO TRACK IF HOVERING STARTED BY HOVER PLUGIN OR NOT
$(document).ready(function(){
$.tools.tooltip.conf.position=["center","right"];
$.tools.tooltip.conf.api=true;
$.tools.tooltip.conf.effect='fade';
$.tools.tooltip.conf.onBeforeShow = function(a){
return hovering;};
$.tools.tooltip.conf.onBeforeHide = function(a){
return !hoveRing;};
var api = $("#rect[title]").tooltip("#demotip");//CREATE TOOLTIP
$("#btnShow").click(function(){
hovering=true;
api.show();});
$("#btnClose").click(function(){
hovering=false;
api.hide();});
$.event.special.hover.delay = 500;//REPORT HOVER AFTER DELAY OF 500MS
$("#rect").hover(function(){},//HOVER START (BEFORE HOVERING)
function(){
hovering=true;
api.show();}, //HOVERING
function(){
hovering=false;
api.hide();}//HOVER END
);
});
</script>