keyframe.define - Asynchronous vs. Synchronous

[MichaelBarb]

It works very well but I have hit one problem. It looks like this function executes asynchronously. I need it to execute synchronously. I am doing the following scenario.
1. Operator Input new Position.
2. Define new Keyframe.
3. Move from Current to New position.
4. Repeat.
The new position has a rotation so it is necessary to run keyframe.define before each move. It works well when running in the debugger and providing enough time for the asynchronous function to complete. It must be a low priority because even putting in a long time delay of 5 seconds it does not reliably complete.

I really do not want to create a fork but before I do I thought I should ask first if you have any ideas. I can understand why this routine should be asynchronous so on load of the page it can crunch in the background. I think there is need for both version. Maybe a flag in the argument list??

Again, I am very happy with the results of using your addin. If you are interested a first test can be found at:
http://net4.ccs.neu.edu/home/barbm/myProject/RobotArmKeyFrame/RobotArm.html
Each arm is an SVG. They are in nested div's so the second arm is relative to the first arm. Try the speeds 8 and 2.

[krazyjakee]

$.keyframe.define is synchronous as far as I was aware. Prefixfree has a function in there but it would break functionality for that to contain async code.

There must be something else at play here that stops the animation from completing properly. My guess is that you may have to call reset on your animation when it finishes.

I tried running the speeds on your test (which looks great btw!) and they seemed to complete just fine. Can you tell me what steps will recreate the problem in your example?

[MichaelBarb]

Working with it more I think I see what is happening. When you set up a keyframe and start a move, the move never ends. When you edit the keyframe it moves to the new position. You do not need to restart the move!! I even nested the "keyframe.define" inside a "resetKeyframe".

I updated the screen on my website. The "Update Move" button only executes the "keyframe.define". The Move To Angle only executes the "playKeyframe".

Test Senerio:
Run Continous

1. Reset
2. Set angles to 100,45
3. Update Move
4. Move To Angle
5. Set angles to 200,45
6. Update Move (It will move most of the time)
   If not moving hit Update Move several times
   It will jump to new position.
   This is expected since both "to" and "frames" set to same value and there was a resetKeyframe.
7. Set angles to 100,45
8. Update Move (It will move most of the time)
9. Repeat from step 5

The worst part is that this is not consistent. Sometimes the move ends and needs to be restarted. Sometimes also the define fails to execute. Is there anyway that these functions could return a complete or an error code.

You might also want to note there is a flash to the 0,0 angle position before it does the expected move. It does not do this in IE. I suspect since each arm is going to 2 different keyframes that the first one is not being totally released before the second one takes control.

[krazyjakee]

I think a better solution to your problem would be canvas and a library such as easeljs.

[MichaelBarb]

I am going for a master's in computer science at Northeastern Univ. This is a project for my web design course. My stated goal is to do the animation with CSS keyframes and an SVG object. We also discussed your addin. Failure is acceptable but I have to prove why. It is so close.

[krazyjakee]

Despite it's flaws, IE has access to a great deal of hardware on the system. It's able to render very quickly and so there are no draw issues. On other browsers, you'll find bugs while the page render tries to catch up with the generated css.

By default, the library applies a 3D transform (boostKeyframe) to try to get as much performance as possible. Even that may not be enough in your case.

[MichaelBarb]

I got it to work. Kind of a hack but it works. I created 2 keyframes for the move. I alternate back and forth between them. Define A, Play A, Define B, Play, Define A, Play A, etc.

Basically, when you hit play you connect a keyframe to an object. Even if you set "animation-play-state" to "pause" when you update a keyframe, most of the time it sets it back to "running". This is not consistent but most of the time.

Basically, the solution is not to have the keyframe being redefined connected to a object. What I did was kind of a hack. Thoughts??

[krazyjakee]

Awesome, glad you fixed the issue. Are there any improvements that could be made to the library because of your findings, or is it more a case of workflow?

Care to put up your animation on a more permanent url? With your permission, I will add it to the readme as a fine example of use.