Geek asks and answers

How can I animate my WPF storyboard for a second before continuing?

We have a color animation that mixes from red to white. This is currently linear wilting. We know that we can play with the BeginTime class Storyboard, etc., but that just delays the start of the whole animation. We also looked at lightness / ease, but they don't seem to work either.

In particular, we would like to keep the value of red for one second, and then disappear from red to white for the next. Can this be done in pure XAML? If not, can this be done in code to manually configure the storyboard? ... or do we need to use two separate storyboards and play them sequentially?

+5
source share
2 answers

Several ways to do this.

with keyframes:

<Storyboard>
    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.Color">
        <DiscreteColorKeyFrame Value="Red" KeyTime="0:0:0" />
        <DiscreteColorKeyFrame Value="Red" KeyTime="0:0:1" />
        <LinearColorKeyFrame Value="White" KeyTime="0:0:2" />
    </ColorAnimationUsingKeyFrames>
</Storyboard>

with two animations in sequence:

<Storyboard>
    <ColorAnimation Storyboard.TargetProperty="Background.Color"
                    From="Red" To="Red" Duration="0:0:1" />
    <ColorAnimation Storyboard.TargetProperty="Background.Color"
                    To="White" BeginTime="0:0:1" Duration="0:0:1" />
</Storyboard>

with custom attenuation function:

<Storyboard>
    <ColorAnimation Storyboard.TargetProperty="Background.Color"
                    From="Red" To="White" Duration="0:0:2">
        <ColorAnimation.EasingFunction>
            <local:CustomEasingFunction />
        </ColorAnimation.EasingFunction>
    </ColorAnimation>
</Storyboard>

In this case, a function that shows the transition in the first half of the duration and holds the value in the second half. Since EasingMode is EaseOut by default, this function will “play” backward.

public class CustomEasingFunction : EasingFunctionBase
{
    public CustomEasingFunction() : base()
    { }

    protected override double EaseInCore(double normalizedTime)
    {
        return (normalizedTime < 0.5)
            ? normalizedTime * 2
            : 1;
    }

    protected override Freezable CreateInstanceCore()
    {
        return new CustomEasingFunction();
    }
}
+14
source

Depending on how you created your animations, you can simply add a transition from “red” to “red”, which takes a second at the beginning. This is how the animation works technically, but it does nothing. This can be done in pure XAML.

+1
source

More articles:


All Articles