Search code examples
wpfpixelsense

Making an object "Throb"/Grow and Shrink


pretty new to WPF, but i've made a Surface app to get peoples attention in my office reception.

http://www.diaryofaninja.com/blog/2012/06/03/building-an-image-and-video-viewer-for-microsoft-surface-20-in-no-time-at-all

what I would like to do, is if people haven't touched the screen for a while (i'm already recording this with a timer), I want to make each of the objects in my app "Throb" one by one to get peoples attention.

Would i use a transform or a storyboard?


Solution

  • I ended up calling the following method on a timer:

    void RunScaleAnimation(FrameworkElement e)
    {
    
    var storyboard = new Storyboard();
    var easeOut = new BackEase { EasingMode = EasingMode.EaseOut, Amplitude = 0.3 };
    
    double startHeight = e.ActualHeight;
    double startWidth = e.ActualWidth;
    
    var growAnimationHOut = new DoubleAnimation(startHeight, startHeight * 1.05,
                                                TimeSpan.FromMilliseconds(100)) { AutoReverse = true };
    
    var growAnimationWOut = new DoubleAnimation(startWidth, startWidth * 1.05,
                                                TimeSpan.FromMilliseconds(100)) { AutoReverse = true };
    
    growAnimationHOut.EasingFunction = easeOut;
    growAnimationWOut.EasingFunction = easeOut;
    
    storyboard.Children.Add(growAnimationHOut);
    storyboard.Children.Add(growAnimationWOut);
    
    Storyboard.SetTargetProperty(growAnimationWOut, new PropertyPath(FrameworkElement.WidthProperty));
    Storyboard.SetTargetProperty(growAnimationHOut, new PropertyPath(FrameworkElement.HeightProperty));
    
    e.BeginStoryboard(storyboard);
    }