Six animation effects of the WPF series of games (1)

Original: The six animated effects of the WPF series of games (1)

This article is mainly for the interface animation effect processing. First, when the interface is turned on or off, it produces a dynamic effect rather than a stiff display or disappearance (for example). Second, when the mouse is placed on the close window icon, so that it appears flashing effect. These effects are implemented through storyboard and EventTrigger.

1. Start with a simple one, to add a flashing effect to the close icon, you first need to include a close window icon in the ScrollViewer.

... ...<ScrollViewerName= "Queryscrollviewer"scrollviewer.verticalscrollbarvisibility= "Visible" > <StackPanelOrientation= "Vertical" ><!--Close the window icon, set to 20x20<ImageSource= "Image/close.png"Name= "Closeimage"Height= " the"Width= " the"Cursor= "Hand"Margin= "5"HorizontalAlignment= "Right" > <Image.tooltip>Close</Image.tooltip> </Image> <GridName= "Querygrid" ></Grid> </StackPanel></ScrollViewer>... ...

2. Add a flashing effect to the window.resources, which doubleanimation for the width of the closeimage and is in a repeating state. This ensures that the mouse is always flashing when it is on it.

<window.resources> <Storyboardx:Key= "Flashcloseimage" > <DoubleAnimationStoryboard.TargetName= "Closeimage"
                        Storyboard.TargetProperty= "Width" to= " the"Duration= "0:0:0.8"
                        RepeatBehavior= "Forever" ></DoubleAnimation> </Storyboard>
    ... ...</window.resources>

3. The effect is added, and then it is necessary to increase the active event (EventTrigger), one is the mouse (MouseEnter) Start flashing, the other is the mouse left (MouseLeave) stop. Also, because this icon controls the window closing effect, add a click (MouseLeftButtonDown) event to it (the event will continue to be discussed later).

<window.triggers><!--start flashing, and you want to call x:key= "Flashcloseimage" in Window.Resources<EventTriggerSourceName= "Closeimage"RoutedEvent= "Image.mouseenter" > <BeginStoryboardName= "Closeimagebeginstoryboard"
                       Storyboard="{StaticResourceFlashcloseimage} ">
</BeginStoryboard> </EventTrigger><!--stop flashing, its object is the top Closeimagebeginstoryboard --<EventTriggerSourceName= "Closeimage"RoutedEvent= "Image.mouseleave" > <StopstoryboardBeginstoryboardname= "Closeimagebeginstoryboard" >
</Stopstoryboard> </EventTrigger><!--Close window events, later<EventTriggerSourceName= "Closeimage"RoutedEvent= "Image.mouseleftbuttondown" > <BeginStoryboardName= "Closequerycanvasstoryboard"
                       Storyboard="{StaticResourceClosequerycanvas} ">
</BeginStoryboard> </EventTrigger>
   ... ... </window.triggers> 

4. All animation effects and events are added, so you can see the effects:

Cond......

Six animation effects of the WPF series of games (1)