SvenWS
1
I try to create animated lines and tried this sample:
<App Background="#232323">
<JavaScript>
var Observable = require( "FuseJS/Observable" )
var max = 4
var items = Observable()
exports.items = items
for (var i = 0; i <= max; ++i) {
items.add( Observable( { x: 0, y: 0 } ) )
}
exports.next = function() {
items.getAt(0).value = { x: 0, y: 0 } ;
items.getAt(1).value = { x: 1, y: 0 } ;
items.getAt(2).value = { x: 1, y: 1 } ;
}
</JavaScript>
<AttractorConfig ux:Global="lineAnim" Duration="2" Type="Elastic" Unit="Normalized"/>
<Curve StrokeWidth="2.5" StrokeColor="#000" HitTestMode="LocalBounds" Clicked="{next}" Margin="50" Style="Straight" Close="None">
<DropShadow Size="6" Spread="0.5" Color="#FFF5" Distance="0"/>
<Each Items="{items}">
<CurvePoint X="attract({x},lineAnim)" Y="attract({y},lineAnim)"/>
</Each>
</Curve>
</App>
And was wondering why this curve is closed although the Close property of the Curve tag is set to None?
Uldis
2
That’s so because you have 5 curve points in your Observable list. The values of the last 2 points are (0,0)
, so it closes the Curve
.
Changing the code to this makes the Curve
to stay open (and changing Close
to Overlap
makes the Curve
close):
<App Background="#232323">
<JavaScript>
var Observable = require( "FuseJS/Observable" )
var max = 2;
exports.items = Observable();
for (var i = 0; i <= max; ++i) {
exports.items.add(Observable({ x: 0, y: 0 }));
}
exports.next = function() {
exports.items.getAt(0).value = { x: 0, y: 0 } ;
exports.items.getAt(1).value = { x: 1, y: 0 } ;
exports.items.getAt(2).value = { x: 1, y: 1 } ;
}
</JavaScript>
<AttractorConfig ux:Global="lineAnim" Duration="2" Type="Elastic" Unit="Normalized"/>
<Curve StrokeWidth="2.5" StrokeColor="#000" HitTestMode="LocalBounds" Clicked="{next}" Margin="50" Style="Straight" Close="None">
<Each Items="{items}">
<CurvePoint X="attract({x},lineAnim)" Y="attract({y},lineAnim)"/>
</Each>
</Curve>
</App>
SvenWS
3
Sorry, I don’t get it. Why do I have 5 points? I initialize 3 points and then set their values?
Uldis
4
var max = 4
for (var i = 0; i <= max; ++i) {
exports.items.add(Observable({ x: 0, y: 0 }));
}
i == 0, 1, 2, 3, 4 == 5 items.
SvenWS
5
Sorry, to blind this morning… I was looking to your corrected code 