{"id":2180,"date":"2022-01-20T09:06:48","date_gmt":"2022-01-20T14:06:48","guid":{"rendered":"https:\/\/badecho.com\/?p=2180"},"modified":"2022-11-15T20:18:25","modified_gmt":"2022-11-16T01:18:25","slug":"canceling-animations","status":"publish","type":"post","link":"https:\/\/badecho.com\/index.php\/2022\/01\/20\/canceling-animations\/","title":{"rendered":"Canceling WPF Animations Made Simple"},"content":{"rendered":"\n
\"Canceling<\/figure><\/div>\n\n\n\n

Not long ago, I had the opportunity to debut the new Apocalypse<\/a> module for my Omnified<\/a> Vision<\/em> overlay application, live on stream<\/a>. It was something I’d been working on for a little while, its importance amplified by that fact that it was to be the final piece of the Omnified experience (for now).<\/p>\n\n\n\n

Naturally, given how I pine for (and even sometimes get!) flawless performances, I subjected the Apocalypse Vision <\/em>module to a little bit of playtesting prior to the stream. This meant running around in game, getting smacked by enemies, dying lots, and marveling at the new visualization magic that is Vision<\/em>.<\/p>\n\n\n\n

Many issues were corrected and fixed, however there was one glaring<\/em> issue: whenever there were many, many new Apocalypse events within a few seconds, the screen would be absolutely cluttered with a whole batch of new items, all running their (eye-grabbing) “reveal” notifications.<\/p>\n\n\n\n

So, in order to alleviate this, the idea was simple: upon a new event being added to the collection of Apocalypse events, any preexisting and in progress animations would have their playback canceled. Annoyingly, doing this wasn’t as easy as I thought it’d be. In this article, we’ll go over just how I ended up doing it.<\/p>\n\n\n\n

Visualizing the Problem<\/h2>\n\n\n\n

The Apocalypse Vision<\/em> module’s root view is the ApocalypseView<\/code> type, and it occupies a particular “anchor point” on Vision<\/em>‘s overlay. Typically, this will be the top-center or bottom-center of the screen.<\/p>\n\n\n\n

The ApocalypseView<\/code> is a collection-based view that is composed of an ItemsControl<\/code> bound to a collection of ApocalypseEventViewModel<\/code> children. Each child’s data context is then resolved to a particular view dependent on the nature of the Apocalypse event itself.<\/p>\n\n\n\n

Each child view is decorated by the ApocalypseView<\/code> in a ContentControl<\/code> that is essentially composed of two Border<\/code> controls surrounding the actual child view content; it is these two Border<\/code> controls where the animations we desire to cancel are being ran.<\/p>\n\n\n\n

There are two animation storyboards at play: one for the outer border, and one for the inner border. The first storyboard, which we can refer to as the RevealBounce<\/code>, causes the event to “bounce” into view, and also causes the otherwise transparent background of the event to be filled with color temporarily.<\/p>\n\n\n\n

The second storyboard, which we can refer to as the RevealShimmer<\/code>, begins playing a few seconds after RevealBounce<\/code>, and causes the background of the event to “shimmer” slightly, further drawing attention to this newly arriving event.<\/p>\n\n\n\n

While these animations are very neat on their own, they end up blocking too much of the game’s screen when there are many of them appearing at once, as can be seen below:<\/p>\n\n\n\n

\"Shows
The “new item” reveal animation becomes a bit too much (in terms of screen real estate) when multiple events are happening per second.<\/figcaption><\/figure><\/div>\n\n\n\n

As Vision<\/em> is meant to be used as an overlay on a game, all the controls used in its various modules are mostly transparent, with the text designed to be readable on top of a variety of backgrounds. This is so we can still see everything we need to in the game we’re playing, and having too many of these just-described animations running goes against this goal.<\/p>\n\n\n\n

How To Cancel an Animation?<\/h2>\n\n\n\n

There are a number of ways we can cancel an in progress Storyboard<\/code>, most of which are fairly inconvenient when trying to rock a purely MVVM approach, where there’s almost no logic in the code-behind of our XAML views.<\/p>\n\n\n\n

Let’s go over these different ways.<\/p>\n\n\n\n

Trigger Actions<\/h3>\n\n\n\n

We typically begin playback of an animation using the BeginStoryboard<\/a><\/code> action, triggered by either an event or a change of a bound property. <\/p>\n\n\n\n

Likewise, we can also abort the playback of an animation using another trigger action, such as the StopStoryboard<\/a><\/code> and SkipStoryboardToFill<\/a><\/code> actions, which we can use like so:<\/p>\n\n\n

\n<StopStoryboard BeginStoryboardName="RevealBounceAction"\/>\n<\/pre>\n\n\n
This approach would be purely XAML-based, so it is rather palatable to my tastes at least; however, it does require a proper source of triggering, such as a RoutedEvent<\/code>. In this particular case, this requirement essentially precludes this approach from being a valid one to take, as the communication regarding a new child item must occur from a parent to its children, a direction of communication that routed events simply do not support.<\/p>\n\n\n\n
Individual Animation Methods<\/h3>\n\n\n\n
The next way of canceling the playback of an animation involves invoking methods on the individual animations found in a storyboard themselves. Doing it this way would obviously require us to use C# instead of XAML.<\/p>\n\n\n\n
Animations, such as the DoubleAnimation<\/a><\/code> type, have a BeginAnimation<\/code> method which accepts two parameters: the DependencyProperty<\/code> being animated, and the Storyboard<\/code> to use as the animation timeline.<\/p>\n\n\n\n
Calling this method while providing the DependencyProperty<\/code> and null<\/code> for the timeline will essentially cancel the animation.<\/p>\n\n\n
\ndoubleAnimation.BeginAnimation(UIElement.OpacityProperty, null);\n<\/pre>\n\n\n
This particular way of canceling an animation is painful for a number of reasons. First of all, we’d need to do it for every single animation that might exist in a particular storyboard, each of which is probably going to be problematic to retrieve in code-behind using a generalized method.<\/p>\n\n\n\n
Secondly, we would need to provide the actual DependencyProperty<\/code> that’s being animated. That’s another requirement that would end up being painful to do, especially if we mean to do so using a generalized solution.<\/p>\n\n\n\n
Storyboard Methods<\/h3>\n\n\n\n
A final way of canceling animations is to invoke the same methods on a Storyboard<\/code> instance that the trigger actions, described in the first approach above, invoke.<\/p>\n\n\n\n
Using a Storyboard<\/code> instance, we can call something like SkipToFill<\/code>, which only would require a target DependencyObject<\/code> to be passed as a parameter.<\/p>\n\n\n
\nstoryboard.SkipToFill(targetObject);\n<\/pre>\n\n\n
Using this approach will probably be the easiest if we wish to concoct a generalized solution for canceling in progress animations. All it requires are instances of the Storyboard<\/code> and target DependencyObject<\/code> in question.<\/p>\n\n\n\n
And, because it looks like we’re going to be using an approach requiring C# code, the best way to implement it, while maintaining our pure use of XAML, is with a custom attached behavior.<\/p>\n\n\n\n
A Behavior to Cancel Animations<\/h2>\n\n\n\n
Attached behaviors are simply attached properties that influence the way the target DependencyObject<\/code> instances they are attached to act. While you don’t always need a set of foundational objects to create your own behaviors, I will be using the Bad Echo Presentation framework<\/a>, part of the Bad Echo technologies<\/a> that I’ve been publishing.<\/p>\n\n\n\n
This behavior will be attached to the DependencyObject<\/code> being animated in XAML. It then requires two more things for its successful operation: 1) the storyboard resource to exert control over, and 2) a means of receiving a notification to go ahead and cancel the animation.<\/p>\n\n\n\n
Having to provide more than one piece of data to an attached behavior or property is an innately difficult thing to do in XAML. This is due to how these behaviors are typically applied to an element, which is by including them using attribute syntax, setting the attached property exposed by the behavior to a single binding or value.<\/p>\n\n\n\n
For example, we could attach a CancelableAnimationBehavior<\/code> to an object while providing the Storyboard<\/code> to control like so:<\/p>\n\n\n
\n<Border badEcho:CancelableAnimationBehavior.Storyboard="{StaticResource NameOfStoryboard}"\/>\n<\/pre>\n\n\n
But how do we also provide the notification object? You simply cannot using attribute syntax; rather, such things become much easier to do if you use property element syntax. This requires, however, a “properties” type that can hold the required pieces of data.<\/p>\n\n\n\n
This properties type cannot just be a simple class, however, as it most likely will require the ability to support bindings and therefore an inheritance context. Additionally, the behavior class has to also be crafted in a special way that can support an attachable child element.<\/p>\n\n\n\n
Luckily for us, or for me rather, the Bad Echo Presentation framework provides a number of powerful foundational behavior-related objects we can use to craft the types that we need.<\/p>\n\n\n\n
CancelableAnimationState<\/h3>\n\n\n\n
Let’s start off with the “properties” type that will hold the data the behavior will require in order to do its work. <\/p>\n\n\n\n
We’ll name this as the CancelableAnimationState<\/code>, and it will be an AttachableComponent<DependencyObject><\/code>. This is a type exposed by the Bad Echo Presentation framework, and one that essentially makes it a Freezable<\/a><\/code> with support for having an inheritance context.<\/p>\n\n\n\n
This type will expose two attached properties: 1) one for receiving a Storyboard<\/code> instance, and 2) one for receiving the notification object, which will be an instance of the Mediator<\/code> type, an object exposed by the Bad Echo Presentation framework that allows for simple message passing between disparate UI elements in an WPF application.<\/p>\n\n\n\n
Upon receiving a request to cancel its animations via the Mediator<\/code>, the CancelableAnimationState<\/code> will invoke an event that the behavior is listening to, in order for that behavior to go ahead and do its work.<\/p>\n\n\n\n
Here is the code for the CancelableAnimationState<\/code>:<\/p>\n\n\n
\n\/\/\/ <summary>\n\/\/\/ Provides attachable animation state data to a <see cref="CancelableAnimationBehavior"\/>\n\/\/\/ instance controlling it.\n\/\/\/ <\/summary>\n\/\/\/ <remarks>\n\/\/\/ This is meant to be provided to a <see cref="CancelableAnimationBehavior"\/> instance using\n\/\/\/ property element syntax in order to provide both messaging support as well as a means to\n\/\/\/ specify which storyboard we aim to make cancelable.\n\/\/\/ <\/remarks>\npublic sealed class CancelableAnimationState : AttachableComponent<DependencyObject>\n{\n    \/\/\/ <summary>\n    \/\/\/ Identifies the <see cref="Mediator"\/> dependency property.\n    \/\/\/ <\/summary>\n    public static readonly DependencyProperty MediatorProperty =\n        DependencyProperty.Register(nameof(Mediator),\n                                    typeof(Mediator),\n                                    typeof(CancelableAnimationState),\n                                    new PropertyMetadata(OnMediatorChanged));\n    \/\/\/ <summary>\n    \/\/\/ Identifies the <see cref="Storyboard"\/> dependency property.\n    \/\/\/ <\/summary>\n    public static readonly DependencyProperty StoryboardProperty =\n        DependencyProperty.Register(nameof(Storyboard),\n                                    typeof(Storyboard),\n                                    typeof(CancelableAnimationState));\n    \/\/\/ <summary>\n    \/\/\/ Occurs when a request to cancel the playback of <see cref="Storyboard"\/> has been made.\n    \/\/\/ <\/summary>\n    public event EventHandler? AnimationCanceling;\n\n    \/\/\/ <summary>\n    \/\/\/ Gets or sets the storyboard whose playback on the dependency object this component is\n    \/\/\/ attached to will be made cancelable.\n    \/\/\/ <\/summary>\n    public Storyboard? Storyboard\n    {\n        get => (Storyboard) GetValue(StoryboardProperty); \n        set => SetValue(StoryboardProperty, value);\n    }\n\n    \/\/\/ <summary>\n    \/\/\/ Gets or sets the mediator used to receive animation cancellation requests.\n    \/\/\/ <\/summary>\n    public Mediator? Mediator\n    {\n        get => (Mediator) GetValue(MediatorProperty);\n        set => SetValue(MediatorProperty, value);\n    }\n    \n    \/\/\/ <inheritdoc\/>\n    protected override Freezable CreateInstanceCore()\n        => new CancelableAnimationState();\n\n    private static void OnMediatorChanged(\n        DependencyObject sender, DependencyPropertyChangedEventArgs e)\n    {\n        var animationState = (CancelableAnimationState) sender;\n\n        if (e.OldValue is Mediator oldMediator) \n            animationState.UnregisterMediator(oldMediator);\n\n        if (e.NewValue is Mediator newMediator)\n            animationState.RegisterMediator(newMediator);\n    }\n    \n    private void RegisterMediator(Mediator mediator)\n        => mediator.Register(SystemMessages.CancelAnimationsRequested, \n                             MediateCancelAnimationsRequest);\n\n    private void UnregisterMediator(Mediator mediator)\n        => mediator.Unregister(SystemMessages.CancelAnimationsRequested, \n                               MediateCancelAnimationsRequest);\n\n    private void MediateCancelAnimationsRequest()\n    { \n        AnimationCanceling?.Invoke(TargetObject, EventArgs.Empty);\n    }\n}\n<\/pre>\n\n\n
CancelableAnimationBehavior<\/h3>\n\n\n\n
Let’s next go over the actual attached behavior that will do the animation canceling.<\/p>\n\n\n\n
This behavior, which we’ll name as the CancelableAnimationBehavior<\/code> will derive from CompoundBehavior<FrameworkElement, CancelableAnimationState><\/code>, which is another type made available by the Bad Echo Presentation framework. It allows for us to easily create a behavior that requires an AttachableComponent<T><\/code> to be able to be assigned to it using property element syntax.<\/p>\n\n\n\n
Once this behavior is told to cancel animations via the AnimationCanceling<\/code> event, it will do so by calling SkipToFill<\/code> on the attached data’s Storyboard<\/code> property. This method essentially fast forwards the animation to its end, and will leave us with a UI element at the end of its animation timeline (which, in this case, will appear as if it was never animated at all, as the animated properties return to their original values at the end).<\/p>\n\n\n\n
Here is the code for CancelableAnimationBehavior<\/code>:<\/p>\n\n\n
\n\/\/\/ <summary>\n\/\/\/ Provides a behavior that, when attached to a target dependency object, allows for the\n\/\/\/ immediate cancellation of an animation running on it. \n\/\/\/ <\/summary>\npublic sealed class CancelableAnimationBehavior \n    : CompoundBehavior<FrameworkElement, CancelableAnimationState>\n{\n    \/\/\/ <summary>\n    \/\/\/ Identifies the attached property that gets or sets this behavior's\n    \/\/\/ <see cref="CancelableAnimationState"\/> data, which ultimately specifies the storyboard\n    \/\/\/ this behavior will be canceling if requested to do so.\n    \/\/\/ <\/summary>\n    public static readonly DependencyProperty StateProperty \n        = RegisterAttachment();\n\n    \/\/\/ <summary>\n    \/\/\/ Gets the value of the <see cref="StateProperty"\/> attached property for a given\n    \/\/\/ <see cref="DependencyObject"\/>.\n    \/\/\/ <\/summary>\n    \/\/\/ <param name="source">The dependency object from which the property value is read.<\/param>\n    \/\/\/ <returns>\n    \/\/\/ The <see cref="CancelableAnimationState"\/> associated with <c>source<\/c>.\n    \/\/\/ <\/returns>\n    public static CancelableAnimationState GetState(DependencyObject source)\n    {\n        Require.NotNull(source, nameof(source));\n\n        return GetAttachment(source, StateProperty);\n    }\n\n    \/\/\/ <summary>\n    \/\/\/ Sets the value of the <see cref="StateProperty"\/> attached property on a given\n    \/\/\/ <see cref="DependencyObject"\/>.\n    \/\/\/ <\/summary>\n    \/\/\/ <param name="source">The dependency object to which the property is written.<\/param>\n    \/\/\/ <param name="value">The <see cref="CancelableAnimationState"\/> to set.<\/param>\n    public static void SetState(DependencyObject source, CancelableAnimationState value)\n    {\n        Require.NotNull(source, nameof(source));\n\n        source.SetValue(StateProperty, value);\n    }\n\n    \/\/\/ <inheritdoc\/>\n    protected override void OnValueAssociated(\n        FrameworkElement targetObject, CancelableAnimationState newValue)\n    {\n        base.OnValueAssociated(targetObject, newValue);\n\n        newValue.AnimationCanceling += HandleAnimationCanceling;\n    }\n\n    \/\/\/ <inheritdoc\/>\n    protected override void OnValueDisassociated(\n        FrameworkElement targetObject, CancelableAnimationState oldValue)\n    {\n        base.OnValueDisassociated(targetObject, oldValue);\n\n        oldValue.AnimationCanceling -= HandleAnimationCanceling;\n    }\n\n    \/\/\/ <inheritdoc\/>\n    protected override Freezable CreateInstanceCore()\n        => new CancelableAnimationBehavior();\n\n    private static DependencyProperty RegisterAttachment()\n    {\n        var behavior = new CancelableAnimationBehavior();\n\n        return DependencyProperty.RegisterAttached(\n            NameOf.ReadAccessorEnabledDependencyPropertyName(() => StateProperty),\n            typeof(CancelableAnimationState),\n            typeof(CancelableAnimationBehavior),\n            behavior.DefaultMetadata);\n    }\n\n    private static void HandleAnimationCanceling(object? sender, EventArgs e)\n    {\n        if (sender == null)\n            return;\n\n        var targetObject = (FrameworkElement)sender;\n\n        CancelableAnimationState state = GetAttachment(targetObject, StateProperty);\n        \n        state.Storyboard?.SkipToFill(targetObject);\n    }\n}\n<\/pre>\n\n\n
The State<\/code> attached property is shadowed<\/a>, something required in order for the attached data to function correctly.<\/p>\n\n\n\n
The Cancel Animations Request and Behavior Implementation<\/h3>\n\n\n\n
The message to cancel animations needs to be sent whenever a new item is being added to the collection of view models. The perfect place for this, in our case, is the view model that acts as the data context for the collection-based view: the ApocalypseViewModel<\/code>.<\/p>\n\n\n\n
The Mediator<\/code> used for communication will be exposed by this view model, and its use will occur within the OnChildrenChanged<\/code> override when a new item is being detected:<\/p>\n\n\n
\n\/\/\/ <summary>\n\/\/\/ Gets the mediator for messages to be sent or received through.\n\/\/\/ <\/summary>\npublic Mediator Mediator \n{ get; } = new();\n.\n.\n.\n\/\/\/ <inheritdoc\/>\nprotected override void OnChildrenChanged(CollectionPropertyChangedEventArgs e)\n{\n    base.OnChildrenChanged(e);\n\n    if (e.Action is CollectionPropertyChangedAction.Add)\n        Mediator.Broadcast(SystemMessages.CancelAnimationsRequested);\n}\n<\/pre>\n\n\n
We can then make use of our new behavior by applying it directly on the Border<\/code> controls whose animations need to be canceled. Here is the entire code for the ContentControl<\/code> style’s template used to decorate the child views — you will be able observe our new behavior being applied using property element syntax:<\/p>\n\n\n
\n<ControlTemplate TargetType="{x:Type ContentControl}">\n  <Border Margin="0,5,0,5">\n      <Border.Resources>\n          <badEcho:ArithmeticConverter x:Key="DirectionalConverter"\n                                       Operand="35"\n                                       Operation="Multiplication"\n                                       \/>\n          <Storyboard x:Key="RevealBounce">\n              <DoubleAnimation Storyboard.TargetProperty="(Border.Background).(GradientBrush.Opacity)" \n                               BeginTime="00:00:05"\n                               From="1"\n                               To="0"\n                               \/>\n              <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"\n                               Duration="00:00:01"\n                               From="{Binding DataContext.DirectionalCoefficient, \n                                              Converter={StaticResource DirectionalConverter},\n                                              RelativeSource={RelativeSource AncestorType={x:Type badEcho:View}}}"\n                               To="0">\n                  <DoubleAnimation.EasingFunction>\n                      <BounceEase Bounces="3"\n                                  EasingMode="EaseOut"\n                                  Bounciness="2"\n                                  \/>\n                  <\/DoubleAnimation.EasingFunction>\n              <\/DoubleAnimation>\n          <\/Storyboard>\n      <\/Border.Resources>\n      <Border.RenderTransform>\n          <TranslateTransform\/>\n      <\/Border.RenderTransform>\n      <Border.Background>\n          <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >\n              <GradientStop Color="#FFA4A2A3"\/>\n              <GradientStop Color="#FFD2D2D2" Offset="1"\/>\n          <\/LinearGradientBrush>\n      <\/Border.Background>\n      <Border.Triggers>\n          <EventTrigger RoutedEvent="Loaded">\n              <!--The BeginStoryboard action must have a name, as giving it name will result in the runtime making the\n                  resulting storyboard controllable, a capability this view requires.-->\n              <BeginStoryboard x:Name="RevealBounceAction" Storyboard="{StaticResource RevealBounce}"\/>\n          <\/EventTrigger>\n      <\/Border.Triggers>\n      <badEcho:CancelableAnimationBehavior.State>\n          <badEcho:CancelableAnimationState Storyboard="{StaticResource RevealBounce}"\n                                            Mediator="{Binding   DataContext.Mediator, \n                                                                 RelativeSource={RelativeSource AncestorType={x:Type badEcho:View}}}"\n                                            \/>\n      <\/badEcho:CancelableAnimationBehavior.State>\n      <Border>\n          <Border.Resources>\n              <Storyboard x:Key="RevealShimmer">\n                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)"\n                                                 BeginTime="00:00:02">\n                      <EasingDoubleKeyFrame KeyTime="00:00:03" \n                                            Value="0.8"\n                                            \/>\n                  <\/DoubleAnimationUsingKeyFrames>\n                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"\n                                                 BeginTime="00:00:02">\n                      <EasingDoubleKeyFrame KeyTime="00:00:03" Value="0.9"\/>\n                  <\/DoubleAnimationUsingKeyFrames>\n                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)"\n                                                 BeginTime="00:00:02">\n                      <EasingDoubleKeyFrame KeyTime="00:00:03" Value="1"\/>\n                  <\/DoubleAnimationUsingKeyFrames>\n                  <DoubleAnimation Storyboard.TargetProperty="(Border.Background).(GradientBrush.Opacity)"\n                                   BeginTime="00:00:05"\n                                   From="1"\n                                   To="0"\n                                   \/>\n              <\/Storyboard>\n          <\/Border.Resources>\n          <Border.Background>\n              <LinearGradientBrush EndPoint="1.7,1" StartPoint="-0.5,0">\n                  <GradientStop Color="#00FFFFFF"\/>\n                  <GradientStop Color="#FFFFFFFF" Offset="0.1"\/>\n                  <GradientStop Color="#00FFFFFF" Offset="0.2"\/>\n              <\/LinearGradientBrush>\n          <\/Border.Background>\n          <Border.Triggers>\n              <EventTrigger RoutedEvent="Loaded">\n                  <!--The BeginStoryboard action must have a name, as giving it name will result in the runtime making the\n                      resulting storyboard controllable, a capability this view requires.-->\n                  <BeginStoryboard x:Name="RevealShimmerAction" Storyboard="{StaticResource RevealShimmer}"\/>\n              <\/EventTrigger>\n          <\/Border.Triggers>\n          <badEcho:CancelableAnimationBehavior.State>\n              <badEcho:CancelableAnimationState Storyboard="{StaticResource RevealShimmer}" \n                                                Mediator="{Binding   DataContext.Mediator, \n                                                                     RelativeSource={RelativeSource AncestorType={x:Type badEcho:View}}}"\n                                                \/>\n          <\/badEcho:CancelableAnimationBehavior.State>\n          <ContentPresenter\/>\n      <\/Border>\n  <\/Border>\n<\/ControlTemplate>\n<\/pre>\n\n\n
The full code can be found here<\/a> if you wish to see it.<\/p>\n\n\n\n
The Results<\/h2>\n\n\n\n
The Apocalypse module for Vision<\/em> now successfully cancels all extraneous animation playback upon a new item being added:<\/p>\n\n\n\n
\"Shows
Running animations now get canceled whenever a new item is added. Beautiful.<\/figcaption><\/figure><\/div>\n\n\n\n
A wonderful result, implemented in an elegant fashion!<\/p>\n\n\n\n
I hope you found this article illuminating. Until next time!<\/p>\n","protected":false},"excerpt":{"rendered":"
Not long ago, I had the opportunity to debut the new Apocalypse module for my Omnified Vision overlay application, live […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[42,64,70],"yoast_head":"\r\nCanceling WPF Animations Made Simple - omni's hackpad<\/title>\r\n<meta name=\"description\" content=\"While working on Vision, I found canceling in progress WPF animations to be harder than expected. Let's go over the way to do it, elegantly.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/badecho.com\/index.php\/2022\/01\/20\/canceling-animations\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Canceling WPF Animations Made Simple - omni's hackpad\" \/>\r\n<meta property=\"og:description\" content=\"While working on Vision, I found canceling in progress WPF animations to be harder than expected. Let's go over the way to do it, elegantly.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/badecho.com\/index.php\/2022\/01\/20\/canceling-animations\/\" \/>\r\n<meta property=\"og:site_name\" content=\"omni's hackpad\" \/>\r\n<meta property=\"article:published_time\" content=\"2022-01-20T14:06:48+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2022-11-16T01:18:25+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/badecho.com\/wp-content\/uploads\/2022\/01\/CancelAnimations.png\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/badecho.com\/#website\",\"url\":\"https:\/\/badecho.com\/\",\"name\":\"omni's hackpad\",\"description\":\"Game Code Disassembly. Omnified Modification. Madness.\",\"publisher\":{\"@id\":\"https:\/\/badecho.com\/#\/schema\/person\/3de67496328be7ae6e1f52faf582e9d2\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/badecho.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/badecho.com\/index.php\/2022\/01\/20\/canceling-animations\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/badecho.com\/wp-content\/uploads\/2022\/01\/CancelAnimations.png\",\"width\":857,\"height\":191,\"caption\":\"Canceling WPF Animations Made Simple\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/badecho.com\/index.php\/2022\/01\/20\/canceling-animations\/#webpage\",\"url\":\"https:\/\/badecho.com\/index.php\/2022\/01\/20\/canceling-animations\/\",\"name\":\"Canceling WPF Animations Made Simple - omni's hackpad\",\"isPartOf\":{\"@id\":\"https:\/\/badecho.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/badecho.com\/index.php\/2022\/01\/20\/canceling-animations\/#primaryimage\"},\"datePublished\":\"2022-01-20T14:06:48+00:00\",\"dateModified\":\"2022-11-16T01:18:25+00:00\",\"description\":\"While working on Vision, I found canceling in progress WPF animations to be harder than expected. Let's go over the way to do it, elegantly.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/badecho.com\/index.php\/2022\/01\/20\/canceling-animations\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/badecho.com\/index.php\/2022\/01\/20\/canceling-animations\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/badecho.com\/index.php\/2022\/01\/20\/canceling-animations\/#webpage\"},\"author\":{\"@id\":\"https:\/\/badecho.com\/#\/schema\/person\/3de67496328be7ae6e1f52faf582e9d2\"},\"headline\":\"Canceling WPF Animations Made Simple\",\"datePublished\":\"2022-01-20T14:06:48+00:00\",\"dateModified\":\"2022-11-16T01:18:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/badecho.com\/index.php\/2022\/01\/20\/canceling-animations\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/badecho.com\/#\/schema\/person\/3de67496328be7ae6e1f52faf582e9d2\"},\"image\":{\"@id\":\"https:\/\/badecho.com\/index.php\/2022\/01\/20\/canceling-animations\/#primaryimage\"},\"keywords\":\"C#,WPF,XAML\",\"articleSection\":\"General Dev\",\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/badecho.com\/#\/schema\/person\/3de67496328be7ae6e1f52faf582e9d2\",\"name\":\"Matt Weber\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/badecho.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7e345ac2708b3a41c7bd70a4a0440d41?s=96&d=mm&r=g\",\"caption\":\"Matt Weber\"},\"logo\":{\"@id\":\"https:\/\/badecho.com\/#personlogo\"}}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/badecho.com\/index.php\/wp-json\/wp\/v2\/posts\/2180"}],"collection":[{"href":"https:\/\/badecho.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/badecho.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/badecho.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/badecho.com\/index.php\/wp-json\/wp\/v2\/comments?post=2180"}],"version-history":[{"count":14,"href":"https:\/\/badecho.com\/index.php\/wp-json\/wp\/v2\/posts\/2180\/revisions"}],"predecessor-version":[{"id":2529,"href":"https:\/\/badecho.com\/index.php\/wp-json\/wp\/v2\/posts\/2180\/revisions\/2529"}],"wp:attachment":[{"href":"https:\/\/badecho.com\/index.php\/wp-json\/wp\/v2\/media?parent=2180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/badecho.com\/index.php\/wp-json\/wp\/v2\/categories?post=2180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/badecho.com\/index.php\/wp-json\/wp\/v2\/tags?post=2180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}