using cgscenegraph, how can i have a callback function on animation - javascript

I made an animation, and i want to add a callback function at the end of the animation loop.
Do you know how I can do that ?
Thx.

Glad to read you found your solution :)
You can find a complete example on the cgscenegraph website:
http://gwennaelbuchet.github.com/cgSceneGraph/examples/03_Animation/animation_01_SRT/index.html
There are other examples related to animation also: http://gwennaelbuchet.github.com/cgSceneGraph/examples.html
What you have to understand with the animation engine is that a timeline is generated for each couple node+property you want to animate. And it is this timeline that provides events related to the animation.
Here is an example to get the onAnimationEnd of a timeline:
this.sceneGraph.getTimeline(myNode, "rotation.angle").onAnimationEnd = function (event) {
console.log("animation ended");
};
To get onAnimationStart or onAnimate events, it's exactly the same :)
Hope this can help.

okay i found what i want,
there is a property named "onAnimationEnd" into the CGSGTimeline class that is fired at the end of the animation, so i've got my callback function ;)
for information, there are other callback functions like "onAnimate" & "onAnimationStart" in the cgSceneGraph framework.
link to http://gwennaelbuchet.github.com/cgSceneGraph/api.html
best regards.

Related

How to implement client-side javascript (jquery .animate) in Volt?

I'm having trouble grasping how to deal with front end events in volt, and hopefully this specific question could help enlighten me.
I implemented the simple chat program from the webcast and wanted to build on it. Specifically I want the chat window to stay scrolled to the bottom as the chat window is populated. I think the key is the jquery .animate({ scrollTop:...}) method, but I don't understand how to implement that in volt. Could someone enlighten me?
My first attempt is the "scroll_bottom" method in the controller
https://github.com/mmattthomas/chat/blob/master/app/main/controllers/main_controller.rb#L30-L36
def scroll_bottom
`
var newscrollHeight = $('.panel-body').attr('scrollHeight') - 20;
//alert('newscrollHeight:' + newscrollHeight);
$('.panel-body').animate({ scrollTop: newscrollHeight }, 'normal');
`
end
The javascript runs, but the variable returns NaN.
View is here:
https://github.com/mmattthomas/chat/blob/master/app/main/views/main/index.html
Even this specific example doesn't solve the whole problem (what if someone else adds to the chat, what event can animate the chat window to the bottom?) - so how best to implement this client-side action with volt?
Well, one good thing to know about Volt is that it uses OpalRb for client-side workings. To run something like jQuery in Volt, I think it would be easiest to use an Opal wrapper, which allow access of libraries like jQuery with Ruby.
Using the opal-jquery wrapper, I would implement a jQuery animation like so:
panel_body = Element.find(".panel-body")
panel_body.animate({ scrollTop: panel_body.children.height }, speed: "normal")
EDIT:
Here is a fork of your project where I have implemented a fix for this issue that you can check out.

Call jQuery from inside Flash Canvas

I'm trying to call for a jQuery function when my Flash Canvas animation ends. I can't seem to figure out what code I need to add on that last keyframe in order to do that. I found something like this but it's not working:
this.stop();
ExternalInterface.call("javascript:start_website();");
Thanks in advance!
I managed to find a solution from browsing a few other websites. Basically at the end of my animation on the very last keyframe I added this bit of code:
this.animation_tracker = function() {
start_website();
return false; // prevent the function from being run over and over again
}
exportRoot.animation_tracker();
And within my website I created a jQuery function called start_website(); where I placed all the actions that I wanted to have happen once my animation was over.
in flash canvas you are already programming in javascript (and other js libraries flash uses), so you can't use and don't need the ExternalInterface.call and such.
You can and should call straight to the javascript function:
this.stop();
start_website();
Good luck!

stopping animations based on setTimeout

I have a javascript function that I use to animate the filling out of a form. Basically like a tutorial to show customers what and how to enter their information. I was wondering if anyone had any ideas on what I could use to pause my animations. For example a have a button that when clicked would pause the animation and when clicked again would continue the animation.
My animation is basically several setTimeout's inside of each other.
Example
setTimeout(function(){
$('#box1').val("1");
setTimeout(function(){
$('#box2').val("2");
setTimeout()....... and so on
},2000);
},200);
any ideas would be greatly appreciated thanks.
i m not sure but maybe you can use
$("#box1").stop(true).hide('fast');
OR
setTimeout(function(){ $("#box1").hide(); }, 3000);
use this:
myVar=setInterval(yourfunc(),2000);
for pause use:
cleartInterval(myVar);
you can check my func here: http://jsfiddle.net/YSfpm/

one function not running with jQuery infinite carousel build

so i have tried making myself an infinite carousel using html, css & jQuery and everything is working apart from the back button will not loop, i've spent quite a while doing this now and i'm wondering if anyone has any insight? http://jsfiddle.net/e2SKk/ is where you can see the code! i'm only really doing this because i thought it would give me a chance to learn a lot more, but any criticisms of code layout or technique would be helpful!
specifically its this code thats seems not to work
else if(loopPrev==true){
sliderActive=true
$('.item-holder').css({
'left':clonePos
});
$('.item-holder').animate({
'left':holderPos+$('.slider').width()+'px'
},function(){
sliderActive=false;
});
};
that is only a snippet btw and won't make much sense without the rest!
jQuery is cool to write short scripts.
Your slider code in short:
var width = $('.slider').width();
$('.item').css({width:width});
var $holder = $('.item-holder').css({left:-width}).prepend($('.item:last'));
$('.prev').click(function(){
$holder.not(':animated').css({left:-2*width}).prepend($('.item:last')).animate({left:-width});
});
$('.next').click(function(){
$holder.not(':animated').css({left:0}).append($('.item:first')).animate({left:-width});
});
​
That's the complete code.
See this in action on http://jsfiddle.net/creativecouple/YPU2d/
Pretty cool little slider you have going here! You say you are a beginner? I'd say you've picked up on jQuery quite well! Also before I forget, addressing your comment: if you post something on stackoverflow...it WILL be viewed, likely by many people :). It's rare to come here and receive no help (albeit you may not always get an answer).
Fortunately for you, I've found your problem! It's right here:
else if(loopPrev==true){
sliderActive=true
$('.item-holder').css({
'left':clonePos
});
$('.item-holder').animate({
'left':holderPos+$('.slider').width()+'px'
},function(){
sliderActive=false;
});
};
You are checking whether or not to loop, setting the slider to active, setting the next slide to the last slide in the index (and subsequently pushing it to that at the same time), then you animate as you normally would. This results in two movements: first to the back of the index, then to the value of holderPos+$('.slider').width()+'px'...hence your strange behaviour. This should help:
else if(loopPrev==true){
sliderActive=true;
$('.item-holder').animate({
'left':"-1800px"
}, function(){
sliderActive=false;
})
};
The value "-1800px" is just the last slide in your buffer that I precalculated...you should be able to replace it with your clonePos variable without trouble.
*EDIT: You should also change your variable clonePos to look like this:
var clonePos = '-'+($('.item').index()-1)*($('.slider').width());
It will eliminate a bug when you swap between the last slide in the index and the first slide (a "smooth transition" if you will).
**
Part II
**
In order to achieve the illusion of infinite scrollability you will need to embed a callback "push back" function inside the "left pressed" animation call. It's late here so I haven't tested the code I am about to write but I'm fairly confident it will work for you.
else if(loopPrev==true){
sliderActive=true;
$('.item-holder').animate({
'left':clonePos
}, function(){
$(this).css('left':holderPos+$('.slider').width()+'px');
sliderActive=false;
})
};
If you take a look this isn't much different from the original answer I offered. All we have done is take the callback function for animate, and added a call to slip the position to the original index position. Again, untested, but the idea is that .animate() will slide to the clone, once that is done your callback will swap the clone with the original, and then deactivate the slider.
You weren't very far off! Here's a semantic rule of the animate function (to attempt to help your understanding of the way a callback works):
animate( params, [duration], [easing], [callback] )
params is our left call (to the cloned slide in this case)
duration is ignored here
easing is ignored here
callback is our function() call that does our little david copperfield swap
Hope this helps!

Javascript/jquery Images slideshow does not work

I am trying to create an easy slideshow but It is not that easy at all :(.
I have few problems to make it work.
Here is my code so far: http://jsfiddle.net/WUE9g/1/
PS: I would much appreciate any kind of help.
Thank you!
You had an unclosed function call in your code, check now: http://jsfiddle.net/WUE9g/3/
Use firebug, it has an error console that tells you what's going on.
I think that your parenthesis are not matching. Use
$(function() {
rotatePics(1);
});
instead of
$(function() {
rotatePics(1);
}
Since $ is a shortcut to the jQuery function, you need to use it like any other function (e.g. rotatePics()).

Categories