Учебники

Silverlight — анимация

Октябрь 9, 2018

Анимация позволяет создавать действительно динамические пользовательские интерфейсы. Он часто используется для применения эффектов, например значков, которые растут при наведении на них, вращающихся логотипов, прокручиваемого текста и так далее.

Иногда эти эффекты кажутся чрезмерным блеском. При правильном использовании анимация может улучшить приложение несколькими способами. Они могут сделать приложение более отзывчивым, естественным и интуитивно понятным.

Например, кнопка, которая скользит при нажатии, выглядит как настоящая физическая кнопка, а не просто еще один серый прямоугольник. Анимации также могут привлечь внимание к важным элементам и помочь пользователю переходить к новому контенту.

Подход Silverlight к анимации является декларативным, а не фокусируется на последовательности кадров анимации.

Определение анимации

Анимации обычно определяются в разделах ресурсов. На самом деле они обычно заключены в элемент раскадровки, который мы вскоре рассмотрим подробнее.

  • Он предоставляет метод Begin (), поэтому анимация может быть вызвана из кода.

  • Анимации также могут быть размещены внутри элементов визуального состояния в шаблоне элемента управления.

Он предоставляет метод Begin (), поэтому анимация может быть вызвана из кода.

Анимации также могут быть размещены внутри элементов визуального состояния в шаблоне элемента управления.

Декларативная анимация

Анимации в Silverlight являются декларативными. Они описывают то, что хотелось бы, чтобы произошло. Оставьте это Silverlight, чтобы решить, как это сделать. Таким образом, анимации обычно следуют шаблону, который мы сообщаем Silverlight о том, что мы хотели бы изменить.

Это всегда некоторое свойство некоторых именованных элементов, например, TargetName и TargetProperty . 

<DoubleAnimation 
   Storyboard.TargetName = "myRectangle" 
   Storyboard.TargetProperty = "Opacity" 
   From = "0" To = "1" 
   Duration = "0:0:5"  
/>

  • Мы говорим, как мы хотели бы, чтобы это свойство изменялось, в этом случае мы изменяем непрозрачность со значения ноль до значения один. Другими словами, нам нравится, когда целевые элементы переходят от непрозрачного к прозрачному.

  • Наконец, мы говорим, как долго мы хотели бы, чтобы это заняло, в этом случае это займет пять секунд.

  • Значение double в этой двойной анимации состоит в том, что он нацелен на свойство, имеющее тип double, то есть значение с плавающей запятой.

  • Если вы хотите анимировать свойство, представляющее цвет, вместо этого вы используете цветную анимацию.

Мы говорим, как мы хотели бы, чтобы это свойство изменялось, в этом случае мы изменяем непрозрачность со значения ноль до значения один. Другими словами, нам нравится, когда целевые элементы переходят от непрозрачного к прозрачному.

Наконец, мы говорим, как долго мы хотели бы, чтобы это заняло, в этом случае это займет пять секунд.

Значение double в этой двойной анимации состоит в том, что он нацелен на свойство, имеющее тип double, то есть значение с плавающей запятой.

Если вы хотите анимировать свойство, представляющее цвет, вместо этого вы используете цветную анимацию.

Давайте посмотрим на простой пример двойной анимации. Ниже приведен код XAML, в который добавлены две кнопки, один прямоугольник и две раскадровки. 

<UserControl x:Class = "DoubleAnimationExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"  
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480">
   
   <UserControl.Resources> 
	
      <Storyboard x:Name = "fadeDown"> 
         <DoubleAnimation  
            Storyboard.TargetName = "myRectangle" 
            Storyboard.TargetProperty = "Opacity" 
            From = "1" To = "0" 
            Duration = "0:0:5" /> 
      </Storyboard> 
		
      <Storyboard x:Name = "fadeUp"> 
         <DoubleAnimation 
            Storyboard.TargetName = "myRectangle" 
            Storyboard.TargetProperty = "Opacity" 
            From = "0" To = "1" 
            Duration = "0:0:5" /> 
      </Storyboard> 
		
   </UserControl.Resources> 
	
   <Grid x:Name = "LayoutRoot"> 
      <Rectangle x:Name = "myRectangle" 
         Fill = "Blue" Width = "300" Height = "100"  
         HorizontalAlignment = "Center" 
         VerticalAlignment = "Top" Margin = "0,30" /> 
			
      <Button x:Name = "fadeUpButton" Content = "Up" Width = "80"  
         Height = "30" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "50,140,0,0"  
         Click = "fadeUpButton_Click" /> 
			
      <Button x:Name = "fadeDownButton" Content = "Down"  
         Width = "80" Height = "30" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "50,180,0,0"  
         Click = "fadeDownButton_Click" />
			
   </Grid>
	
</UserControl>

Вот реализация для различных событий в C #. 

using System.Windows; 
using System.Windows.Controls;  

namespace DoubleAnimationExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
	  
      private void fadeUpButton_Click(object sender, RoutedEventArgs e) { 
         fadeUp.Begin(); 
      }
	  
      private void fadeDownButton_Click(object sender, RoutedEventArgs e) { 
         fadeDown.Begin(); 
      } 
   } 
}

Когда приведенный выше код скомпилирован и выполнен, вы увидите следующий вывод.

Декларативная анимация

Повторение и обращение

Анимации предлагают некоторые свойства для автоматического повторения и все обратные анимации.

  • Если вы установите свойство повтора поведения для временного спама, анимация будет повторяться до тех пор, пока не истечет заданный промежуток времени, или вы можете просто сказать, сколько раз вы хотели бы повторить.

  • Это поддерживает десятичные точки, поэтому вы можете повторить четыре с половиной раза.

  • Вы можете повторять вечно, а также можете сказать анимации, что, как только она достигнет конца, она должна вернуться обратно к началу.

Если вы установите свойство повтора поведения для временного спама, анимация будет повторяться до тех пор, пока не истечет заданный промежуток времени, или вы можете просто сказать, сколько раз вы хотели бы повторить.

Это поддерживает десятичные точки, поэтому вы можете повторить четыре с половиной раза.

Вы можете повторять вечно, а также можете сказать анимации, что, как только она достигнет конца, она должна вернуться обратно к началу.

Анимация ключевых кадров

Часто простая анимация от А до Б бывает слишком простой. Например, вы хотите анимировать отскакивающий от земли мяч. Это не простая точка-точка движения. Мяч падает, постепенно ускоряется и затем меняет свое направление, когда ударяет по дну. Замедление снова, когда оно возвращается к вершине своего путешествия.

Давайте посмотрим на простой пример анимации ключевых кадров .

Ниже приведен код XAML, который содержит эллипс и двойную анимацию с ключевыми кадрами. 

<UserControl x:Class = "LinearKeyFrames.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" 
   Width = "400" Height = "300">
   
   <UserControl.Resources> 
	
      <Storyboard x:Name = "ballAnim" SpeedRatio = "0.2"> 
         <DoubleAnimation From = "0" Duration = "00:00:03" To = "96" 
            Storyboard.TargetName = "ellipse" 
            Storyboard.TargetProperty = "(Canvas.Left)" />
				
         <DoubleAnimationUsingKeyFrames  
            Storyboard.TargetName = "ellipse" 
            Storyboard.TargetProperty = "(Canvas.Top)"> 

            <LinearDoubleKeyFrame KeyTime = "00:00:00"   Value = "0"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:00.5" Value = "16" /> 
            <LinearDoubleKeyFrame KeyTime = "00:00:01"   Value = "48"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:01.5" Value = "112"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:02"   Value = "48"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:02.5" Value = "16"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:03"   Value = "0"/> 
				
         </DoubleAnimationUsingKeyFrames> 
			
      </Storyboard>
		
   </UserControl.Resources>
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Canvas> 
         <Ellipse x:Name = "ellipse" Fill = "Aqua" Width = "50" Height = "50" /> 
      </Canvas> 
   </Grid> 
	
</UserControl>

Вот реализация события нажатия левой кнопки мыши , которое начинает анимацию, когда пользователь нажимает левую кнопку мыши на веб-странице. 

using System.Windows.Controls; 
using System.Windows.Input; 
 
namespace LinearKeyFrames { 

   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent();  
         this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown); 
      } 
	  
      void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { 
         ballAnim.Begin(); 
      } 
   } 
}

Когда приведенный выше код скомпилирован и выполнен, вы увидите следующий вывод.

Анимация ключевых кадров

При нажатии на веб-страницу вы увидите, что мяч начинает двигаться.

44
Share: