Animating a curve is probably a tiny bit more complicated than just sticking a LayoutAnimation on it. You should check out the Charting example we have and go from there.
My bad and miscommunication; Attract is currently part of the Pro plan, too. This might get added to fuselibs-public at some point, but it’s not there yet and there is no ETA if, when or whether at all that will happen.
I think non of these can works on <CurvePoint> because I access every point.
With other odjects, as Rectangle / Panel / other, I can alter and animate Size / Position / Color , but with <CurvePoint> there is no Tag under <LayoutAnimation> to animate X and Y of every point.
I can only gess that it is because they are sub-object of <Curve> . when you change Height of a rectangle, there is only one properties, in Curvpoints it is more like an array of properties.
as for the Attractors, it seems it relays on the same options, so it doesn’t add a way to animate the curve point.
In short, unless the Fuse team has undocumented tricks, no animation to <CurvePoint>.
When using an Attractor, you do not need a LayoutAnimation.
Each CurvePoint needs its own Attractor.
As you change the Value of an Attractor, which targets the At property (or Y if you like) of a CurvePoint, the Curve will animate, depending on how a particular CurvePoint position was affected.
This example animates the Y coordinate of the Curve.
<App>
<JavaScript>
var Observable = require( "FuseJS/Observable" )
var max = 3
var items = Observable()
exports.items = items
// each item in the list is an observable since we need to animate the same object
// a future extension to `Each` will avoid this need
for (var i=0; i <= max; ++i) {
items.add( Observable( { x: i/max, y: Math.random() } ) )
}
exports.next = function() {
for (var i=0; i <= max; ++i) {
items.getAt(i).value = { x : i/max, y: Math.random() }
}
}
</JavaScript>
<Curve StrokeWidth="5" StrokeColor="#000" HitTestMode="LocalBounds" Clicked="{next}">
<Each Items="{items}">
<!-- The NodeGroup is needed since we need a name for the CurvePoint for Attractor
to refer to. Directly inside an `Each` we have templates though, which cannot refer to
each other. -->
<NodeGroup>
<Attractor Target="cp.Y" Value="{y}" Type="Elastic" Unit="Normalized"/>
<CurvePoint X="{x}" ux:Name="cp"/>
</NodeGroup>
</Each>
</Curve>
</App>
Once attract is available in fuselibs (coming soon), you can replace the Curve part with this simpler code:
