Jump to content
Search Community

Maxime

Members
  • Posts

    15
  • Joined

  • Last visited

Maxime's Achievements

  1. I arrived to manage what I need with a simple delayedCall. For those who are interested check the documentation.
  2. tl.to($obj, speed, { y: '40' }); tl.addLabel('label'); tl.addCallback(function() { playSound(); }, 'label+=.15'); tl.addCallback(function() { playSound(); }, 'label+=.25'); For me, the timeline WAIT the execution of call()/addCallback(). Can someone explain me why the timeline is paused (or not rendered) when I use add() and addCallback()? The best would be to have a running timeline (not disturbed by callbacks). Using a timeline is give the possibility to insert small function at the right place without doing the non maintainable way with setTimeout({}, 200).. Attempt: Wrap the callback function in a setTimeout(playSound, 0). Not working Pen: http://codepen.io/magister/pen/GgrRae
  3. Maxime

    Animation in canvas

    Yes, I'm on Mac osx Chrome. In the full page mode I still have canceled request at a certain time. Strange.
  4. Maxime

    Animation in canvas

    It's not a server problem. I have no idea why after a certain moment, the browser (Chrome/Safari) decide to load a new image instead of setting replacing the current one by the cached one... Here is the codepen : http://codepen.io/magister/details/sGAym If there is no solution for this I did the DOM replacement way... with .replaceChild() This problem doesn't exist on Firefox.
  5. Maxime

    Animation in canvas

    Hi everyone, Changing the src attribute of image works well when the image element have the exact same size as the new image. I have the following problem: (After an initial preload) When I set a retina image src (60x/second) twice bigger but resized by the CSS, the animation make a new HTTP request for this image. In other words, every frames creates new HTTP request. My server + browser are overloaded... Why setting an url of an image of 332x312 into the following tag create extra HTTP request? <img style="width:166px; height:156px;" width="332" height="312" src="/images/ipad_2x/symbols/id_009@2x.png">No extra http request when:<img style="width:166px; height:156px;" width="166" height="156" src="/images/ipad_1x/symbols/id_009.png">I already set a maxAge of 1 year for the assets server side express.static('/images',{ maxAge: oneYear}));Should I consider, deleting the DOM image and replacing with a new element ?
  6. Note for people who going to read this later: It took me 4hours to rewrite my onComplete callback pyramid... The code is now cleaner, flexible and better performance. Thank you Carl!
  7. There is any performance difference between creating a series of Tweens linked each other with onComplete functions. Or creating one TimeLine and adding callback logic and Tweens with the functions, add(), append(), addCallback() ??
  8. Maxime

    Animation in canvas

    Yes roundProps is the solution. Thank you very much. This helps! I have a small problem: the update Handler is too fast. I need to run a 30fps animation. I run it as follow: var fps = 30, currentFrame = 0, totalFrames = 25, $img = $("#myImage"); var anim = {frame:0}; TweenMax.to(anim , totalFrames/fps, {frame:"+="+totalFrames, roundProps:"frame", onUpdate:updateHandler, repeat: 1 }); function updateHandler() { var frameNum = anim.frame; console.log('set ',anim.frame); $img[0].src = "./img/test/ace_0" + (frameNum < 10 ? "0" : "") + frameNum + ".png"; } It try to set too many times the same image: Output this: set 0 - repeat 1 set 1 - repeat 1 set 2 - repeat 2 set 3 - repeat 2 set 4 - repeat 1 set 5 - repeat 3 set 6 - repeat 1 set 7 - repeat 1 set 8 - repeat 3 set 9 - repeat 3 set 10 - repeat 1 set 11 - repeat 1 2set 12 - repeat 1 set 13 - repeat 1 set 14 - repeat 1 set 15 - repeat 1 set 16 - repeat 11x 2set 17 - repeat 11x set 18 - repeat 11x set 19 - repeat 11x set 20 - repeat 11x 2set 21 - repeat 11x set 22 - repeat 11x set 23 - repeat 11x 2set 24 - repeat 11x set 25 - repeat 11x I think my timing is not right : totalTime = totalFrames/fps Or some delays somewhere?
  9. Maxime

    Animation in canvas

    Thank for your answers. It's useful ressources. I try to achieve the complete animation like this : http://forums.greensock.com/topic/6338-animating-and-controlling-image-sequence/#entry22958 BUT, into one single Tween: which I can play(), pause() exactly like this: http://codepen.io/jamiejefferson/pen/aJcGl But for performance (DOM manipulations) into my game, I can't insert 60-80 images elements per animations (example:2). So the example 1 is interesting but I need to rewrite at 30 fps into one single Tween. Here I need your help.
  10. Maxime

    Animation in canvas

    Does anybody know/example with animating an image sequence (not a sprite image) into a canvas element. I would like to use the power of TimeLine in order to control the Tween (pause, stat, stop) It exists an example with image elements: http://codepen.io/anon/pen/dkugc The main idea is here http://stackoverflow.com/questions/22411994/preloading-image-sequence-on-html5-canvas But I would like in a canvas element Thanks for your ideas.
  11. GREAT complicated explanation. Many thanks.
  12. Perfect, {y: ...} works perfectly
  13. Good to know thank you. But, it doesn't solve my problem : the css property transform of my list did not changed I should see the css transform property of the ul changed...
  14. Why Tweenlite does'nt apply to ul:{jquery object, filled} the transformation in this case : TweenLite.set(ul, {css:{transform: 'translateY(-4000px)'}}); But this work as it should be with TweenLite: ul.css('margin-top', '-4000px'); JSfiddle description : JSfiddle I use the latest version of TweenJs. Thanks for your help.
×
×
  • Create New...