相对于Expression Blend中的当前位置移动对象

时间:2012-01-27 12:05:21

标签: animation expression-blend

我是Expression Blend 4的新手,但我遇到的问题非常简单。

我想要一个按钮,只要点击按钮,就可以将对象向上移动20px。我按照教程here建议如果你使用一个故事板动画(一开始没有关键帧)移动对象然后它将播放动画,按照计划从对象当前的任何地方移动(即:继续每按一次向上移动)但是当我尝试这个时,动画只能运行一次。

我已尝试在变换菜单中勾选“使用相对值”框,但它没有任何区别。

我错过了一些明显的东西吗?

1 个答案:

答案 0 :(得分:0)

注意:我在这里指的点值是相对于物体的原始位置而不是特定的点值。

我认为问题在于故事板虽然一直播放,但实际上并没有停止过。当你建立(-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>

我认为你将不得不以不同的方式解决这个问题。最简单的方法是将它放在Canvas中并管理Top和Left值(最好通过绑定)。想法是捕获故事板完成并更新绑定中的值,然后停止动画。这应该为下次播放动画时提供正确的起点。对不起,我没时间把它放在一起,但希望这会让你走得更远。