Posted on 24. July 2017

Новые освещения и PropertySet Interop – XAML и Visual Layer Interop

В предыдушем посте команда пользовательского интерфейса Windows изучала XamlCompositionBrushBase и LoadedImageSurface, чтобы создать пользовательские CompositionBrushes, с помощью которых можно рисовать XAML элементы прямо в Вашей разметке. Сегодня, мы ознакомим Вас с новыми улучшениями, добавленными в XAML и Visual Layer Interop API в Windows 10 Creators Update.

 

В этом посте мы рассмотрим некоторые из этих улучшений Creators Update, а именно новые API:

В Части 1:

 

  • XamlCompositionBrushBase – удобное и простое рисование XAML UIElement с CompositionBrush
  • LoadedImageSurface – легкая загрузка изображений и их использование с помощь Composition API

 

В Части 2: 

 

  • XamlLights – применение освещений в Вашем пользовательском интерфейсе XAML с помощью всего лишь одной строки XAML
  • PointerPositionPropertySet – создание 60 FPS анимаций, используя позицию указателя, из потока пользовательского интерфейса!
  • Включение свойств перевода - оживление элемента пользовательского интерфейса XAML с помощью Composition анимаций

 

Если Вы хотите ознакомиться с ранее доступными API ElementCompositionPreview, например, работа с «ручными» и «раздаточными» визуальными средствами, Вы можете изучить это здесь.

Осветление интерфейса с XamlLights

Новая великолепная функция в Creators Update - это возможность устанавливать и использовать эффект освещения прямо в XAML с помощью абстрактного класса XamlLight.

Создание XamlLight начинается так же, как и XamlCompositionBrushBase, с помощью метода OnConnected и OnDisconnected (см. Часть 1), но на этой раз источником будет подкласс XamlLight, чтобы создать Ваше собственное уникальное освещение, которое можно использовать прямо в XAML. Microsoft использует это с Reveal эффектом, которые доступен в Creators Update.

Чтобы показать эту возможность в работе, Microsoft разработали демоверсию для создания анимированных GIF, которые показаны выше. Данная демоверсия объединяет все, что Вы уже знаете о XamlCompositionBrushBase и LoadedImageSurface, с добавлением двух XamlLights: HoverLight и AmbientLight.

Начнем с создания AmbientLight: аналогично XamlCompositionBrushBase с помощью метода OnConnected и OnDisconnected. Однако для XamlLight установка свойства CompositionLight подкласса XamlLight.

public class AmbLight : XamlLight
{
    protected override void OnConnected(UIElement newElement)
    {
        Compositor compositor = Window.Current.Compositor;

        // Create AmbientLight and set its properties
        AmbientLight ambientLight = compositor.CreateAmbientLight();
        ambientLight.Color = Colors.White;

        // Associate CompositionLight with XamlLight
        CompositionLight = ambientLight;

        // Add UIElement to the Light's Targets
        AmbLight.AddTargetElement(GetId(), newElement);
    }

    protected override void OnDisconnected(UIElement oldElement)
    {
        // Dispose Light when it is removed from the tree
        AmbLight.RemoveTargetElement(GetId(), oldElement);
        CompositionLight.Dispose();
    }

    protected override string GetId() => typeof(AmbLight).FullName;
}

Охватывающее освещение готово, давайте построим SpotLight XamlLight. Одна из главных задач SpotLight - это следование за указателями пользователя. Для этого можно использовать метод GetPointerPositionPropertySet для ElementCompositionPreview для получения CompositionPropertySet, который можно использовать с помощью Composition ExpressionAnimation (PointerPositionPropertySet более подробно описан в разделе PropertySets ниже).

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

public class HoverLight : XamlLight 
{
    private ExpressionAnimation _lightPositionExpression;
    private Vector3KeyFrameAnimation _offsetAnimation;

    protected override void OnConnected(UIElement targetElement)
    {
        Compositor compositor = Window.Current.Compositor;

        // Create SpotLight and set its properties
        SpotLight spotLight = compositor.CreateSpotLight();
        spotLight.InnerConeAngleInDegrees = 50f;
        spotLight.InnerConeColor = Colors.FloralWhite;
        spotLight.OuterConeAngleInDegrees = 0f;
        spotLight.ConstantAttenuation = 1f;
        spotLight.LinearAttenuation = 0.253f;
        spotLight.QuadraticAttenuation = 0.58f;

        // Associate CompositionLight with XamlLight
        this.CompositionLight = spotLight;

        // Define resting position Animation
        Vector3 restingPosition = new Vector3(200, 200, 400);
        CubicBezierEasingFunction cbEasing = compositor.CreateCubicBezierEasingFunction( new Vector2(0.3f, 0.7f), new Vector2(0.9f, 0.5f));
        _offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
        _offsetAnimation.InsertKeyFrame(1, restingPosition, cbEasing);
        _offsetAnimation.Duration = TimeSpan.FromSeconds(0.5f);

        spotLight.Offset = restingPosition;

        // Define expression animation that relates light's offset to pointer position 
        CompositionPropertySet hoverPosition = ElementCompositionPreview.GetPointerPositionPropertySet(targetElement);
        _lightPositionExpression = compositor.CreateExpressionAnimation("Vector3(hover.Position.X, hover.Position.Y, height)");
        _lightPositionExpression.SetReferenceParameter("hover", hoverPosition);
        _lightPositionExpression.SetScalarParameter("height", 15.0f);

        // Configure pointer entered/ exited events
        targetElement.PointerMoved += TargetElement_PointerMoved;
        targetElement.PointerExited += TargetElement_PointerExited;

        // Add UIElement to the Light's Targets
        HoverLight.AddTargetElement(GetId(), targetElement);
    }

    private void MoveToRestingPosition()
    {
        // Start animation on SpotLight's Offset 
        CompositionLight?.StartAnimation("Offset", _offsetAnimation);
    }

    private void TargetElement_PointerMoved(object sender, PointerRoutedEventArgs e)
    {
        if (CompositionLight == null) return;

        // touch input is still UI thread-bound as of the Creators Update
        if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
        {
            Vector2 offset = e.GetCurrentPoint((UIElement)sender).Position.ToVector2();
            (CompositionLight as SpotLight).Offset = new Vector3(offset.X, offset.Y, 15);
        }
        else
        {
            // Get the pointer's current position from the property and bind the SpotLight's X-Y Offset
            CompositionLight.StartAnimation("Offset", _lightPositionExpression);
        }
    }

    private void TargetElement_PointerExited(object sender, PointerRoutedEventArgs e)
    {
        // Move to resting state when pointer leaves targeted UIElement
        MoveToRestingPosition();
    }

    protected override void OnDisconnected(UIElement oldElement)
    {
        // Dispose Light and Composition resources when it is removed from the tree
        HoverLight.RemoveTargetElement(GetId(), oldElement);
        CompositionLight.Dispose();
        _lightPositionExpression.Dispose();
        _offsetAnimation.Dispose();
    }

    protected override string GetId() => typeof(HoverLight).FullName;
}

Теперь, с помощью HoverLight класса, можно добавить оба AmbLight и HoverLight к предыдущему ImageEffectBrush (смотрите ImageEffectBrush в этом посте):
          

            
                
            
  
            
                
                
            



Примечание: Для добавления XamlLight в разметку, Ваша минимальная SDK-версия должна быть установлена в Creators Update, или же Вы можете установить ее в коде после.
Для получения дополнительной информации об использовании XamlLight перейдите сюда; Вы можете изучить документацию Lighting здесь.

Использование CompositionPropertySets

Если Вы хотите использовать преимущества ScrollViewer Offset или Pointer положения X и Y (например, курсор мыши) для выполнения таких действий, как эффекты анимации, Вы можете использовать ElementCompositionPreview для извлечения PropertySets. Это позволяет создавать удивительно бесперебойные 60 FPS анимации, которые не привязаны к потоку пользовательского интерфейса. Эти методы позволяют вам получать преимущества пользовательского взаимодействия для создания анимаций и освещения.

Использование ScrollViewerManipulationPropertySet

Этот PropertySet полезен для анимации таких объектов, как Parallax, Translation и Opacity.

// Gets the manipulation 
CompositionPropertySet scrollViewerManipulationPropertySet = 
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(MyScrollViewer);

Чтобы ознакомиться с примером, перейдите к посту о Smooth Interaction и Motion, раздел, посвященный использованию ScrollViewerManipulationPropertySet для управления анимацией.

Использование Нового PointerPositionPropertySet

PointerPositionPropertySet - это новая возможность, добавленная в Creators Update. Этот PropertySet полезен для создания анимаций для освещения и наклона. Также как и ScrollViewerManipulationPropertySet, PointerPositionPropertySet обеспечивает быструю, бесперебойную и зависящую от потока анимацию.

Отличный пример - это механизм анимации Fluent Design RevealBrush, где Вы можете увидить эффекты освещения по бокам UIElements. Этот эффект создается CompositionLight, который имеет свойство Offset, анимированное с помощью ExpressionAnimation, используя значения, полученные из PointerPositionPropertySet.

// Useful for creating an ExpressionAnimation
CompositionPropertySet pointerPositionPropertySet = ElementCompositionPreview.GetPointerPositionPropertySet(targetElement);
ExpressionAnimation expressionAnimation = compositor.CreateExpressionAnimation("Vector3(param.Position.X, param.Position.Y, height)");
expressionAnimation.SetReferenceParameter("param", pointerPositionPropertySet);

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

Включение свойства перевода - анимация смещения элемента XAML с использованием анимации композиции

Как уже известно, совместное использование ресурсов между Framework Layer и Visual Layer было достаточно сложным до выпуска Creators Update. Данные визуальные свойства разделяются между UIElements и их Visuals поддержкой:

  • Offset
  • Scale
  • Opacity
  • TransformMatrix
  • InsetClip
  • CompositeMode

До выпуска Creators Update, Scale и Offset были особенно сложными, потому что, как упоминалось ранее, UIElement не знал об изменениях значений свойств на hand-out Visual, даже несмотря на то, что hand-out Visual знал об изменениях в UIElement. Следовательно, если Вы изменяли значение свойства смещения или размера Visual Offset, позиция UIElement также изменялась из-за размера страницы, но все предыдущие значения позиции UIElement следовали всем Вашим визуальным значениям.

С выпуском Creators Update это стало намного легче, поскольку теперь Вы можете предотвратить масштабирование Scale и Offset, добавив новое свойство Translation в Ваш элемент посредством объекта ElementCompositionPreview.

ElementCompositionPreview.SetIsTranslationEnabled(Rectangle1, true);

//Now initialize the value of Translation in the PropertySet to zero for first use to avoid timing issues. This ensures that the property is ready for use immediately.

var rect1VisualPropertySet = ElementCompositionPreview.GetElementVisual(Rectangle1).Properties;
rect1VisualPropertySet.InsertVector3("Translation", Vector3.Zero);

Затем анимируйте визуальную функцию Translation, где ранее Вы анимировали свойство Offset.

// Old way, subject to property stomping:
visual.StartAnimation("Offset.Y", animation);
// New way, available in the Creators Update
visual.StartAnimation("Translation.Y", animation);
Анимируя другое свойство из того, которое было затронуто во время пропусков макета, Вы избегаете нежелательного смещения, исходящего из XAML.

В завершении

В прошлых постах были рассмотрены некоторые новые функции XAML и Composition Interop, а также упрощенные основы использования Composition функций в Вашей XAML разметке.  Начиная от рисования Ваших UIElements с помощью CompositionBrushes и применения подсветки, чтобы выровнять анимацию UIThread. Теперь Composition API становится более доступной, чем когда-либо.
В следующем посте мы расскажем о создании удивительных Composition эффектов и об эволюции Fluent Design.





Posted on 8. July 2017

Взаимодействие и Движение с Visual Layer in Windows 10 Creators Update

https://blogs.windows.com/buildingapps/2017/06/27/smooth-interaction-motion-visual-layer-windows-10-creators-update/amp/

API-интерфейс Composition оснащен мощным механизмом анимации, который обеспечивает быстрое движение, выполняемое в отдельном процессе вашего UWP приложения. Это гарантирует постоянство 60 кадров в секунду при запуске вашего приложения на устройстве IoT, а также на игровых девайсах. Это просто и очень быстро! Это необходимая возможность для внедрения Fluent Design System, которая сподвигла Microsoft создавать ощущение кинематографического движения в UWP приложениях.

 

 

API-интерфейсы Composition также предоставляют то, к чему вы, вероятно, никогда не имели доступа раньше: возможность создавать высокопроизводительные, низкоуровневые пользовательские анимации, управляемые манипуляциями, как показано выше. Microsoft хочет, чтобы визуальные эффекты были быстрыми и бесперебойными, чтобы сенсорные взаимодействия были качественными и продуктивными. Перенос визуального изображения с помощью пальца или цифровой ручки должен приводить к тому, что визуальный элемент работает независимо от того, как быстро вы нажимаете и тянете его по дисплею.

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

Быстрая и подвижная анимационная система

Visual Layer поддерживает анимацию как для ключевого кадра, так и для анимации выражений. Если вы раньше работали с анимацией XAML, вы, вероятно, уже знакомы с тем, как работают ключевые кадры. В анимации ключевого кадра вы устанавливаете значения для некоторого свойства, которое со временем хотите изменить, а также необходимо назначить продолжительность для изменения: в приведенном ниже примере начальное значение, среднее значение, а затем конечное значение. Система анимации будет следить за анимацией - другими словами, создавая все значения между теми, которые вы явно указали, на основе выбранной функции. Linear или Cubic Bezier -  система анимации будет использовать это для определения значений при интерполяции.

 

CubicBezierEasingFunction cubicBezier = _compositor.CreateCubicBezierEasingFunction(new Vector2(.17f, .67f), new Vector2(1f, 1f));
ScalarKeyFrameAnimation blurAnimation = _compositor.CreateScalarKeyFrameAnimation();
blurAnimation.InsertKeyFrame(0.0f, 0.0f);
blurAnimation.InsertKeyFrame(0.5f, 100.0f);
blurAnimation.InsertKeyFrame(1.0f, 0.0f);
blurAnimation.Duration = TimeSpan.FromSeconds(4);
blurAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
_brush.StartAnimation("Blur.BlurAmount", blurAnimation);

 

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

 

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

Решающий код, который подключает шестерни для анимации, находится в следующем примере кода, который использует новую Expression Builder Library - компонент с открытым исходным кодом, выпущенный в Creators Update для создания анимаций выражений. Вышеприведенное выражение говорит о том, что анимация должна ссылаться и управляться свойством RotationAngleInDegrees Visual, которое обозначается параметром «previousGear». В следующей строке текущее свойство RotationAngleInDegrees Visual в конечном итоге анимируется на основе значения, указанного в выражении.

 

private void ConfigureGearAnimation(Visual currentGear, Visual previousGear)
{
    // If rotation expression is null then create an expression of a gear rotating the opposite direction

    var _rotateExpression = previousGear.GetReference().RotationAngleInDegrees;

    // Start the animation based on the Rotation Angle in Degrees.
    currentGear.StartAnimation("RotationAngleInDegrees", _rotateExpression);
}

 

Но что если анимация может управляться другой анимацией, вам может быть интересно, не могли бы вы также задействовать анимацию с чем-то более конкретным, как пользовательский ввод? Да, Это возможно!

Великолепие ScrollViewer ManipulationPropertySet

Управлять анимацией из ScrollViewer с помощью XAML-Composition interop довольно просто. При наличие всего несколько строк кода, вы можете улучшить визуализацию существующего элемента управления ScrollViewer с помощью CompositionAnimation, используя метод GetScrollViewerManipulationPropertySet в классе ElementCompositionPreview. Используя выражение анимации, вы можете привязать свою анимацию к позиции вашего компонента ScrollViewer.

 

Вы бы использовали эту технику, если бы захотели добавить эффект смещения в ваш XAML или создать "липкий" заголовок, который остается на месте, когда содержимое прокручивается под ним. В демонстрационном примере, показанном ниже (исходный код), ScrollViewer используется даже для управления эффектом смещения в ListView.

 

Добавление смещения на страницу XAML может быть выполнено с помощью нескольких строк.

 

// Note: We're not using the ScrollViewer's offset values directly. Instead, we use this PropertySet which holds the position values of the ScrollViewer in real-time.
var scrollPropSet = _scrollProperties.GetSpecializedReference();
var startOffset = ExpressionValues.Constant.CreateConstantScalar("startOffset", 0.0f);
var parallaxValue = 0.5f;
var itemHeight = 0.0f;
var parallax = (scrollPropSet.Translation.Y + startOffset - (0.5f * itemHeight));
_parallaxExpression = parallax * parallaxValue - parallax;
_parallaxExpression.SetScalarParameter("StartOffset", (float)args.ItemIndex * visual.Size.Y / 4.0f);
visual.StartAnimation("Offset.Y", _parallaxExpression);

 

 

Еще больше красоты в InteractionTracker

Управление анимацией выражений с помощью ScrollViewer чрезвычайно мощное, но что делать, если вы хотите управлять анимацией с помощью сенсорных жестов, которые не ограничиваются жестом панорамирования / увеличения? Кроме того, при использовании манипуляций ScrollViewer ваши анимации связаны с реагированием на поток пользовательского интерфейса и могут потерять это ощущение, когда поток пользовательского интерфейса увязнет.

Что делать, если вы хотите потянуть предметы к себе пальцем, как в демонстрационной версии ниже (исходный код), или анимировать несколько летящих изображений по экрану и на экране, как это происходит в демо в верхней части этой публикации (исходный код)?

 

Чтобы достичь этих эффектов, вы должны использовать новые классы InteractionTracker и VisualInteractionSource. InteractionTracker - это конечный инструмент, который может управляться активным входом. InteractionTracker также поддерживает ряд свойств, таких как Position и ScalePosition, как часть поддержания состояния. Это то, что вы подключаете к анимации. С другой стороны, класс VisualInteractionSource определяет, какой вход вы будете использовать для вождения вашего InteractionTracker, а также когда начинаете обработку ввода (в частности сенсорное).

 

Следующий пример кода демонстрирует базовую реализацию InteractionTracker. ViewportVisual - это обычная поддержка Visual для корневого элемента на странице. Вы используете ее как VisualInteractionSource для трекера. При этом вы указываете, что отслеживаете манипуляции X и Y. Вы также указываете, что хотите отслеживать инерционное движение.

 

_tracker = InteractionTracker.Create(_compositor);

var interactionSource = VisualInteractionSource.Create(viewportVisual);

interactionSource.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
interactionSource.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;

_tracker.InteractionSources.Add(interactionSource);

 

Привязка трекера к анимации выражений работает в основном так же, как подключение шестерни Visual к другой Visual передаче, как было сделано ранее. Вы вызываете фабричный метод CreateExpressionAnimation в текущем Compositor и ссылаетесь на свойство Position трекера.

 

ar positionExpression = _compositor.CreateExpressionAnimation("-tracker.Position");
positionExpression.SetReferenceParameter("tracker", _tracker);

contentVisual.StartAnimation("Offset", positionExpression);

 

Этот код использует позицию InteractionTracker для создания бесперебойной анимации для смещения Visual. Вы также можете включить анимацию Blur и Opacity для других визуальных эффектов. Это приведет к тому, что все три анимации будут работать вместе, со значениями, основанными на том, как далеко пользователь перетащит палец, чтобы получить удивительно подвижный визуальный эффект. Запустите демо-версию и попробуйте (исходный код).

Это основы управления любой анимацией с любого входа. Все действия будут зависеть от вас.

В завершение

Экспрессионные анимации и взаимодействия с визуальным слоем - это темы, которые быстро набирают спрос. Для подробного ознакомления, мы рекомендуем следующие видеоролики и статьи: