如何通过动画放大和缩小答案

【问题标题】：How to Zoom in and zoom out through animation如何通过动画放大和缩小
【发布时间】：2015-04-27 08:04:30
【问题描述】：

我有一组放置在枢轴控件中的图像。我想将图像放大到特定点，然后通过动画恢复到正常大小。我该怎么做。任何帮助将不胜感激。

   <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>

【问题讨论】：

请输入一些代码..你试过什么？
我使用上面的代码@MayankJain
这不是我想要的@Pradnya Bolli
你想在页面渲染时看到动画，还是在某个事件时看到动画？
当某个事件被触发时@user2784555

标签： c# xaml animation windows-phone-8

【解决方案1】：

第一个提示：-

避免将Resources 写入特定控件。而是将所有资源定义为<Page.Resources>

现在，如果您想为某些控件设置动画，则必须使用元素的 Scaling 属性。

检查下面的代码。在这里，我指出如何在任何事件处理程序上缩放图像。

XAML 控制代码

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

定义故事板

<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();

希望对您有所帮助..

【讨论】：

【解决方案2】：

如果我理解您的问题，那么您应该使用 Storyboard、EventTrigger 和 ScaleX 而不是 Height 来调整图像大小。

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>

【讨论】：