Good day!
I am a total noob on a-frame and I am trying to achieve a simple animation replay every time an event occurs.
I notice that on v0.8.2 with animation component it works with the same code and animations restart as I want, but on the new v0.9.2 this behavior does not happen.
<!--This works as i want!--> <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script><script src="https://unpkg.com/aframe-animation-component#^4.1.2/dist/aframe-animation-component.min.js"></script<a-scene cursor="rayOrigin:mouse"><a-box position="0 2 -2" color="blue" radius="1" foo animation="property: scale; to: 2 2 2; dur: 200; startEvents: mousedown;"></a-box></a-scene>
As you can see in the animation this only works once :(
Edit on request: Here is the project on glitch: https://glitch.com/edit/#!/join/4aaf9ff9-4dd6-4780-bf1f-f75648f2149f
Any insights?
Thank you in advance!
Tried various versions and even fiddled with .emit js component but the behavior is still the same in v0.9.2. Animations wont replay.
I expect to replay the same animation every time an event occurs without using loop and pause controls.
It looks like you are missing a '>'
at the end of this line:
'src="https://unpkg.com/aframe-animation-component#^4.1.2/dist/aframe-animation-component.min.js" /script '
That could break functionality in your script.
Hard to know because you've got all of your code crammed into one line above.
It would be much easier for us to debug if you placed your project code inside of a glitch or fiddle. (glitch.com)
Related
I have an A-Frame scene with three gltf models in it.
I am trying to programmatically trigger animations and I'm not sure what I'm doing wrong. Probably something very obvious, I'll admit. But after hours of researching and fiddling, there must be something very basic that isn't clicking with me.
Be nice - my js isn't exactly beautiful. It's a huge work in progress.
Check out the Glitch Project for more context, but this is probably a problem because I'm using jQuery to store the entity (see below). Right? Is that why? If so, what do I do about it?
function triggerClip(model, clipToPlay, clipDirection) {
model.setAttribute('animation-mixer', {
clip: clipToPlay,
timeScale: clipDirection
});
}
EDIT: After making the changes suggested by Diego, the animations played but I was still getting warnings about timeScale not being recognized. I had to update the version of A-Frame extras to get it working as expected.
jQuery wraps native DOM elements in its own structure. You have to do the following to access it:
model[0].setAttribute('animation-mixer', {
clip: 'step' + clipToPlay,
timeScale: clipDirection
});
I would like to bounce my actor on y-axis for two
Seconds following a button release event.
I don't know how I can do that using Tweener.
Gnome shell 3.4.
Thanks for any help,
I gave up trying that effect. Instead using Tweener (imports.gi.Tweener), I simply set the opacity of the object from 0 to 255 in 'easeQuadEffect'.
GPaste Integration does what you want. Inspecting the code may be informative.
Search for "Tweener" in the gpaste_integration.js file.
Basically I am downloading a zip file and extracting a collada file to load in the browser. This works freaking awesome in chrome but is REALLY slow with model movement from the mouse in Firefox. I cant seem to figure this out or if there's a setting I'm missing to speed up Firefox or what. The file is loaded up here
http://moneybagsnetwork.com/3d/test.htm
Its using jsunzip and three.js to load everything. I've bypassed the jsunzip and that's not the issue. I've also dumbed down the model to not use any event listeners and no lights and that didn't help one bit. Completely stumped here and the model really isn't that big :/
Here is a link to a zip of the files I'm using
http://moneybagsnetwork.com/3d/good.zip
Sorry about the multiple commented lines. I might turn things back on if this gets fixed.
I have noticed that Chrome is usually way faster and more responsive with Three.js applications than Firefox. The difference is not so much on the WebGL side, but at the plain Javascript supporting code.
Looking at your code, it seems you do some very heavy javascript stuff on your onmousemove function. This could very well cause much of the performance gap between the browsers. Mousemove is executed many many times during each and every mousemovement, so it quickly adds up to slow performance. It could also be that Firefox actually creates more mousemove events for similat cursor movements (not sure).
You could either move most of the raycasting and other stuff from mousemove to mouseclick. Alternatively, you could implement a delayed mousemove so that the function is called only maximum of X times per second, or only when the mouse has stopped. Something like this (untested but should work):
var mousemovetimer = null;
function onmousemove(event){
if (mousemovetimer) {
window.clearTimeout(mousemovetimer);
}
mousemovetimer = window.setTimeout(delayedmousemove, 100);
}
function delayedmousemove(event) {
// your original mousemove code here
}
Maybe your graphics card is in our blacklist. There is usually a note about this towards the bottom of about:support.
Cards can be blacklisted for various reasons, missing drivers / features, occasional crashes ... see:
http://www.sitepoint.com/firefox-enable-webgl-blacklisted-graphics-card/
To enable WebGL, set webgl.force-enabled to true.
To enable Layers Acceleration, set layers.acceleration.force-enabled to true
To enable Direct2D in Windows Vista/7, set gfx.direct2d.force-enabled to true
On a couple pages of mine I have a Fancybox lightbox and I have a jQuery Cycle Plugin. Normally it works fine. There are instances when I click the link that creates a lightbox then when I close it the Cycle Plugin transitions and does not come back. It makes a huge gap of space when this happens.
I am not sure what is going on, this does not happen 100% of the time. Its sporadic. I am unsure if this is a one browser issue or multiple browsers as I was able to recreate this in FF5 on two different machinces but have not replicated this in other browsers.
Any Advice?
Thanks - Here is the page: http://www.ubhape2.com/artists/ (note: any artist page has this same header and happens on all of them. The fancybox is any link referencing "Choosers")
Found out an answer to those who have similar issues (this answer came from the Fancybox forums):
After further tests, I figured out what the issue is and it happens when you open and close Fancybox quickly and successively it seems that the animation behind (jQuery cycle) is creating something called "animation queue buildup" (http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup), which happens when interacting with other js scripts that handle animation (Fancybox uses opacity animation in the overlay).
I would say that this is not a fancybox issue and that you should bring the issue to the cycle plugin forum, however (since you are using the lite version), you may want to edit the cycle js file and do the following changes to minimize the impact of the issue (at least it won't disappear from your page):
Replace the line 166:
var fn = function() {$n.animate(opts.animIn, opts.speedIn,
opts.easeIn, cb)};
with this:
var fn = function() {$n.animate(opts.animIn, 1000, opts.easeIn, cb)};
and line 167:
$l.animate(opts.animOut, opts.speedOut, opts.easeOut, function() {
with this:
$l.animate(opts.animOut,{queue:false, duration: opts.speedOut},
opts.easeOut, function() {
I design websites using HTML/CSS and i just recently started using jQuery to add to my designs. i've been stripping code apart from different questions similar to mine but never helpful enough, im not just not experienced enough with the program. I'm basically looking for a way to have 3-images cycle by fading into each other over and over. That's it, it would go like this:
1)website loads/image 1 fadeIn
2)wait 5 seconds
3a)image 1 fadeOut 'fast'
3b)image 2 fadeIn (this is to not show the background between images when they're fading)
4)repeat until last image fadeIn
5)smoothly loop back into image 1
I would totally appreciate the help
Use jquery cycle plugin with fade effect: http://jquery.malsup.com/cycle/browser.html