XAML 如何通过动画放大和缩小

w46czmvw  于 2023-06-03  发布在  其他
关注(0)|答案(2)|浏览(574)

我有一套图像是放在枢纽控制。我想将图像放大到特定点,然后通过动画恢复到正常大小。这是我迄今为止所尝试的。

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="story">
            <DoubleAnimation Storyboard.TargetName="img"
                             Storyboard.TargetProperty="Height"
                             From="300"
                             To="600"
                             Duration="0:0:2">
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>
    <Button Height="100" Width="100" Click="Button_Click"></Button>
    <Image x:Name="img"  Height="300" Width="200" Source="/Assets/10.png"></Image>
</StackPanel>
bjg7j2ky

bjg7j2ky1#

如果我理解你的问题,那么你应该使用故事板,事件触发器和ScaleX而不是高度来调整图像大小。
Storyboarded and trigger animations
下面是加载事件的一个选项。

<StackPanel>
    <Button Height="100" Width="100" Click="Button_Click"></Button>
    <Image x:Name="img"  Height="300" Width="200" Source="/Assets/10.png">
        <Image.RenderTransform>
            <ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1"/>
        </Image.RenderTransform>
        <Image.Triggers>
            <EventTrigger RoutedEvent="Image.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.7" AutoReverse="True"/>
                        <DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.7" AutoReverse="True"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>
    </Image>
</StackPanel>
oyxsuwqo

oyxsuwqo2#

第一个提示:-

避免将Resources写入特定控件。而是将所有资源定义为<Page.Resources>
现在,如果你想动画一些控制,那么你必须使用一个元素的缩放属性。
检查下面的代码。在这里,我指出了如何在任何事件处理程序上缩放图像。

控件的XAML代码

<Image x:Name="img" Source="/Assets/image1.png" RenderTransformOrigin="0.5 0.5" >
    <Image.RenderTransform>
        <CompositeTransform x:Name="compositeTransform"  />
    </Image.RenderTransform>
</Image>

定义Storyborad

<phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="story">
        <DoubleAnimation Storyboard.TargetName="compositeTransform"
                         Storyboard.TargetProperty="ScaleX"
                         From="0" To="5"
                         Duration="0:0:2" />

        <DoubleAnimation Storyboard.TargetName="compositeTransform"
                         Storyboard.TargetProperty="ScaleY"
                         From="0" To="5"
                         Duration="0:0:2" />
    </Storyboard>
</phone:PhoneApplicationPage.Resources>

在任何事件处理器上

story.Begin();

相关问题