Avalonia: Concatenation and repetition of animations is not applied

[OronDF343]

My attempts in creating an animation with multiple stages or with repetition have failed. The following is an example of both concatenation and repetition:

Animate.Property(tb2, Canvas.LeftProperty, g, 0, new LinearDoubleEasing(), TimeSpan.FromSeconds(3))
       .Merge(Animate.Property(tb, Canvas.LeftProperty, 0, -g, new LinearDoubleEasing(),
                               TimeSpan.FromSeconds(3)))
       .Concat(Animate.Property(tb2, Canvas.LeftProperty, 0, -g, new LinearDoubleEasing(),
                                TimeSpan.FromSeconds(3))
                      .Merge(Animate.Property(tb, Canvas.LeftProperty, g, 0,
                                              new LinearDoubleEasing(),
                                              TimeSpan.FromSeconds(3))))
       .Repeat()
       .Subscribe();

In this example, the Merge is working correctly and both controls move to the left as specified in the first two lines, but once that part is done executing, the animation stops. Even removing the Concat and using Repeat alone (with or without a parameter) does not help.

Am I doing something wrong here?

[grokys]

Hi @OronDF343 - I don't have time to look into this right now, but try adding something like this before the .Subscribe() call:

.Do(x => System.Diagnostics.Debug.WriteLine(x))

This should output each value in the animation to the VS output pane so you can see what's going on. Let me know if you're still having no luck and I can take a deeper look.

[OronDF343]

After the first part of the animation completes, it cycles through the following values:

-122
0
122
-122
0
122
0
0

(note that in the code above, g = 122 at runtime)

I injected my own IEasing<double> into the second animation step and found that progress is only ever set to either 0 or 1. Not sure how to proceed with debugging from here.

[jmacato]

Closing this since there has been no follow-up for this question. Ping us up over at Gitter when you need to know more about the new Animations stuff :)

[OronDF343]

If the easing only ever produces 1 or 0, then something definitely isn't
working right. I believed this issue was a bug, not user error, and was
hoping to get input/corrections from someone who knows how the animations
are supposed to work.

I'll see if I can test my code on the latest build later.

On Fri, Jun 22, 2018, 18:48 Jumar Macato [e-mail] wrote:

Closing this since there has been no follow-up for this question. Ping us
up over at Gitter https://gitter.im/AvaloniaUI/Avalonia when you need
to know more about the new Animations stuff :)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/AvaloniaUI/Avalonia/issues/1263#issuecomment-399487775,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE5SjNT4XSXbJvUQkag_jVmkc2uobcqHks5t_RHIgaJpZM4QS3c4
.

[jmacato]

@OronDF343 Please do inquire to me on what animations you're trying to do? I can't parse the intent of your original code so pardon if i didn't provide any input

[OronDF343]

Haven't looked at this in a while, so hopefully I'm remembering this
correctly:

I'm trying to do a scrolling text animation using two TextBlocks. g is
the width of the canvas containing the TextBlocks.

Initial state in left to right order: tb is at the left edge of the canvas,
followed by the predefined magin, followed by tb2

First step: both move to the left by g, which means until tb is offscreen
and tb2 is where tb was before.

Second step: Animate the same scenario, but with tb and tb2 in opposite
roles. Loop back to step 1.

This creates the illusion of infinitely scrolling text, in theory. But the
animation stops working correctly after step 1, as described previously.

On Tue, Jun 26, 2018, 16:03 Jumar Macato [e-mail] wrote:

Reopened #1263 https://github.com/AvaloniaUI/Avalonia/issues/1263.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/AvaloniaUI/Avalonia/issues/1263#event-1701343838, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AE5SjEtkIPTLN7VSbbyccrpWnX_sI4lHks5uAjEEgaJpZM4QS3c4
.

[jmacato]

Ahh, like a news ticker right? :smile: i'll think about the right approach to that

[jmacato]

I guess this can wait till we get around making Binding to Keyframe setter values possible, which is on my pipeline.

[jkoritzinsky]

@OronDF343 can you try this with the new nightly build with the new Animation support?

[OronDF343]

Sorry for the late reply, but I have a new method of animating it which should be more efficient and easier to implement (the old method can no longer be implemented as-is since animations can't target more than one control).

The new method involves a horizontal StackPanel with two identical textboxes at fixed positions, contained inside a Canvas. This StackPanel's position is animated using the Canvas.Left property to get the desired effects.

Example:

<Canvas ClipToBounds="True" Width="160" Margin="2">
    <StackPanel Orientation="Horizontal">
        <StackPanel.Styles>
            <Style Selector="StackPanel">
                <Style.Animations>
                    <Animation Duration="0:0:3" RepeatCount="Loop">
                        <KeyFrame Cue="0%">
                            <Setter Property="Canvas.Left"
                                    Value="{Binding #TextBlob.Bounds.Width, Converter={StaticResource nc}}" />
                        </KeyFrame>
                        <KeyFrame Cue="100%">
                            <Setter Property="Canvas.Left" Value="{Binding #TextBlobClone.Margin.Left}" />
                        </KeyFrame>
                    </Animation>
                </Style.Animations>
            </Style>
        </StackPanel.Styles>
        <TextBlock Name="TextBlob"
                   Text="{Binding Message}">
        </TextBlock>
        <TextBlock Name="TextBlobClone"
                   Margin="50,0,0,0"
                   Text="{Binding Message}"/>
    </StackPanel>
</Canvas>

Converter:

<Window.Resources>
    <u:NegateConverter x:Key="nc" />
</Window.Resources>

public class NegateConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return -((double)value + (parameter as double? ?? 0.0));
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

This method works for what I want. Unfortunately, there are visible artefacts left behind by the text as it moves by.

[jmacato]

That's awesome! good thing keyframe value bindings are working as it should, credits to @jkoritzinsky for that :smile:
Hmm that artifacts seems weird.. do you mind having a repro project for us to test?

[OronDF343]

https://bitbucket.org/orondf343/avaloniatesting/src/master/

[jmacato]

That works properly here, im on Ubuntu so yeah.

[jmacato]

        <StackPanel Name="Marquee" Orientation="Horizontal" DockPanel.Dock="Top">
            <StackPanel.Styles>
                <Style Selector="TextBlock.scrolling">
                    <Style.Animations>
                        <Animation Duration="0:0:10" RepeatCount="Loop">
                            <KeyFrame Cue="0%">
                                <Setter Property="TranslateTransform.X"
                                    Value="{Binding $self.Bounds.Width, Converter={StaticResource nc}}" />
                            </KeyFrame>
                            <KeyFrame Cue="100%">
                                <Setter Property="TranslateTransform.X"
                                    Value="{Binding #Marquee.Bounds.Width}" />
                            </KeyFrame>
                        </Animation>
                    </Style.Animations>
                </Style>
            </StackPanel.Styles>
            <TextBlock Classes="scrolling"
                Name="TextBlob"
                Text="{Binding Message}" />
        </StackPanel>

i've made this one as a auto-adjusting marquee, it automagically adjusts when the bounds are resized

[jmacato]

I wonder if a constant speed mode for animations is useful in this instance...

[jmacato]

@OronDF343 anyways, the scope of this issue has been addressed already right? the artifacts seems to be similar to this bug https://github.com/AvaloniaUI/Avalonia/issues/1960 so i think this can be closed

[OronDF343]

Sure, we can close this. Thanks!