Expression Blendで現在の場所を基準にしてオブジェクトを移動する

Question

Expression Blend 4を初めて使用しましたが、非常にシンプルな問題が発生しています。

ボタンをクリックするたびにオブジェクトを20ピクセル上に移動したいと思います。私は、オブジェクトを移動するストーリーボードアニメーション（最初はキーフレームなし）を使用してアニメーションを再生し、現在のオブジェクトがどこからでも計画通りに移動することを示唆するチュートリアルhereに従っています時間が押されている）しかし、私がこれを試してみると、アニメーションは一度しか動作しません。

私は変換メニューで '相対値を使用'ボックスをチェックしてみましたが、違いはありません。

明らかなものがありませんか？

Answer 1

注：私がここで参照しているポイント値は、オブジェクトの元の位置に関連しており、特定のポイント値ではありません。

私は、ストーリーボードが完全に再生されている間は、実際には停止していないと考えています。終点を（-20、-20）に設定すると、その始点との相対的な位置になります。アニメーションをもう一度再生すると（時間ゼロのキーフレームがないと仮定）、オブジェクトはその既存の位置（-20、-20）から（-20、-20）のターゲット位置に移動します。これは、技術的に正確ではないアニメーションが出現しないようにする。同じオブジェクトを移動したキーフレームがゼロでない別のアニメーションがある場合、そのオブジェクトはアニメーションの最初のキーフレームまでどこからでも始まります。

アニメーションを実際に停止すると、オブジェクトは（0,0）に元の値に戻ります。 Stopを発行する別のButtonを追加することでこれをテストします[私はこれに対して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> 

私はあなたが異なっこの特定の問題にアプローチする必要があるとしていると思います。最も簡単なのは、これをキャンバスに配置し、Top値とLeft値を管理することです（できればバインディングを使用します）。ストーリーボードの補完をキャプチャしてバインディングの値を更新し、アニメーションを停止するという考えがあります。これにより、次にアニメーションが再生されるときに正しい開始点が得られるはずです。申し訳ありませんが私はこれをまとめる時間がありませんが、うまくいけば、これはあなたをさらに遠ざけるでしょう。