Compiled Experience

Nigel Sampson

© 2021. All rights reserved.

Silverlight Animation Part 3: Opacity

31 Jan 2009 by Nigel Sampson

Time to extend our burgeoning framework with the ability to programmatically animate an items opacity. It's pretty quick and I hope easy to follow code, we're not using key frames or any splines to animate this, just a simple linear animation. Here's the code.

public class OpacityAnimation : AnimationBase
{
    public static TimeSpan DefaultDuration = TimeSpan.FromMilliseconds(750);
 
    public OpacityAnimation(double opacity)
        : this(opacity, DefaultDuration)
    {
 
    }
 
    public OpacityAnimation(double opacity, TimeSpan duration)
    {
        Opactity = opacity;
        Duration = duration;
    }
 
    public double Opactity
    {
        get;
        private set;
    }
 
    public TimeSpan Duration
    {
        get;
        private set;
    }
 
    protected override Storyboard CreateStoryboard()
    {
        var storyboard = new Storyboard();
 
        var opacityAnimation = new DoubleAnimation();
 
        Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath("(FrameworkElement.Opacity)"));
 
        storyboard.Children.Add(opacityAnimation);
 
        return storyboard;
    }
 
    protected override void ApplyValues(Storyboard storyboard)
    {
        if(storyboard == null)
            throw new ArgumentNullException("storyboard");
 
        var opacityAnimation = storyboard.Children[0] as DoubleAnimation;
 
        opacityAnimation.To = Opactity;
        opacityAnimation.Duration = Duration;
    }
}

Now that we have that in place we can put together four very useful extension methods.

public static void FadeOut(this FrameworkElement element)
{
    element.Fade(0.0);
}
 
 
public static void FadeIn(this FrameworkElement element)
{
    element.Fade(1.0);
}
 
 
public static void Fade(this FrameworkElement element, double opacity)
{
    new OpacityAnimation(opacity).Apply(element);
}
 
public static void CrossFade(this FrameworkElement elementToFadeOut, FrameworkElement elementToFadeIn)
{
    FadeOut(elementToFadeOut);
    FadeIn(elementToFadeIn);
}

And here's the code to the example which you can find at "Silverlight Animation Examples".

if(leftFadedOut)
{
    Right.CrossFade(Left);
}
else
{
    Left.CrossFade(Right);
}
 
leftFadedOut = !leftFadedOut;

Latest Posts