Techniques for WCAG 2.0

Skip to Content (Press Enter)

On this page:

-

SL11: Pausing or Stopping A Decorative Silverlight Animation

Applicability

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agents Supported for general information on user agent support.

Description

The objective of this technique is to associate a "Pause" or "Stop" action for a Silverlight animation with a user interface control. This enables a user to pause or stop an animation in Silverlight content.

The Silverlight animation system is generalized such that nearly any Silverlight property of type Double, Point or Color can be animated, or a property can cycle through discrete object values. Thus the possibilities for which properties in the user interface can be animated are quite broad. The general technique shown can be used to pause or stop any Silverlight animation, including those that are purely decorative.

Pause versus Stop

Silverlight has two discrete methods for animation control: a Pause method and a Stop method. The difference in behavior is that Pause uses whatever the last value was while the animation was still running, and holds that value permanenently (unless the animation is restarted). Stop sets the value to be whatever value existed before the animation was started. However, calling Stop on an animation often results in a behavior that looks like a "reset" to the user; this is particularly true if the animation is animating an element's position on screen. In many cases, what might be a conceptual "stop" for the user is better accomplished by a "permanent Pause" in the Silverlight animation API. Whether to call Pause or Stop is an aesthetic decision and application authors can experiment to see which behavior has the best appearance. If application authors choose to use Stop, authors can simply replace the call to .Pause() with a call to .Stop() for any code that is based on this technique's example.

Examples

Example 1: Pausing a decorative animation

The following is the XAML UI. The animated object and the animation behavior are both described in XAML, as is the control that users can activate to pause the animation. 

<UserControl x:Class="PauseBouncyBall.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
 <UserControl.Resources>
   <Storyboard x:Key="anim" RepeatBehavior="Forever" >
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Ball"
          Storyboard.TargetProperty="(Canvas.Top)"
        FillBehavior="HoldEnd" AutoReverse="True">
               <EasingDoubleKeyFrame Value="100" KeyTime="00:00:01">
                   <EasingDoubleKeyFrame.EasingFunction>
                       <BounceEase Bounces="-1" EasingMode="EaseIn"/>
                   </EasingDoubleKeyFrame.EasingFunction>
               </EasingDoubleKeyFrame>
           </DoubleAnimationUsingKeyFrames>
   </Storyboard>
 </UserControl.Resources>
 <Canvas x:Name="LayoutRoot" Background="White" Height="600" Width="800">
   <Ellipse Name="Ball" Fill="Red" Width="20" Height="20" Canvas.Top="200">
       <Ellipse.RenderTransform>
           <TransformGroup>
               <TranslateTransform/>
           </TransformGroup>
       </Ellipse.RenderTransform>
   </Ellipse>
   <Button HorizontalAlignment="Left" Width="200" Click="Button_Click">Stop the bouncy ball please!</Button>
 </Canvas>
</UserControl>

The following is the C# logic. One function is the "page" constructor, which is what starts and loops the animation. The other function is the event handler for the UI control (a button). The event handler retrieves the animation definition from the page resources, and calls the Pause method on the animation. 

       public MainPage()
       {
           InitializeComponent();
           (this.Resources["anim"] as Storyboard).Begin();
       }
       private void Button_Click(object sender, RoutedEventArgs e)
       {
           (this.Resources["anim"] as Storyboard).Pause();
       }

This example is shown in operation in the working example of Pause Bouncy Ball.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Using a browser that supports Silverlight, open an HTML page that references a Silverlight application through an object tag. For Silverlight content with moving, blinking, scrolling or auto-updating content that is the result of a running Silverlight animation:

  2. Check for a mechanism to stop the movement, blinking, scrolling or auto-updating.

  3. Check that the movement, blinking, scrolling or auto-updating stops when the mechanism is activated and does not restart by itself.

  4. For pause, check that the animation can be restarted using a start mechanism.

Expected Results

#3 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

Techniques are Informative

Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques. For important information about techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG 2.0.

This Web page is part of Techniques and Failures for Web Content Accessibility Guidelines 2.0. The entire document is also available as a single HTML file. See the The WCAG 2.0 Documents for an explanation of how this document fits in with other Web Content Accessibility Guidelines (WCAG) 2.0 documents. To send public comments, please follow the Instructions for Commenting on WCAG 2.0 Documents.

Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.