0

我有以下 xaml 说明了一个在大小上增长和缩小的圆圈。当动画运行时，我希望我的圆圈的中心点保持在我的画布上。

<Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation  RepeatBehavior="Forever" AutoReverse="True" From="10" To="360" Duration="0:0:3" Storyboard.TargetName="GrowMe" Storyboard.TargetProperty="Width"/>
                        <DoubleAnimation  RepeatBehavior="Forever" AutoReverse="True" From="10" To="360" Duration="0:0:3" Storyboard.TargetName="GrowMe" Storyboard.TargetProperty="Height"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>
<Canvas Width="640" Height="480">
    <Ellipse  Width="10" Height="10" Stroke="Red" Canvas.Left="80" Canvas.Top="31"/>
    <Ellipse x:Name="GrowMe" Width="10" Height="10" Stroke="Cyan" Canvas.Left="205" Canvas.Top="203"/>

4

2 回答 2

0

您可以轻松地ScaleTransform在内部设置动画RenderTransform并设置RenderTransformOrigin = "0.5, 0.5".

- 编辑 -

然后您将故事板更改为以下内容：

<Storyboard>
    <DoubleAnimation  RepeatBehavior="Forever" AutoReverse="True" From="10" To="180" Duration="0:0:3" Storyboard.TargetName="GrowMe" Storyboard.TargetProperty="Width"/>
    <DoubleAnimation  RepeatBehavior="Forever" AutoReverse="True" From="10" To="180" Duration="0:0:3" Storyboard.TargetName="GrowMe" Storyboard.TargetProperty="Height"/>
    <DoubleAnimation  RepeatBehavior="Forever" AutoReverse="True" By="-180" Duration="0:0:3" Storyboard.TargetName="GrowMe" Storyboard.TargetProperty="(Canvas.Left)"/>
    <DoubleAnimation  RepeatBehavior="Forever" AutoReverse="True" By="-180" Duration="0:0:3" Storyboard.TargetName="GrowMe" Storyboard.TargetProperty="(Canvas.Top)"/>
</Storyboard>

您需要将您的增长分成一半，然后将其添加到 中Width/Height并从中减去Left/Top。

于 2010-12-28T06:16:12.080 回答
0

Here is an example of a button that does exactly this. Note the RenderTransformOrigin property.

<Button RenderTransformOrigin="0.5,0.5" Command="{Binding ClickCommand}" Cursor="Hand">
    <Button.RenderTransform>
        <ScaleTransform ScaleX="1" ScaleY="1" />
    </Button.RenderTransform>

    <Button.Template>
        <ControlTemplate>
            <Label>
                <Label.Background>
                    <VisualBrush Visual="{Binding Path=Shape, Converter={StaticResource myTestConv}}" />
                </Label.Background>
            </Label>
        </ControlTemplate>
    </Button.Template>
    <Button.Style>
        <Style TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                 To="1.3" Duration="0:0:0.1" AccelerationRatio="0.5"/>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                 To="1.3" Duration="0:0:0.1" AccelerationRatio="0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                 To="1" Duration="0:0:0.5"/>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                 To="1" Duration="0:0:0.5"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
    <local:TooltipServiceEx.ToolTipEx>
        <local:ToolTipEx
                HideToolTipTimeout="{StaticResource TooltipTimeout}" />
    </local:TooltipServiceEx.ToolTipEx>
    <ToolTipService.ToolTip>
        <ToolTip
                Template="{StaticResource EventTooltipStyle}" />
    </ToolTipService.ToolTip>
</Button>
于 2010-12-28T06:19:13.537 回答