Self drawing lines

How-to Discussions
1

I’m trying to create self drawing lines like this polyline animation.
Is this possible?
I looked to the attract class in combination with the curve tag. But in this case

<Curve StrokeWidth="2.5" StrokeColor="#000">
    <Each Items="{items}">
        <CurvePoint X="attract({x},lineAnim)" Y="attract({y},lineAnim)"/>
    </Each>
</Curve>

the animations starts for every point at the same time.

2

With the constraints you found in mind, the solution is pretty clear: you need to delay the adding of the points themselves.

One way would be to recursively add the points to the Observable list by using setTimeout() to specify the delay.

Another that should yield similar results: have the full list filled, then data-bind the Limit property on Each tag to an Observable integer and change the value of it (again, recursively with a setTimeout()).

Hope this helps!

3

@Uldis: Thx for your input. I hoped I oversaw some AttractorConfig stuff like using a attractor config with a timeline…

4

Nah, sorry. Adding a Delay to the attractor also was my first thought, but that currently isn’t possible.

5

I think that’s a good starting point:

<App Background="#232323">
    <JavaScript>
        var Observable = require( "FuseJS/Observable" )
        
        var items = Observable();
        exports.items = items;
        var currPoint = 1;

        var longInterval = 1100;
        var shortInterval = 500;
        var endInterval = 2000;
        var points = [[0.0, 0.0, shortInterval], [1.0, 0.0, longInterval], 
                      [1.0, 0.2, shortInterval], [0.0, 0.2, longInterval], 
                      [0.0, 0.4, shortInterval], [1.0, 0.4, longInterval], 
                      [1.0, 0.6, shortInterval], [0.0, 0.6, longInterval], 
                      [0.0, 0.8, shortInterval], [1.0, 0.8, longInterval], 
                      [1.0, 1.0, shortInterval], [0.0, 1.0, endInterval]];
        
        for (var p = 0; p < points.length; ++p) {
            items.add(Observable({x: points[0][0], y: points[0][1]}))
        }

        var next = function() {
            if (currPoint >= points.length) {
                items.clear();
                for (var p = 0; p < points.length; ++p) {
                    items.add(Observable({x: points[0][0], y: points[0][1]}))
                }
                currPoint = 0; 
            } else { 
                for (var p = currPoint; p < points.length; ++p) {
                    items.getAt(p).value = {x: points[currPoint][0], y: points[currPoint][1]};
                }
                interval = points[currPoint][2];
            } 
            clearInterval(lastTimer);
            lastTimer = setTimeout(next, points[currPoint][2]);
            currPoint += 1;
        }
        var lastTimer = setTimeout(next, points[currPoint][2]);
    </JavaScript>   

    <AttractorConfig ux:Global="lineAnim" Type="SmoothSnap" Duration="0.5" Unit="Normalized" />  
    <Curve StrokeWidth="2.5" StrokeColor="#fffa" HitTestMode="LocalBounds" Style="Straight" Margin="50" Close="None">
        <DropShadow Size="6" Spread="0.5" Color="#FFF5" Distance="0"/>
        <Each ux:Name="lines" Items="{items}"> 
            <CurvePoint X="attract({x},lineAnim)" Y="attract({y},lineAnim)" />
        </Each> 
    </Curve> 
</App>