0

I would like to find out if there is any way of animating Text, such as changing its background colour and adding some fade transitions after a certain period of time using ReactFx. A simple example would be appreciated. Thanks.

Explorer 24
  • 11
  • 3
  • If by Text you mean `javafx.scene.text.Text`, note that it is a `Shape` and does not have a background by itself. You can animate a background of a containing node, e.g. `Label` or `TextFlow`. You can make a fade effect by animating the `opacity` property. Can you be more specific about what you are trying to do? Do you want to transition periodically, as [here](http://stackoverflow.com/questions/28523883/animating-layouts-javafx), fade out after some event occurs (like a button click)? – Tomas Mikula Feb 17 '15 at 17:27
  • Exactly, the concept is the same;"change the fill color of the text after some time ". Actually I've used the same approach as that example, except I can't seem to be able to bind the animation to the text object using the similar method used to animate the vbox [ Val animBgr = Val.animate(color, Duration.ofMillis(500)) .map(c -> new Background(new BackgroundFill(c, null, null))); Vbox has a background property that can be used to bind the animation. Is there a way I can do the same for text objects? – Explorer 24 Feb 17 '15 at 18:55
  • Yes, Text has a `fillProperty` that you can bind: `Val animColor = Val.animate(color, Duration.ofMillis(500));` and then `text.fillProperty().bind(animColor);`. – Tomas Mikula Feb 17 '15 at 19:02
  • As noted above, `Text` does not have a background property. If you want to change the background of text, you need to change the background of its parent Node. – Tomas Mikula Feb 17 '15 at 19:03
  • 1
    Thanks, Is the documentation of the Val<> method in the API? I'd like to learn in depth how to use ReactFx but I don't think the API provided really explains how, it's more of a reference guide to those who already know. I'm just starting out with it and would like to know if there any such examples that demonstrate such small features using ReactFx. Thanks – Explorer 24 Feb 17 '15 at 19:13
  • The used version of `Val.animate()` method is currently only present in the snapshot release. Javadoc of this snapshot release is not uploaded online. The closest is [this animate method](http://www.reactfx.org/javadoc/2.0-M3/org/reactfx/value/Val.html#animate-javafx.beans.value.ObservableValue-java.time.Duration-org.reactfx.util.Interpolator-) from 2.0-M3, which additionally takes an _interpolator_. In the snapshot version that you use, you can omit the interpolator for objects that implement `Interpolatable`, such as `Color`. – Tomas Mikula Feb 17 '15 at 19:25
  • Also see my blog post on [animated transitions with ReactFX](http://tomasmikula.github.io/blog/2015/02/13/animated-transitions-made-easy.html). – Tomas Mikula Feb 17 '15 at 19:25
  • Oh, and if you are wondering what a `Val` is, see [this blog post](http://tomasmikula.github.io/blog/2015/02/10/val-a-better-observablevalue.html). – Tomas Mikula Feb 17 '15 at 19:29

0 Answers0