Animated path morphing in JavaFX

Inspired by a new feature available on Android Lollipop named AnimatedVectorDrawable I found in this blog post and the availability of the Twitter Emoji I tried to recreate the same using JavaFX.

The result can be seen in this short video.

The process is fairly simple:

  1. I used the SVG to FXML converter who is part of e(fx)clipse to get JavaFX representation of the Emoji
  2. Replace the SVGPath-Shape making up the mouth from the FXML with a Group
  3. Replaced it with an Path-Shape in Java code like this
    Node load = FXMLLoader.load(getClass().getResource("Sample.fxml"));
    Group group = (Group) load.lookup("#mouth"); //$NON-NLS-1$
    Path p = new Path();
      absMoveTo(0, 0),
      curveToRel(-0.178,0.097714, 	-0.444,0.1037832, 	-0.635,0.017601),
      curveToRel(-0.039,-0.017601, 	-3.922,-1.7600656, 	-8.7,-1.7600656),
      curveToRel(-4.766,0, 			-8.662,1.7424649,	-8.7,1.7600656),
      curveToRel(-0.191,0.086182, 	-0.457,0.078899, 	-0.635,-0.017601),
      curveToRel(-0.177,-0.097107, 	-0.217,-0.2573337, 	-0.094,-0.3811452),
      curveToRel(0.129,-0.1304876, 	3.217,-3.1820771, 	9.429,-3.1820771),
      curveToRel(6.212,0, 			9.301,3.0515895, 	9.429,3.1820771),
      curveToRel(0.123,0.1244184, 	0.084,0.2840381, 	-0.094,0.3811452)
  4. Implement a PathMorphAnimation
  5. Use the new animation type
    PathMorphAnimation a = new PathMorphAnimation(p.getElements(), Arrays.asList(
      absMoveTo(0, 0),
      curveToRel(-0.178,-0.06422, 	-0.444,-0.068208, 	-0.635,-0.01157),
      curveToRel(-0.039,0.01157, 		-3.922,1.156747, 	-8.7,1.156747),
      curveToRel(-4.766,0, 			-8.662,-1.145179, 	-8.7,-1.156747),
      curveToRel(-0.191,-0.05664, 	-0.457,-0.051854, 	-0.635,0.01157),
      curveToRel(-0.177,0.06382, 		-0.217,0.169124, 	-0.094,0.250495),
      curveToRel(0.129,0.08576, 		3.217,2.091319, 		9.429,2.091319),
      curveToRel(6.212,0, 			9.301,-2.00556, 		9.429,-2.091319),
      curveToRel(0.123,-0.08177, 		0.084,-0.186675, 	-0.094,-0.250495)
    ), Duration.millis(3000), p);

The source of the PathMorphAnimation will be available soon in the e(fx)clipse repo.

This entry was posted in e(fx)clipse, Uncategorized. Bookmark the permalink.

One Response to Animated path morphing in JavaFX

  1. Pingback: JavaFX links of the week, November 17 // JavaFX News, Demos and Insight // FX Experience

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.