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();
    p.getElements().addAll(
      absMoveTo(0, 0),
      relMoveTo(28.278072,9.8921077),
      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)
    );
    p.setFill(Color.BLACK);
    group.getChildren().add(p);
    
  4. Implement a PathMorphAnimation
  5. Use the new animation type
    PathMorphAnimation a = new PathMorphAnimation(p.getElements(), Arrays.asList(
      absMoveTo(0, 0),
      relMoveTo(28.278072,10.021449),
      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);
    a.setAutoReverse(true);
    a.setCycleCount(Animation.INDEFINITE);
    

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

One thought on “Animated path morphing in JavaFX

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s