Ключевые кадры: Ключевые кадры

• 08.02.2017
• 12 минут на чтение

В этой статье

Линейная анимация по ключевому кадру, анимация по ключевому кадру со значением KeySpline или функции замедления — это три различных метода для приблизительно одного и того же сценария: создание немного сложней анимации с надписью, которая использует поведение нелинейной анимации из начальное состояние до конечного состояния.

Предпосылки

Убедитесь, что вы прочитали тему анимации Storyboarded. Эта тема основана на концепциях анимации, которые были объяснены в Storyboarded анимации, и больше не будет их повторять. Например, Storyboarded анимации описывает, как нацеливать анимации, раскадровки как ресурсы, значения свойств Timeline , такие как Duration , FillBehavior и так далее.

Анимация с использованием ключевой анимации

Анимации по ключевым кадрам допускают более одного целевого значения, которое достигается в точке вдоль временной шкалы анимации.Другими словами, каждый ключевой кадр может указывать различное промежуточное значение, и последний достигнутый ключевой кадр является окончательным значением анимации. Указав несколько значений для анимации, вы можете создавать более сложные анимации. Анимации по ключевым кадрам также обеспечивают различную логику интерполяции, каждая из которых реализована в виде отдельного подкласса KeyFrame для каждого типа анимации. В частности, каждый тип анимации ключевого кадра имеет дискретных , линейных , сплайновых и облегчающих вариаций своего класса KeyFrame для указания своих ключевых кадров.Например, чтобы указать анимацию, которая нацелена на Double и использует ключевые кадры, вы можете объявить ключевые кадры с DiscreteDoubleKeyFrame , LinearDoubleKeyFrame , SplineDoubleKeyFrame и EasingDoubleKeyFrame . Вы можете использовать любой из этих типов в одной коллекции KeyFrames , чтобы изменять интерполяцию каждый раз, когда достигается новый ключевой кадр.

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

В начале анимации, если ключевой кадр с KeyTime , равным «0: 0: 0», не существует, начальное значение равно значению неанимированного значения свойства. Это похоже на то, как действует анимация с / до / по , если нет с .

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

В дополнение к Продолжительность вы можете установить все свойства на основе временной шкалы для анимации по ключевым кадрам, как вы можете с От анимации / до / по , потому что классы анимации по ключевым кадрам также производные от Хронология . Это:

• AutoReverse : после достижения последнего ключевого кадра кадры повторяются в обратном порядке от конца.Это удваивает кажущуюся продолжительность анимации.
• BeginTime : задерживает начало анимации. Временная шкала для значений KeyTime в кадрах не начинается отсчет до достижения BeginTime , поэтому нет риска обрезать кадры
• FillBehavior : контролирует, что происходит при достижении последнего ключевого кадра. FillBehavior не влияет на промежуточные ключевые кадры.
• Повторите поведение :
  • Если установлено значение Навсегда , то ключевые кадры и их временная шкала повторяются бесконечно.
  • Если установлен счетчик итераций, временная шкала повторяется столько раз.
  • Если установлено значение Продолжительность , временная шкала повторяется до тех пор, пока не будет достигнуто это время. Это может обрезать анимацию частично до последовательности ключевых кадров, если она не является целочисленным фактором неявной продолжительности временной шкалы.
• SpeedRatio (обычно не используется)

Линейные ключевые кадры

Линейные ключевые кадры приводят к простой линейной интерполяции значения, пока не будет достигнут кадр KeyTime .Это поведение интерполяции наиболее похоже на более простую анимацию От / до / на , описанную в разделе «Раскадровка анимации».

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

  
    
        <Раскадровка x: Name = "myStoryboard">
            
                
                
                
            
        
    

  

Дискретные ключевые кадры

Дискретные ключевые кадры вообще не используют никакой интерполяции. Когда достигается KeyTime , новое Значение просто применяется. В зависимости от того, какое свойство пользовательского интерфейса анимируется, это часто приводит к появлению анимации, которая выглядит «скачкообразной». Будьте уверены, что это эстетическое поведение, которое вы действительно хотите. Вы можете минимизировать кажущиеся скачки, увеличив количество объявляемых ключевых кадров, но если ваша цель — плавная анимация, вам лучше использовать линейные или сплайновые ключевые кадры.

Примечание

Дискретные ключевые кадры — это единственный способ анимировать значение, не относящееся к типу Double , Point и Color , с помощью DiscreteObjectKeyFrame . Мы обсудим это более подробно позже в этой теме.

сплайн ключевые кадры

Сплайн-ключевой кадр создает переменный переход между значениями в соответствии со значением свойства KeySpline . Это свойство указывает первую и вторую контрольные точки кривой Безье, которая описывает ускорение анимации.По сути, KeySpline определяет отношение функция-время, где график функции-времени является формой этой кривой Безье. Обычно вы указываете значение KeySpline в строке атрибута сокращенного обозначения XAML, в которой есть четыре значения Double , разделенных пробелами или запятыми. Эти значения являются парами «X, Y» для двух контрольных точек кривой Безье. «X» — время, а «Y» — модификатор функции к значению. Каждое значение всегда должно быть от 0 до 1 включительно. Без изменения контрольной точки для KeySpline прямая линия от 0,0 до 1,1 является представлением функции во времени для линейной интерполяции.Ваши контрольные точки изменяют форму этой кривой и, следовательно, поведение функции во времени для сплайновой анимации. Вероятно, лучше всего увидеть это визуально в виде графика. Вы можете запустить образец визуализатора сплайна ключей Silverlight в браузере, чтобы увидеть, как контрольные точки изменяют кривую и как запускается образец анимации при использовании его в качестве значения KeySpline .

В следующем примере показаны три разных ключевых кадра, примененных к анимации, причем последний является ключевой сплайн-анимацией для значения Double ( SplineDoubleKeyFrame ).Обратите внимание на строку «0,6,0,0 0,9,0,00», применяемую для KeySpline . Это создает кривую, в которой анимация сначала выполняется медленно, но затем быстро достигает значения непосредственно перед достижением KeyTime .

  <Раскадровка x: Name = "myStoryboard">
    
    

        
        

        
        

        
        
    

  

Облегчение ключевых кадров

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

Чтобы применить функцию замедления к ключевому кадру замедления, задайте свойство EasingFunction в качестве элемента свойства в XAML для этого ключевого кадра. В качестве значения укажите элемент объекта для одного из типов функций замедления.

Этот пример применяет CubicEase и затем BounceEase в качестве последовательных ключевых кадров к DoubleAnimation , чтобы создать эффект отскакивания.

  <Раскадровка x: Name = "myStoryboard">
    

        
        
            
                
            
        

        
        
            
                
            
        
    

  

Это только один пример функции замедления.Мы расскажем больше в следующем разделе.

Функции ослабления

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

Функции ослабления могут быть применены к анимации тремя способами:

Вот список функций замедления:

• BackEase : Немного убирает движение анимации, прежде чем она начинает анимацию в указанном пути.
• BounceEase : Создает эффект отскакивания.
• CircleEase : Создает анимацию, которая ускоряется или замедляется с помощью круговой функции.
• CubicEase : Создает анимацию, которая ускоряется или замедляется по формуле f (t) = t3.
• ElasticEase : Создает анимацию, которая напоминает пружину, колеблющуюся взад-вперед до упора.
• ExponentialEase : Создает анимацию, которая ускоряется или замедляется с использованием экспоненциальной формулы.
• PowerEase : создает анимацию, которая ускоряется или замедляется по формуле f (t) = tp, где p равно свойству Power .
• QuadraticEase : создает анимацию, которая ускоряется или замедляется по формуле f (t) = t2.
• QuarticEase : создает анимацию, которая ускоряется или замедляется по формуле f (t) = t4.
• QuinticEase : создайте анимацию, которая ускоряется или замедляется по формуле f (t) = t5.
• SineEase : создает анимацию, которая ускоряется или замедляется с использованием формулы синуса.

Некоторые из функций замедления имеют свои собственные свойства. Например, BounceEase имеет два свойства Bounses и Bounciness , которые изменяют поведение функции во времени этого конкретного BounceEase .Другие функции замедления, такие как CubicEase , не имеют свойств, отличных от свойства EasingMode , которые совместно используются всеми функциями замедления, и всегда выдают одинаковое поведение функции во времени.

Некоторые из этих функций замедления немного перекрываются в зависимости от того, как вы устанавливаете свойства для функций замедления, которые имеют свойства. Например, QuadraticEase точно такой же, как PowerEase с Power , равным 2. А CircleEase в основном является значением по умолчанию ExponentialEase .

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

В более раннем примере мы показали, как объявить функцию замедления для анимации по ключевому кадру.Следующий пример применяет функцию замедления к анимации От / до / к .

  
    
        <Раскадровка x: Name = "myStoryboard">
            
                
                    
                
            
        
    
    

  

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

Анимации дискретного значения объекта

Один тип анимации заслуживает особого упоминания, поскольку это единственный способ применить анимированное значение к свойствам, которые не относятся к типу Двойной , Точка или Цвет . Это ключевая анимация ObjectAnimationUsingKeyFrames . Анимация с использованием Значения объекта отличается тем, что нет возможности интерполировать значения между кадрами.Когда достигается KeyTime кадра, анимированное значение немедленно устанавливается равным значению, указанному в значении ключевого кадра . Поскольку интерполяция отсутствует, в коллекции ключевых кадров ObjectAnimationUsingKeyFrames используется только один ключевой кадр: DiscreteObjectKeyFrame .

Значение из DiscreteObjectKeyFrame часто задается с использованием синтаксиса элемента свойства, поскольку значение объекта, которое вы пытаетесь установить, часто не выражается в виде строки для заполнения значения в синтаксисе атрибута.Вы все еще можете использовать синтаксис атрибута, если вы используете ссылку, такую ​​как StaticResource.

В одном месте вы увидите ObjectAnimationUsingKeyFrames , используемый в шаблонах по умолчанию, когда свойство шаблона ссылается на ресурс Brush . Этими ресурсами являются объекты SolidColorBrush , а не просто значение Color , и они используют ресурсы, которые определены как системные темы ( ThemeDictionaries ). Они могут быть назначены непосредственно значению типа Brush , например, TextBlock.Foreground и не нужно использовать косвенный таргетинг. Но поскольку SolidColorBrush не является Double , Point или Color , вы должны использовать ObjectAnimationUsingKeyFrames для использования ресурса.