在Expression Blend中移動相對於其當前位置的對象

Question

我是Expression Blend 4的新手，但遇到了一些相當簡單的問題。

我想要一個按鈕，當按鈕被點擊時，將對象向上移動20px。我按照教程here提出建議，如果您使用故事板動畫（在開始時沒有關鍵幀）來移動對象，那麼它將播放動畫，按照計劃從當前對象的任何位置移動它（即：繼續向上移動時間按下）但是當我嘗試這個時，動畫只能用一次。

我試過在變換菜單中勾選'使用相對值'框，但它沒有區別。

我錯過了一些明顯的東西嗎？

Answer 1

注意：這裏所指的點值是相對於對象的原始位置而不是特定的點值。

我認爲問題在於故事板在它一直播放時並未停止。當你建立（-20，-20）的終點時，這是相對於它的開始點。再次播放動畫（假設時間爲零時沒有關鍵幀）會將對象從其現有位置（-20，-20）移動到也是（-20，-20）的目標位置。這給出了沒有技術上不準確的動畫的外觀。如果您有一個單獨的動畫，並且零個關鍵幀沒有移動相同的對象，它將從該對象恰好位於動畫中的第一個關鍵幀開始。

如果實際停止動畫，對象將在（0,0）處返回原始值。通過添加一個不同的Button來測試這個問題，該Button發出一個Stop [我爲此使用ControlStoryboardAction行爲]。這裏是你可以用它來測試這個樣本：

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
     xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
     mc:Ignorable="d" 
     x:Class="Animation1.MainPage" 
     Width="640" 
     Height="480"> 
<UserControl.Resources> 
    <Storyboard x:Name="Storyboard1"> 
     <DoubleAnimation Duration="0:0:0.8" 
         To="-20" 
         Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" 
         Storyboard.TargetName="rectangle" 
         d:IsOptimized="True" /> 
     <DoubleAnimation Duration="0:0:0.8" 
         To="-20" 
         Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
         Storyboard.TargetName="rectangle" 
         d:IsOptimized="True" /> 
    </Storyboard> 
</UserControl.Resources> 
<Grid x:Name="LayoutRoot" 
     Background="White"> 
    <Button Content="Play" 
      HorizontalAlignment="Left" 
      Height="37" 
      Margin="35,53,0,0" 
      VerticalAlignment="Top" 
      Width="65"> 
     <i:Interaction.Triggers> 
      <i:EventTrigger EventName="Click"> 
       <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}" /> 
      </i:EventTrigger> 
     </i:Interaction.Triggers> 
    </Button> 
    <Rectangle x:Name="rectangle" 
       Fill="#FF0303FF" 
       Height="99" 
       Margin="275,0,207,57" 
       Stroke="Black" 
       VerticalAlignment="Bottom" 
       RenderTransformOrigin="0.5,0.5"> 
     <Rectangle.RenderTransform> 
      <CompositeTransform /> 
     </Rectangle.RenderTransform> 
    </Rectangle> 
    <Button Content="Stop" 
      HorizontalAlignment="Left" 
      Height="40" 
      Margin="35,115,0,0" 
      VerticalAlignment="Top" 
      Width="65"> 
     <i:Interaction.Triggers> 
      <i:EventTrigger EventName="Click"> 
       <ei:ControlStoryboardAction ControlStoryboardOption="Stop" 
              Storyboard="{StaticResource Storyboard1}" /> 
      </i:EventTrigger> 
     </i:Interaction.Triggers> 
    </Button> 
</Grid> 

我認爲你將不得不以不同的方式處理這個特殊的問題。最簡單的方法是將其放置在Canvas中並管理Top和Left值（最好通過綁定）。這個想法是捕獲故事板完成並更新綁定中的值，然後停止動畫。這應該爲下次播放動畫時提供正確的起點。對不起，我沒有時間把它放在一起，但希望這會讓你走得更遠。