如何在 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 事件，检查它是否为捏合操作并在我们的 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 应用于缩放因子。
Transform: PinchManipulation 跟踪原始中心和新中心（在两个触摸点之间计算）。通过从旧中心减去新中心，我们可以知道 UIElement 需要移动多少并将其应用于平移变换。请注意，此处更好的解决方案还可以通过跟踪此代码没有的累积原始中心来解决多个操作会话。
旋转： 我们计算出两个触摸点之间的角度并将其应用为旋转变换。

如何在 windows phone 8 个应用程序开发中为图像制作动画？

How to animate images in windows phone 8 apps development?

animation

xaml

windows-phone-8-sdk

visual-studio-2013