xaml - 如何在 Windows Phone 8 应用程序开发中为图像设置动画？

Question

我需要在运行时过程中对背景图像进行图像缩放，并在启动屏幕时在 windows phone 8 应用程序开发中进行图像动画

Answer 1

首先，我们将创建一个悬停在网格中间的基本图像：

<Grid x:Name="ContentPanel">
    <Image Source="Assets\Headset.png" 
           Width="200" Height="150"
           ManipulationDelta="Image_ManipulationDelta"
           x:Name="img"
           >
        <Image.RenderTransform>
            <CompositeTransform CenterX="100" CenterY="75" />
        </Image.RenderTransform>
    </Image>
</Grid>

接下来，我们将处理 ManipulationDelta 事件，检查它是否是 Pinch Manipulation 并在我们的 UIElement 上应用正确的 Silverlight 转换。

private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    if (e.PinchManipulation != null)
    {
        var transform = (CompositeTransform)img.RenderTransform;

        // Scale Manipulation
        transform.ScaleX = e.PinchManipulation.CumulativeScale;
        transform.ScaleY = e.PinchManipulation.CumulativeScale;

        // Translate manipulation
        var originalCenter = e.PinchManipulation.Original.Center;
        var newCenter = e.PinchManipulation.Current.Center;
        transform.TranslateX = newCenter.X - originalCenter.X;
        transform.TranslateY = newCenter.Y - originalCenter.Y;

        // Rotation manipulation
        transform.Rotation = angleBetween2Lines(
            e.PinchManipulation.Current, 
            e.PinchManipulation.Original);

        // end 
        e.Handled = true;
    }
}

// copied from http://www.developer.nokia.com/Community/Wiki/Real-time_rotation_of_the_Windows_Phone_8_Map_Control
public static double angleBetween2Lines(PinchContactPoints line1, PinchContactPoints line2)
{
    if (line1 != null && line2 != null)
    {
        double angle1 = Math.Atan2(line1.PrimaryContact.Y - line1.SecondaryContact.Y,
                                   line1.PrimaryContact.X - line1.SecondaryContact.X);
        double angle2 = Math.Atan2(line2.PrimaryContact.Y - line2.SecondaryContact.Y,
                                   line2.PrimaryContact.X - line2.SecondaryContact.X);
        return (angle1 - angle2) * 180 / Math.PI;
    }
    else { return 0.0; }
}

这是我们所做的：

• 缩放： PinchManipulation 实际上为我们跟踪缩放，所以我们所要做的就是将 PinchManipulation.CumulativeScale 应用于缩放因子。
• 变换： PinchManipulation 跟踪原始中心和新中心（在两个接触点之间计算）。通过从旧中心中减去新中心，我们可以知道 UIElement 需要移动多少并将其应用于平移变换。请注意，这里更好的解决方案还可以通过跟踪此代码没有的累积原始中心来解决多个操作会话。
• 旋转：我们计算出两个触摸点之间的角度并将其应用为旋转变换。