Maxime FRAPPAT

Hum …no thanks ! – Lordinaire

Tag: Animation

[UWP] ReactiveUI & UWP Community Toolkit

Today, I try to make an UWP app with ReactiveUI and UWP Community Toolkit to do some amazing effects and animations. My main goal is to be able to add effects to my view without touching the code behind. To do that, I used a mix of behaviors, triggers and actions.

Reactive ViewModel

using ReactiveUI;
using System;
using System.Reactive;
using System.Threading.Tasks;
using UWPReactiveUI.Services.Impl;
using UWPReactiveUI.Services.Interfaces;
using UWPReactiveUI.Services.Models;

namespace UWPReactiveUI.Core
{
    public class HipsterViewModel : ReactiveObject
    {
        private ObservableAsPropertyHelper<HipsterSentence> _sentence;
        public HipsterSentence Sentence
        {
            get { return _sentence.Value; }
        }

        private ObservableAsPropertyHelper<bool> _isLoading;
        public bool IsLoading
        {
            get { return _isLoading.Value; }
        }

        public ReactiveCommand<Unit, HipsterSentence> ExecuteGetSentence { get; protected set; }

        public HipsterViewModel()
        {
            ExecuteGetSentence = ReactiveCommand.CreateFromTask(GetSentenceAsync);

            _isLoading = ExecuteGetSentence.IsExecuting.ToProperty(this, x => x.IsLoading, true);

            _sentence = ExecuteGetSentence.ToProperty(this, x => x.Sentence, new HipsterSentence { Text = "Hipster Eggs !" });
        }

        public async Task&lt;HipsterSentence&gt; GetSentenceAsync()
        {
            // We should use an IoC
            IHipsterService hipsterService = new HipsterService();

            // To be able to see the effects (for the demo)
            await Task.Delay(TimeSpan.FromSeconds(3));

            return await hipsterService.GetSentenceAsync();
        }
    }
}

The app does one thing (but do it well!) : when you execute the ExecuteGetSentence command, it returns some random ‘hipster’ sentences. It is based on this API : http://hipsterjesus.com/
If you are not very familiar with functional reactive programming, I highly recommend you to start with this introduction : https://github.com/reactiveui/ReactiveUI#introduction

Convert behavior to action

The UWP Community Toolkit give you a huge amount of eay-to-use effects (like blur, fade, scale, …) and that’s what I need here :) Let’s try to apply some blur effect on the UI when the command is launched.

The first solution is to call the effect in the code behind but I don’t want that, it hardly links the View with ViewModel :

myUIElement.Blur(value: 10, duration: 500, delay: 250);   

The second solution is to use a behavior :

<interactivity:Interaction.Behaviors>
    <behaviors:Blur Value="10" Duration="500" Delay="250" AutomaticallyStart="True" />
</interactivity:Interaction.Behaviors>

Well, it works fine but the effect is apply once and I can’t start it with some conditions. Let’s try to transform the Behavior to an Action. An Action can be call using a Trigger, a Trigger can be call using a Behavior.

Based on the behaviors source code, we can create two new classes :

CompositionActionBase.cs

using Microsoft.Toolkit.Uwp.UI.Animations.Behaviors;
using Microsoft.Xaml.Interactivity;
using Windows.UI.Xaml;

namespace UWPReactiveUI.Actions
{
    public abstract class CompositionActionBase : DependencyObject, IAction
    {
        /// <summary>
        /// The duration of the animation.
        /// </summary>
        public static readonly DependencyProperty DurationProperty = DependencyProperty.Register(nameof(Duration), typeof(double), typeof(CompositionBehaviorBase), new PropertyMetadata(1d));

        /// <summary>
        /// The delay of the animation.
        /// </summary>
        public static readonly DependencyProperty DelayProperty = DependencyProperty.Register(nameof(Delay), typeof(double), typeof(CompositionBehaviorBase), new PropertyMetadata(0d));

        /// <summary>
        /// Gets or sets the delay.
        /// </summary>
        /// <value>
        /// The delay.
        /// </value>
        public double Delay
        {
            get { return (double)GetValue(DelayProperty); }
            set { SetValue(DelayProperty, value); }
        }

        /// <summary>
        /// Gets or sets the duration.
        /// </summary>
        /// <value>
        /// The duration.
        /// </value>
        public double Duration
        {
            get { return (double)GetValue(DurationProperty); }
            set { SetValue(DurationProperty, value); }
        }

        public abstract object Execute(object sender, object parameter);
    }
}

Blur.cs

using Microsoft.Toolkit.Uwp.UI.Animations;
using Windows.UI.Xaml;

namespace UWPReactiveUI.Actions
{
    public class Blur : CompositionActionBase
    {
        /// <summary>
        /// The Opacity value of the associated object
        /// </summary>
        public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(nameof(Value), typeof(double), typeof(Blur), new PropertyMetadata(1d));

        /// <summary>
        /// Gets or sets the Opacity.
        /// </summary>
        /// <value>
        /// The Opacity.
        /// </value>
        public double Value
        {
            get { return (double)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }

        public override object Execute(object sender, object parameter)
        {
            var element = sender as FrameworkElement;
            if (element == null)
                return false;

            if (AnimationExtensions.IsBlurSupported)
            {
                element.Blur(duration: Duration, delay: Delay, value: (float)Value)?.Start();
            }
            return true;
        }
    }
}

Reactive View

We can now use a DataTriggerBehavior to execute the blur action if a condition is valid (IsLoading == true).

<Page x:Class="UWPReactiveUI.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" xmlns:core="using:UWPReactiveUI.Core" xmlns:interactivity="using:Microsoft.Xaml.Interactivity" xmlns:trigger="using:Microsoft.Xaml.Interactions.Core" xmlns:actions="using:UWPReactiveUI.Actions" mc:Ignorable="d">
    <Page.DataContext>
        <core:HipsterViewModel />
    </Page.DataContext>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Border BorderBrush="BurlyWood" BorderThickness="1" Margin="10">
            <Border>
                <interactivity:Interaction.Behaviors>
                    <trigger:DataTriggerBehavior Binding="{x:Bind ViewModel.IsLoading, Mode=OneWay}" Value="True">
                        <actions:Blur Value="3" Duration="1000" Delay="0" />
                    </trigger:DataTriggerBehavior>
                    <trigger:DataTriggerBehavior Binding="{x:Bind ViewModel.IsLoading, Mode=OneWay}" Value="False">
                        <actions:Blur Value="0" Duration="1000" Delay="0" />
                    </trigger:DataTriggerBehavior>
                </interactivity:Interaction.Behaviors>

                <TextBlock Text="{x:Bind ViewModel.Sentence.Text, Mode=OneWay}" TextWrapping="WrapWholeWords" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="3" />
            </Border>
        </Border>

        <ProgressRing VerticalAlignment="Center" HorizontalAlignment="Center" IsActive="True" Width="50" Height="50" Visibility="{x:Bind ViewModel.IsLoading, Converter={StaticResource BooleanToVisibilityConverter},Mode=OneWay}" />

        <Button Grid.Row="2" Margin="10" Command="{x:Bind ViewModel.ExecuteGetSentence, Mode=OneWay}" Content="GET SENTENCE" />

    </Grid>
</Page>

Another solution

You can also use the VisualStateManager to handle conditional states to call actions.

Source code

https://github.com/Lordinaire/UWP_ReactiveUI_Sample

 

[Unity] Replay the same animation during its execution

When you use animators and animations in your game, you may want to be able to play an animation even if it’s already running.

To explain how to do this, we will create a scene with a simple square object. This square will have an animator component attached to it.

With transition

You can achieve an animation with transition by playing it with the CrossFade method.

Let’s create a new animation like this one :

animation_with_transition

Add a new C# script component attached to the cube object :

public class MoveBehavior : MonoBehaviour
{
    // Use this for initialization
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

    }

    void OnGUI()
    {
        if (GUI.Button(new Rect(10, 70, 50, 30), "Replay"))
        {
            var animator = GetComponent<Animator>();
            animator.CrossFade("Move", 1f);
        }
    }
}

If you play the scene and click on the “Replay” button, the animation will start.

Notice that if you click on the button again between 0 and 1 second, the animation will start transition, but if you click between 1 and 2 seconds nothing will happen. It’s because our animation during 2 seconds and we set the fading length to 1 second. To be able to play a transition all along the animation, set the fading length to 2 seconds.

Without transition

Unlike the CrossFade method, the Play method will not rewind to the beginning. So, if you want to replay an animation you can use a little trick.

Create your animation in two parts. The first part need to be a one-frame animation :

first_animation_without_transition

The second part is the “real” animation :

second_animation_without_transition

Edit the script with those snippet :

public class MoveBehavior : MonoBehaviour
{
    // Use this for initialization
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

    }

    void OnGUI()
    {
        if (GUI.Button(new Rect(10, 70, 50, 30), "Replay"))
        {
            var animator = GetComponent<Animator>();
            animator.Play("BeginMove");
        }
    }
}

By playing the BeginMove animation, it will transition to the EndMove after only one frame. So, if you play again BeginMove after 1 second, the animator current animation will be EndMove so you will be able to replay the animation to the beginning :)

Have fun !

Powered by WordPress & Theme by Anders Norén

%d bloggers like this: