47277

Tween multiple blobs in KineticJs

Question:

How can I tween multiple blobs in Kinetic JS?

I can tween a blob using two set of points, but what about more than that? Please help. Here's what I have so far:

JS setTimeout(function () { for (var i = 0; i < blobPoints.length; i++) { var tween = new Kinetic.Tween({ node: blob, duration: .5, points: blobPoints[i], onFinish: function () { //this is where I want to call next tween using next set of points } }); tween.play(); }; }, 300);

Complete demo here: <a href="http://jsfiddle.net/4KLf8/1/" rel="nofollow">http://jsfiddle.net/4KLf8/1/</a>

If you notice, it tweens to the next set of points but very fast, it's even hard to see. I want it to complete the tween first before it calls the next set of points. I'm not quiet sure how to do that. I'm still pretty new to JS and Kinetic JS so please bare with me. Thank you!

Answer1:

function runTween(number) { var tween = new Kinetic.Tween({ node: blob, duration: .5, points: blobPoints[number], onFinish: function () { var next = number+ 1; if (blobPoints[next]) { runTween(next); } } }); tween.play(); } setTimeout(function () { runTween(0) }, 300);

<a href="http://jsfiddle.net/4KLf8/3/" rel="nofollow">http://jsfiddle.net/4KLf8/3/</a>

Recommend

  • Create an instance of an abstract class in Kotlin
  • How to toast a message for a specific time period?
  • How to display HTML after video play finishes?
  • Can findContour in OpenCV work like bwlabel in Matlab?
  • Update Gradle references to include maven local jars (libGDX & Tween Engine)
  • C# pinvoking CredWrite issue on Windows XP Pro
  • Android: finish() of CountDownTimer is called even if cancel() is called
  • Empty BLOBS - SQL Server
  • scalafx.animation.Timeline not working as expected
  • Alpha 0 vs Visible = false
  • OpenCV - iterate over each blob in a binary image and use it as mask
  • What would be the best way to send NSData through PHP into MySQL?
  • Store tiff images in SQL Server or file system?
  • Save documents as BLOB in SQL or on file system
  • what is call to function $openid->validate do?
  • Mootools: how fired a function (or more functions) after the end of a tween or morph FX or other eve
  • Implicit property animations do not work with CAReplicatorLayer?
  • jQueryUI dialog replacement for confirm?
  • Are there “Dynamic Playlists” of unit tests in Visual Studio?
  • Appium MobileElement swipe returns unknown server error
  • Simple linked list-C
  • CakePHP ACL tutorial initDB function warnings
  • How to make a tree having multiple type of nodes and each node can have multiple child nodes in java
  • retrieve vertices with no linked edge in arangodb
  • How to delete a row from a dynamic generate table using jquery?
  • using HTMLImports.whenReady not working in chrome
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Change div Background jquery
  • Authorize attributes not working in MVC 4
  • apache spark aggregate function using min value
  • EntityFramework adding new object to nested object collection
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How can i traverse a binary tree from right to left in java?
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?