Стилизованный анимированный прямоугольник: укажите свойство DoubleAnimation вне стиля

Question

Мне нужно индивидуально настроить свойство DoubleAnimation.EasingFunction нескольких анимированных Rectangle, которые в остальном идентичны.Поэтому я написал стиль, включающий анимационную часть:

<Window.Resources>
    <Style x:Key="rectStyle" TargetType="Rectangle">
        <Setter Property="Width" Value="50"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="Fill" Value="LightSkyBlue"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <TranslateTransform x:Name="translate" />
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Y"
                                         To="300" Duration="0:0:1" RepeatBehavior="Forever" AutoReverse="True"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Canvas>
    <Rectangle x:Name="r1" Canvas.Left="0" Canvas.Top="0" Style="{StaticResource rectStyle}"/>
    <Rectangle x:Name="r2" Canvas.Left="100" Canvas.Top="0" Style="{StaticResource rectStyle}"/>
    <Rectangle x:Name="r3" Canvas.Left="200" Canvas.Top="0" Style="{StaticResource rectStyle}"/>
</Canvas>

Однако я не могу получить доступ к DoubleAnimation в экземплярах Rectangle (r1, r2, r3), чтобы установить EasingFunction.Похоже, что решения не существует, и RenderTransform должен быть установлен для каждого экземпляра индивидуально.Я что-то упустил?

Прошу прощения, если вопрос выглядит глупо, я изучаю WPF.

Answer 1

Вы должны определить каждую отдельную анимацию отдельно.Но вы можете переместить общие настройки на общую базу Style:

<Style x:Key="RectangleBaseStyle" TargetType="Rectangle">
  <Setter Property="Width"
          Value="50" />
  <Setter Property="Height"
          Value="50" />
  <Setter Property="Margin"
          Value="10" />
  <Setter Property="Fill"
          Value="LightSkyBlue" />
  <Setter Property="RenderTransform">
    <Setter.Value>
      <TranslateTransform x:Name="translate" />
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="RectangleAnimationAStyle" TargetType="Rectangle"
       BasedOn="{StaticResource RectangleBaseStyle}">
  <Style.Triggers>
    <EventTrigger RoutedEvent="Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Y"
                           To="300"
                           Duration="0:0:10"
                           RepeatBehavior="Forever"
                           AutoReverse="True" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Style.Triggers>
</Style>
<Style x:Key="RectangleAnimationBStyle" TargetType="Rectangle"
       BasedOn="{StaticResource RectangleBaseStyle}">
  <Style.Triggers>
    <EventTrigger RoutedEvent="Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Y"
                           To="300"
                           Duration="0:0:20"
                           RepeatBehavior="Forever"
                           AutoReverse="True" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Style.Triggers>
</Style>

<Canvas>
  <Rectangle x:Name="r1" Canvas.Left="0" Canvas.Top="0" Style="{StaticResource RectangleAnimationAStyle}"/>
  <Rectangle x:Name="r2" Canvas.Left="100" Canvas.Top="0" Style="{StaticResource RectangleAnimationBStyle}"/>
</Canvas>