WPF：Animation动画--PropertyAnimation属性动画触发的方式

时间 2019-12-07

标签 wpf animation 动画 propertyanimation 属性触发方式繁體版

原文原文链接

OpacityAnimation不透明度动画

各元素不透明的属性：
见代码中各类动画目标属性的不透明度引用.动画

<Page.Triggers>
<Page.Triggers>
    <EventTrigger RoutedEvent="Page.Loaded">
      <BeginStoryboard Name="myBeginStoryboard">
        <Storyboard Name="myStoryboard">
          <DoubleAnimation Storyboard.TargetName="opacityAnimatedButton"
            Storyboard.TargetProperty="(Button.Opacity)" From="1" To="0"
            Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
          <DoubleAnimation Storyboard.TargetName="opacityAnimatedImage"
            Storyboard.TargetProperty="(Image.Opacity)" From="1" To="0"
            Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
          <DoubleAnimation Storyboard.TargetName="opacityAnimatedBrushButton"
            Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Opacity)" From="1" To="0"
            Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
          
          <ColorAnimation  Storyboard.TargetName="opacityAnimatedColorRectangle"
            Storyboard.TargetProperty="(Rectangle.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
            Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever">
            <ColorAnimation.By>
             <Color ScA="-1.0" ScR="0.0" ScG="0.0" ScB="0.0" />
            </ColorAnimation.By>
          </ColorAnimation>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Page.Triggers>

PropertyAnimation属性动画触发的方式

一、FrameworkElement.Triggers --EventTrigger-RoutedEvent--BeginStorybordspa

FrameworkElement.Triggers下的事件触发

<!-- Animates the width of the first button 
       from 200 to 300. -->         
  <EventTrigger RoutedEvent="Button.Click">
    <BeginStoryboard>
      <Storyboard>           
        <DoubleAnimation Storyboard.TargetName="myWidthAnimatedButton"
          Storyboard.TargetProperty="Width"
          From="200" To="300" Duration="0:0:3" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
</Button.Triggers>

二、Style.Triggers--Tirgger-Property/Value--Trigger.EnterActions/ExitActions----BeginStorybord指针

Style.Triggers下属性触发Trigger.EnterActions/ExitActions

<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">

      <Trigger.EnterActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity"
              To="1" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
      <Trigger.ExitActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity"
              To="0.25" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </Trigger.ExitActions>          
    </Trigger>               
  </Style.Triggers>    
</Style>

三、Style.Triggers--EventTrigger-RoutedEvent--EventTrigger.Actions--BeginStorybordcode

Style.Triggers下的事件触发的Actions

<!-- Animates the button's opacity on mouse over. -->
    <EventTrigger RoutedEvent="Button.MouseEnter">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetProperty="(Button.Opacity)"
              From="1.0" To="0.5" Duration="0:0:0.5" AutoReverse="True"
              RepeatBehavior="Forever" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>  
    
    <!-- Returns the button's opacity to 1 when the mouse leaves. -->
    <EventTrigger RoutedEvent="Button.MouseLeave">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetProperty="(Button.Opacity)"
              To="1" Duration="0:0:0.1" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>   
    
    <!-- Changes the button's color when clicked. 
         Notice that the animation can't target the
         SolidColorBrush used to paint the button's background
         directly. The brush must be accessed through the button's
         Background property. -->
    <EventTrigger RoutedEvent="Button.Click">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation 
              Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
              From="Orange" To="White" Duration="0:0:0.1" AutoReverse="True" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>  
  </Style.Triggers>
</Style>

四、ControlTemplate.Triggers--EventTrigger--BeginStorybord对象

ControlTemplate.Triggers可包含事情触发及属性触发
需注明控件模板的事件路由RoutedEvent及源元素名称SourceName=
或属性触发器Trigger的Property及值断定Value 、源元素名称SourceName=

<ControlTemplate.Triggers>

    <!-- Event Trigger Example -->
    <EventTrigger RoutedEvent="Border.MouseEnter" SourceName="innerBorder">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="innerBorderBackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="White" To="#CCCCFF"
            Duration="0:0:3" AutoReverse="True" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>

    <!-- Property Trigger Example -->
    <Trigger Property="IsMouseOver" Value="True" SourceName="contentPanel">
      <Trigger.EnterActions>
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation 
              Storyboard.TargetName="contentPanelBrush" 
              Storyboard.TargetProperty="Color"
              To="Purple" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
      <Trigger.ExitActions>
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation 
              Storyboard.TargetName="contentPanelBrush" 
              Storyboard.TargetProperty="Color"
              To="White" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </Trigger.ExitActions>
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

五、Styel.Triggers--DataTrigger-Binding/Value--DataTrigger.EnterActions/ExitActions--BeginStorybord事件

数据触发器需设置数据绑定源或路径Binding、值判断Value。

<Style.Triggers>
    <DataTrigger 
     Binding="{Binding XPath=@Stock}" 
     Value="out">
      <DataTrigger.EnterActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
             Storyboard.TargetProperty="Opacity"
             From="0.25" To="0.5" Duration="0:0:1" 
             RepeatBehavior="Forever"
             AutoReverse="True"/>
          </Storyboard>
        </BeginStoryboard>
      </DataTrigger.EnterActions>
      <DataTrigger.ExitActions>
        <BeginStoryboard> 
          <Storyboard FillBehavior="Stop">
            <DoubleAnimation
              Storyboard.TargetProperty="Opacity"
              To="1" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>  
      </DataTrigger.ExitActions>
      
    </DataTrigger>
  </Style.Triggers>

扩展：ip

TriggerBase 类：表示用于在 Style 对象内指定条件值的基类。ci

WPF 样式和模板化模型容许在 Style、 ControlTemplate 和 DataTemplate 内指定触发器。从本质上讲，TriggerBase 是容许您在某些条件（例如某个属性值变为 true 或者某个事件发生时）获得知足时应用更改的对象的基类。
有多种不一样类型的触发器： Trigger、 MultiTrigger、 EventTrigger、 DataTrigger 和 MultiDataTrigger。

Trigger 类:表示一个触发器，它按条件应用属性值或执行操做。资源

如当用户将光标悬停在 UIElement 上时设置为 true 的 IsMouseOver 属性或 ContentElement 的对应 IsMouseOver 属性。经过用属性值以及 Trigger 元素表示最终用户操做
Trigger 对象的 Setters 属性只能包含 Setter 对象。将 Setter 子项添加到 Trigger 对象会将其隐式添加到 Trigger 对象的 SetterBaseCollection。 EventSetter 对象不受支持；只有 Style.Setters 支持 EventSetter 对象。

MultiTrigger 类：表示在知足一组条件时应用属性值或执行操做的触发器。路由

MultiTrigger 容许根据 Condition 集合设置属性值或启动操做。若是元素的属性（由 Condition 类的 Property 属性指定）值与指定的 Value 匹配，则知足条件。
该比较是一项引用相等性检查。而后，能够在知足全部条件时使用 Setter 或 EnterActions 和 ExitActions 属性来应用更改或启动操做。

EventTrigger 类：表示为响应事件而应用一组操做的触发器。

而 EventTrigger 对象将在发生指定的路由事件时启动一组 Actions。例如，您可使用 EventTrigger 在鼠标指针悬停于特定用户界面 (UI) 控件上时启动一组动画。
与 Trigger 不一样，EventTrigger 没有终止状态的概念，所以再也不知足引起事件的条件后，操做将没法撤消。
请注意，使用 EventTrigger 时，须要选择不会影响控件内在行为的事件。控件（例如 Button 或 TextBox）执行有关用户输入事件（如鼠标单击和键盘事件）的特定操做。例如，若是要对按钮进行样式设置，并尝试将 MouseDown 事件设置为 EventTrigger 的 RoutedEvent，则永远也不会应用 EventTrigger，由于该事件将首先通过按钮的处理。能够改用 PreviewMouseDown 事件或其余事件。
使用数据绑定时，若是要使用 TargetUpdated 事件，则必须为要引起的该事件将 Binding 对象的 NotifyOnTargetUpdated 值设置为 true。
将 TriggerAction 子级添加到 EventTrigger 对象中会将它隐式添加到 EventTrigger 对象的 TriggerActionCollection 中

DataTrigger 类：表示一个触发器，它会在绑定数据知足指定条件时应用属性值或执行操做。

Style、 ControlTemplate 和 DataTemplate 都有触发器集合。使用 DataTrigger，能够在数据对象的属性值与指定的 Value 匹配时设置属性值。
例如，在显示 Employee 对象列表时，可能但愿前景色根据每一个 Employee 的当前出勤状况而变化。（例如，用紫色前景色显示当前正在休假的 Employee。）在有些状况下，建立转换器或使用 DataTemplateSelector 可能会更适合。
请注意，若要使数据触发器有意义，必须在 DataTrigger 上同时指定 Binding 和 Value 属性。若是这两个属性或其中一个未指定，则会引起异常。
DataTrigger 对象的 Setters 属性只能包含 Setter 对象。将 Setter 子项添加到 DataTrigger 对象会将其隐式添加到 DataTrigger 对象的 SetterBaseCollection。 EventSetter 对象不受支持；只有 Style.Setters 支持 EventSetter 对象。

MultiDataTrigger 类：表示一个触发器，它会在绑定数据知足一组条件时应用属性值或执行操做。

MultiDataTrigger 对象与 MultiTrigger 相似，但 MultiDataTrigger 的条件基于绑定数据的属性值，而不是 UIElement 的属性值。在 MultiDataTrigger 中，当数据项的属性值与指定的 Value 匹配时，会知足一个条件。而后，能够在知足全部条件时使用 Setter 或 EnterActions 和 ExitActions 属性来应用更改或启动操做。
MultiDataTrigger 对象的 Setters 属性只能由 Setter 对象组成。将 Setter 子项添加到 MultiDataTrigger 对象会将其隐式添加到 MultiDataTrigger 对象的 SetterBaseCollection。 EventSetter 对象不受支持；只有 Style.Setters 支持 EventSetter 对象。

EventSetter 类：表示样式中的事件资源库。事件资源库调用指定的事件处理程序来响应事件。

事件资源库调用指定的事件处理程序来响应路由事件，这些处理程序适用于引用 Style 的全部元素，而无需您将实例处理程序附加到每一个单独的元素。只有 Style.Setters 才支持EventSetter 对象。
只能为属于路由事件的事件声明事件资源库。能够为具备直接路由策略的路由事件、冒泡事件或隧道事件声明事件资源库。
在主题资源字典包含的样式中，不能使用事件资源库。这是由于主题资源字典在运行时一般是松散的二进制 XAML (BAML) 文件，而且未定义伴随代码隐藏（用于定义处理程序）可在其中存在的任何范围。
经过事件资源库附加的处理程序将在事件的任何类处理程序以后调用，而且还会在任何实例处理程序以后调用。所以，若是类处理程序或实例处理程序在其参数中将事件标记为已处理，则不会调用事件资源库声明的处理程序，除非事件资源库明确将 HandledEventsToo 设置为 true。
事件资源库还可能来自 BasedOn 样式。将在处理程序后对直接样式调用指定为 BasedOn 的样式中的事件库处理程序。
请注意，只有 Style.Setters 才支持EventSetter 对象。触发器（ TriggerBase 和派生类）不支持 EventSetter。