WPF, анимирани четки
Анимираните четки са друга често срещана техника в WPF анимацията и са също толкова лесни за изпълнение, колкото и анимираните трансформации. Отново, този трик е да проникнете в конкретното подсвойство, което трябва да бъде променено, като използвате подходящия тип анимация за това.
По-долу е даден пример, при който RadialGradientBrush е модифициран. Когато анимацията започне, централната част на радиалния градиент се движи по елипсовидна траектория, създавайки вид триизмерен ефект. В същото време външният цвят на градиента се променя.
За да реализирате тази анимация, ще ви трябват два типа анимации, които все още не са разгледани.ColorAnimation осигурява плавен преход между два цвята, създавайки фин ефект на промяна на цвета.PointAnimation ви позволява да преместите точка от едно място на друго (по същество същото като модифицирането на координатите X и Y едновременно с помощта на отделна DoubleAnimation с линейна интерполация). PointAnimation може да се използва за деформиране на точкова форма или можете да промените местоположението на центъра на радиален градиент, както в този пример.
По-долу е кодът за маркиране:
Като променяте цветовете и отместванията в LinearGradientBrush и RadialGradientBrush, можете да създадете огромно разнообразие от хипнотизиращи ефекти. В допълнение, градиентните четки също имат собствено свойство RelativeTransform, което може да се използва за завъртане, мащабиране, разтягане и изкривяване. Екипът за разработка на WPF има забавен инструмент, Gradient Obsession, който е предназначен да създава анимации, базирани на градиенти.
VisualBrush
Както вече е известно, VisualBrush ви позволява да заснемате външния видвсеки елемент и го използвайте за запълване на друга повърхност. Тази друга повърхност може да бъде всичко - от обикновен правоъгълник до букви от текст.
По-долу е даден основен пример. В горната част има истински бутон. По-долу се използва VisualBrush за запълване на правоъгълник с изображението на този бутон, който се разтяга и завърта, за да създаде различни трансформации.
VisualBrush също така отваря някои интересни възможности за анимация. Например, вместо да анимирате реален елемент, можете да анимирате обикновен правоъгълник, който има същата подложка.
Възпроизвеждането на този ефект с VisualBrush е много лесно. Първата стъпка е да създадете друг елемент, който се запълва сам с помощта на VisualBrush. Тази VisualBrush трябва да се изчертае въз основа на външния вид на елемента, който ще бъде анимиран (в този пример елементът е наименувана кутия).
За да поставите правоъгълника на позицията на оригиналния елемент, и двата могат да бъдат вмъкнати в една и съща клетка на мрежата. Размерът на клетките се задава равен на размера на оригиналния елемент (рамка), а правоъгълникът се разтяга до неговия размер. Друг избор е да добавите контейнер Canvas за наслагване върху действителния контейнер за оформление. (След това можете да свържете свойствата на анимацията към свойствата ActualWidth и ActualHeight на реалния основен елемент, за да сте сигурни, че съвпадат.)
След като добавите правоъгълника, просто трябва да настроите анимациите, за да анимирате неговите трансформации. Последната стъпка е да скриете правоъгълника в края на анимацията. По-долу е кодът за изпълнение на този пример: