Storyboard and storyboard

Storyboard and storyboard

Sources in the source region: http://yunpan.cn/cFJR5zcMNtBq6 access password ac7a

 

You can use Storyboard to implement the dynamic loading effect.

1. keep changing the background colors when you are on WINDOWS system security.

<Button x: Name = "testBtn" Content = "Button" HorizontalAlignment = "Left" Margin = "62,29, 234 "VerticalAlignment =" Top "Height =" 53 "Width =" "> <Button. background> <SolidColorBrush x: Name = "testBtnBack" Color = "Black"> </SolidColorBrush> </Button. background> <Button. triggers> <EventTrigger RoutedEvent = "Button. loaded "> ----- when the control is added, a dynamic <BeginStoryboard> ----------- indicates the starting line <Storyboard ----- the real dynamic Board
RepeatBehavior = "Forever" -------- unlimited cycle
AutoReverse = "True" ------------ auto-reverse changes from A to B, and then from B to.
> <ColorAnimation From = "Red" ----------------------------- | changes From colors to colors. You can use Binding, converter allocates a mirror color To = "Blue" --------------------------------- | Duration = "0: 0: 2" ----------------------- variable time, H: M: S, which can use small numbers. Storyboard. targetName = "testBtnBack" -------------- which control is used in Storyboard. targetProperty = "Color" -------------- adequacy/> </Storyboard> </BeginStoryboard> </EventTrigger> </Button. triggers> </Button>

The above section of The XAML generation shows the configuration of the background colors from RED to BLUE.

In this example, we use the single-touch dynamic ColorAnimation, and Color represents the natural type. In the example above, the background natural Color type is Color, animation represents an Animation, so this thing represents a color-changing, simple Animation.

2. Simple operation

The following lists the single-dataset actions:

DoubleAnimation	Dynamic type: Double or int.
PointAnimation	Dynamic type is the dynamic type of Point.
ColorAnimation	Dynamic type is the dynamic type of Color.

 

For example, DoubleAnimation, we can change the font size, degree, and height.

Therefore, to change the position of the control, XAML does not support the attention of Margin. Top. You must use RenderTransform. As an example, we can see the effect of a ball being moved up or down:

<Ellipse x: Name = "ball" Fill = "# FFF4F4F5" HorizontalAlignment = "Left" Height = "52" Margin = "45,226, 0.5 "Stroke =" Black "verticalignment =" Top "Width =" 52 "RenderTransformOrigin =" 0.5, "> <Ellipse. renderTransform> ------------- use Render <TranslateTransform/> </Ellipse. renderTransform> <Ellipse. triggers> <EventTrigger RoutedEvent = "Ellipse. loaded "> <BeginStoryboard> <Storyboard> <DoubleAnimationUsingKeyF Rames ------ multi-region. I will discuss it later. Storyboard. TargetName = "ball" Storyboard. TargetProperty = "(UIElement. RenderTransform). (TranslateTransform. Y )"------ Change the position of Y. Duration = "0: 0 2" RepeatBehavior = "Forever" EnableDependentAnimation = "True"------ This thing must be set to true ..AutoReverse = "True"> <EasingDoubleKeyFrame KeyTime = "0: 0: 2" Value = "240"> ----- this attention type is multiple classification types, which will be discussed later. <EasingDoubleKeyFrame. easingFunction> <BackEase EasingMode = "EaseOut"/> </EasingDoubleKeyFrame. easingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse. triggers> </Ellipse>

 

 

3. Multiple Dynamic Route entries

DoubleAnimationUsingKeyFrames		All use the dynamic orders of Double Type Single orders.
-DiscreteDoubleKeyFrame		There is no effect of instant changes. For example, if the degree of parallelism changes from 0 to 200, it changes directly to 200. If there is a hop, it usually feels abrupt.
-LinearDoubleKeyFrame		Transformation is the effect of disruptive changes, such as the degree from 0 to 200, from 0 to 10, to 20, to 50, and then to 200, there is a slow change effect.
-SplineDoubleKeyFrame		, Which can be used to view the definition of and further understand it. Images blog: http://blog.csdn.net/tcjiaan/article/details/7550506
-EasingDoubleKeyFrame		The effects of disruptive changes. Take a picture of Blog: http://www.cnblogs.com/xwlyun/archive/2012/09/11/2680579.html
PointAnimationUsingKeyFrames		All use the dynamic sequence of Point-type orders.
ColorAnimationUsingKeyFrames		All use the dynamic sequence of Point-type orders.
ObjectAnimationUsingKeyFrames		You can use any kind of single orders.

It should be noted that each sub‑type has four types, namely Discrete, Linear, Spline, and Easing. For example, PointAnimationUsingKeyFrames has DiscretePointKeyFrame, LinearPointKeyFrame, SplinePointKeyFrame, and EasingPointKeyFrame.

In contrast, ObjectAnimationUsingKeyFrames can only use DeiscreteObjectKeyFrame and customize the subject motion. This item will be introduced later.

DeiscreteObjectKeyFrame can be any type, that is, it is not limited to double, color, point, but you can also see that it uses Deiscrete, so it can only be changed immediately.

 

Each sub-Shard has two features: KeyTime and Value.

KeyTime indicates the time of the period, and Value indicates the compile Value set in DoubleAnimationUsingKeyFrames.

 

Now, I have a BUTTON that can be used to jump to any position and maintain the maximum length:

<Button x:Name="widthButton" Content="Button" HorizontalAlignment="Left" Height="100" Margin="251,413,0,0" VerticalAlignment="Top" Width="124">            <Button.Triggers>                <EventTrigger RoutedEvent="Button.Loaded">                    <BeginStoryboard>                        <Storyboard>                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Duration="0:0:2" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="widthButton" Storyboard.TargetProperty="Width">                                <LinearDoubleKeyFrame KeyTime="0" Value="100" />                                <LinearDoubleKeyFrame KeyTime="0:0:1" Value="200" />                                <LinearDoubleKeyFrame KeyTime="0:0:2" Value="300" />                            </DoubleAnimationUsingKeyFrames>                            <ObjectAnimationUsingKeyFrames EnableDependentAnimation="True" Duration="0:0:9" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="widthButton" Storyboard.TargetProperty="Margin">                                <DiscreteObjectKeyFrame KeyTime="0" Value="0,100,0,0" />                                <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="100,100,0,0" />                                <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="100,100,100,0" />                                <DiscreteObjectKeyFrame KeyTime="0:0:3" Value="0,200,100,0" />                                <DiscreteObjectKeyFrame KeyTime="0:0:4" Value="300,100,100,0" />                                <DiscreteObjectKeyFrame KeyTime="0:0:5" Value="0,400,100,0" />                                <DiscreteObjectKeyFrame KeyTime="0:0:6" Value="10,400,100,0" />                                <DiscreteObjectKeyFrame KeyTime="0:0:7" Value="90,160,100,0" />                                <DiscreteObjectKeyFrame KeyTime="0:0:8" Value="28,10,100,0" />                                <DiscreteObjectKeyFrame KeyTime="0:09" Value="244,100,0,0" />                            </ObjectAnimationUsingKeyFrames>                        </Storyboard>                    </BeginStoryboard>                </EventTrigger>            </Button.Triggers>        </Button>

 

 

4. System subject dynamics.

 

API	Description
AddDeleteThemeTransition	Provides an animation transition mode when a child object or content is added or deleted to the control. Generally, a control is a project container.
ContentThemeTransition	Provides an animated transition mode when the content of the control is changed. You can apply AddDeleteThemeTransition before applying it.
EntranceThemeTransition	Provides an animated transition mode for the first display of the control.
ReorderThemeTransition	Provides an animated transition representation for the list-View Control item change order. It usually appears as a result of the drag-and-drop operation. Different controls and themes may have different animation features.
RepositionThemeTransition	Provides an animation transition mode when the widget changes its position.

 

API	Description
DropTargetItemThemeAnimation	Apply a pre-configured animation to a potential drag-and-drop target element.
FadeInThemeAnimation	When a widget appears for the first time, you must use its pre-configured opacity animation.
FadeOutThemeAnimation	The pre-configured opacity animation of the control should be used when the control is deleted or hidden from the UI.
PopInThemeAnimation	The pre-configured animations of widgets are used when they are displayed. This animation combines opacity and conversion.
PopOutThemeAnimation	The pre-configuration animation of the widgets when they are closed or deleted. This animation combines opacity and conversion.
RepositionThemeAnimation	Pre-configured animation applied when the object is replaced.
SplitCloseThemeAnimation	Use the split animation to display the pre-configured animation of the target UI.
PointerDownThemeAnimation	Pre-configured animation for users to click or click a project or element operation.
PointerUpThemeAnimation	User operation pre-configuration animation running after clicking a project or element (pointer no longer hovering above.
SplitOpenThemeAnimation	Use the split animation to display the pre-configured animation of the target UI.

The above table is written from the following blog:

Http://www.cnblogs.com/hebeiDGL/archive/2012/10/27/2742293.html

For example, add an animation for adding or removing elements to the GridView:

<GridView>            <GridView.Items>                <AddDeleteThemeTransition />            </GridView.Items></GridView>

 

Add an input notebook for a notebook:

                            <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="69" Margin="-13,93,0,-117" VerticalAlignment="Top" Width="115">                                <Button.Transitions>                                    <TransitionCollection>                                        <EntranceThemeTransition FromHorizontalOffset="500" FromVerticalOffset="500"  />                                    </TransitionCollection>                                </Button.Transitions>                            </Button>

 

 

5. The agent controls the playing and stopping of a dynamic video.

All of the above examples are auto-playing animations. In fact, we can start and stop them manually.

I made a single change in growth:

<Grid. resources> <Storyboard x: Name = "framesBoard"> ---- mark a Name to perform operations <DoubleAnimationUsingKeyFrames Storyboard. targetName = "frames" Storyboard. targetProperty = "Width" Duration = "0:0:2" EnableDependentAnimation = "True"> <LinearDoubleKeyFrame KeyTime = "0:2 2" Value = "500"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </ grid. resources>

        private void frames_Click(object sender, RoutedEventArgs e)        {            framesBoard.Begin();        }