xamlanimationvisual-studio-2013windows-phone-8-sdk

How to animate images in windows phone 8 apps development?


I need image zooming of background image during run-time process and image animation in windows phone 8 apps development when starting my screen


Solution

  • First, we'll create a basic image hovering in the middle of a grid:

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

    Next, we'll handle the ManipulationDelta event, check if it's a Pinch Manipulation and apply the correct Silverlight transformations on our UIElement.

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

    Here's what we did: