Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )
Scene (Storyboard), it also has a version called the story is enhanced timeline, first a group of independent organizations in a Storyboard animation elements, arrangements for their collaboration, and specify which elements of animation which UI, which property is responsible for the completion of (keyframe animation is a set of animated serial execution, the scene is a set of parallel execution of the animation), but also has the ability to control animation playback - pause, stop and play position. Storyboard class provides the basic functionality that can be used TargetProperty TargetName properties and points to a specific attribute and specific elements (TargetProperty attributes and additional attributes are attributes TargetName)
XAML Code:
<Grid Margin="6">
<!--页面布局-->
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
<!--（红）-->
<Border BorderBrush="Gray" BorderThickness="1" Grid.Row="0">
<Ellipse x:Name="ballR" Height="36" Width="36" Fill="Red" HorizontalAlignment="Left">
<Ellipse.RenderTransform>
<TranslateTransform x:Name="ttR"/>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<!--（绿）-->
<Border BorderBrush="Gray" BorderThickness="1" Grid.Row="1">
<Ellipse x:Name="ballG" Height="36" Width="36" Fill="Green" HorizontalAlignment="Left">
<Ellipse.RenderTransform>
<TranslateTransform x:Name="ttG"/>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<!--（蓝）-->
<Border BorderBrush="Gray" BorderThickness="1" Grid.Row="2">
<Ellipse x:Name="ballB" Height="36" Width="36" Fill="Blue" HorizontalAlignment="Left">
<Ellipse.RenderTransform>
<TranslateTransform x:Name="ttB"/>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Button Content="点击" Grid.Column="1" Grid.RowSpan="3" Height="153" VerticalAlignment="Top" Click="Button_Click"/>
</Grid>C # code behind:
private void Button_Click(object sender, RoutedEventArgs e)
{
Duration duration = new Duration(TimeSpan.FromMilliseconds(600));
//红色小球匀速移动
DoubleAnimation daRx = new DoubleAnimation();
daRx.Duration = duration;
daRx.To = 400;
//绿色小球变速运动
DoubleAnimationUsingKeyFrames dakGx = new DoubleAnimationUsingKeyFrames();
dakGx.Duration = duration;
SplineDoubleKeyFrame keyFrameG = new SplineDoubleKeyFrame(400, KeyTime.FromPercent(1.0));
keyFrameG.KeySpline = new KeySpline(1, 0, 0, 1);
dakGx.KeyFrames.Add(keyFrameG);
//蓝色小球变速运动
DoubleAnimationUsingKeyFrames dakBx = new DoubleAnimationUsingKeyFrames();
dakBx.Duration = duration;
SplineDoubleKeyFrame kfB = new SplineDoubleKeyFrame(400, KeyTime.FromPercent(1.0));
kfB.KeySpline = new KeySpline(0, 1, 1, 0);
dakBx.KeyFrames.Add(kfB);
//创建场景
Storyboard storyboard = new Storyboard();
Storyboard.SetTargetName(daRx, "ttR");
Storyboard.SetTargetProperty(daRx, new PropertyPath(TranslateTransform.XProperty));
Storyboard.SetTargetName(dakGx, "ttG");
Storyboard.SetTargetProperty(dakGx, new PropertyPath(TranslateTransform.XProperty));
Storyboard.SetTargetName(dakBx, "ttB");
Storyboard.SetTargetProperty(dakBx, new PropertyPath(TranslateTransform.XProperty));
storyboard.Duration = duration;
storyboard.Children.Add(daRx);
storyboard.Children.Add(dakGx);
storyboard.Children.Add(dakBx);
storyboard.Begin(this);
storyboard.Completed += (a, b) => { MessageBox.Show(ttR.X.ToString()); };
}
Event triggers : event triggers can be defined in several locations.
- In the style (Style.Triggers collection).
- In the data template (DataTemplate.Triggers collection).
- In the control template (ControlTemplate. Triggers collection).
- Event triggers defined directly in the element (FrameworkElement.Triggers collection).
There are three basic types of WPF Triggers: Triggers properties, data triggers and event triggers. The most common use of triggers is associated with animation
XAML Code:
<Button Width="200" Height="80" Content="事件触发器" FontSize="20">
<!--元素触发器-->
<Button.Triggers>
<!--定义事件触发器-->
<EventTrigger RoutedEvent="Button.Click">
<!--执行一个动作-->
<EventTrigger.Actions>
<!--开始故事版-->
<BeginStoryboard>
<!--创建一个故事版-->
<Storyboard>
<!--创建一个-->
<DoubleAnimation Storyboard.TargetProperty="Width" To="350" RepeatBehavior="Forever" Duration="0:0:3"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
<!--点击按钮“事件触发器”的时候便开始动画，宽度变成350，然后一直循环动画-->
Control scenario categories:
-
- PauseStoryboard: Stop the animation and maintains the current position
- ResumeStoryboard: resume suspended animation
- StopStoryboard: Stop the animation and animation clock reset to the starting position
- SeekStoryboard: animation timeline to jump to a specific position, if the current movie is playing, it continues playing from the new position, if the current animation is paused, you remain suspended.
- SetStoryboardSpeedRatio: SpeedRatio changed attribute value of the entire scene.
- SkipStoryboardToFill: scene is moved to the end of the time line. FillBehavior property to HoldEnd, animation remain the final value.
- RemoveStoryboard: remove the scene, all animation to stop running and return property to its original value, the last set.
For the successful implementation of these actions, all the triggers must be defined in the same Triggers collection, if the action triggers and PauseStoryboard BeginStoryboard action trigger placed into a different collection, PauseStoryboard action will not work.
Scene Event:
- Completed: Animation has reached the end
- CurrentGlobalSpeedInvalidated: speed changes, or animation is suspended, resumed, stopped or moved to a new location.
- CurrentStateInvalidated: the motion has started or ended.
- CurrentTimeInvalidated: Animated clock has moved forward a step, is to change the animation. When the animation start, stop, or will lead to the end of the event.
- RemoveRequested: animation is being removed.