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.