Как анимировать изображения в 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 и применяют правильные преобразования Silverlight на нашем 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; } 
} 

Вот что мы сделали:

• Scaling: PinchManipulation фактически отслеживает масштабирование для нас, так что все, что мы должны были сделать, это применить PinchManipulation.CumulativeScale к коэффициенту масштабирования.
• Трансформация: PinchManipulation отслеживает исходный центр и новый центр (рассчитывается между двумя точками касания). Вычитая новый центр из старого центра, мы можем сказать, сколько UIElement нужно переместить и применить к трансляционному преобразованию. Обратите внимание, что лучшее решение здесь также будет учитывать несколько сеансов Манипуляции, отслеживая кумулятивные исходные центры, которых нет в этом коде.
• Вращение: Мы вычислили угол между двумя точками касания и применили его как преобразование вращения.