Rive Animation and Events

22 Jul 2023, 10:34

Hello,

After a long period with out playing with Noesis, i come back to test the rive new feature, for me it works just like magic !
I tried to test the rating animation that is a demo animation from there website. I could import it and run it without any problems.
https://drive.google.com/file/d/1Loa5ra ... sp=sharing

I could to binding the the value from the animation to set it from my user control. But the animation is interactive and it seam that i couldn't have my clic on the rating to set my value in my usercontrol. I set my binding in mode two ways and nothing.

this is my code :

#if UNITY_5_3_OR_NEWER
    #define NOESIS
    using Noesis;
using System;
#else
    using System.Windows;
    using System.Windows.Controls;
#endif

namespace Testing
{
    public partial class UserControl: Noesis.UserControl
    {
        public UserControl()
        {
            InitializeComponent();
        }

        public int Counter
        {
            get { return (int)GetValue(CounterProperty); }
            set { SetValue(CounterProperty, value); }
        }

        public static readonly DependencyProperty CounterProperty =  DependencyProperty.Register(
            "Counter", typeof(int), typeof(UserControl), new PropertyMetadata(0));

        //rating rive test animation and data WORKS JUST IN ONE WAY C# => View
        public float Rating
        {
            get { return (float)GetValue(RatingProperty); }
            set { SetValue(RatingProperty, value); }
        }

        public static readonly DependencyProperty RatingProperty = DependencyProperty.Register(
            "Rating", typeof(float), typeof(UserControl), new PropertyMetadata(0f));

#if NOESIS
        protected override bool ConnectEvent(object source, string eventName, string handlerName)
        {
            if (eventName == "Click" && handlerName == "Button_Click")
            {
                ((Button)source).Click += this.Button_Click;
                return true;
            }
            else if (eventName == "MouseEnter" && handlerName == "Rv_MouseOn")//test event on rive animation WORKS
            {
                ((RiveControl)source).MouseEnter += this.Rv_MouseOn;
                return true;
            }
            else if (eventName == "GotMouseCapture" && handlerName == "Rv_MouseCapture")//test event on rive animation NOT WORKS
            {
                ((RiveControl)source).GotMouseCapture += this.Rv_MouseCapture;
                return true;
            }
            else if (eventName == "MouseLeftButtonUp" && handlerName == "Rv_MouseClickDown")//test event on rive animation NOT WORKS
            {
                ((RiveControl)source).MouseLeftButtonUp += this.Rv_MouseClickDown;
                return true;
            }
          
            return false;
        }

        private void InitializeComponent()
        {
            NoesisUnity.LoadComponent(this);

            //retreive the rive animation
            RiveControl rv = (RiveControl)FindName("Rating_Animation");
            rv.Visibility = Visibility.Visible;

            Rating = 3f;
        }

        private void Rv_MouseOn(object sender, MouseEventArgs args)
        {
            UnityEngine.Debug.Log("enter : "+args.LeftButton);
        }

        private void Rv_MouseCapture(object sender, MouseEventArgs args)
        {
            UnityEngine.Debug.Log("capture : " + args.LeftButton);
        }

        private void Rv_MouseClickDown(object sender, MouseButtonEventArgs args)
        {
            UnityEngine.Debug.Log("click");
        }

#endif

        private void Button_Click(object sender, RoutedEventArgs args)
        {
            Counter++;

            UnityEngine.Debug.Log("enter : " + Rating);

            if (Rating < 5)
                Rating++;
            else Rating = 0;
        }
    }}

MY XAML

<UserControl
  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:NoesisGUIExtensions="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions" mc:Ignorable="d" x:Class="Testing.UserControl"
  x:Name="Root"
 d:DesignWidth="1920" d:DesignHeight="1080"
 >
    <UserControl.Resources>
        <Storyboard x:Key="OnLoaded1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="stackPanel">
                <EasingDoubleKeyFrame KeyTime="0" Value="-200"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="stackPanel">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
        </EventTrigger>
    </UserControl.Triggers>
    <Grid>
        <StackPanel x:Name="stackPanel" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" d:LayoutOverrides="LeftMargin, RightMargin, TopMargin, BottomMargin">
            <StackPanel.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </StackPanel.RenderTransform>
            <Button Content="Click me" Click="Button_Click" Width="200" Height="100" FontSize="20"/>
            <TextBlock Text="{Binding Counter, ElementName=Root, StringFormat=Button clicked \{0\} time(s)}" Margin="5,0,0,0" VerticalAlignment="Center"/>
        </StackPanel>
        <NoesisGUIExtensions:RiveControl MouseEnter="Rv_MouseOn" GotMouseCapture="Rv_MouseCapture" MouseLeftButtonUp="Rv_MouseClickDown" x:Name="Rating_Animation" Width="846.4" Source="rating_animation.riv" Height="324.8" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="100,100,0,0">
            <NoesisGUIExtensions:RiveInput  InputName="rating" InputValue="{Binding Rating, ElementName=Root, Mode=TwoWay}"/>
        </NoesisGUIExtensions:RiveControl>
    </Grid>
</UserControl>

To be perfectly clear i wan't to be able to click on my animation to set my rating value in my usercontrol !

Thanks you for your time

22 Jul 2023, 18:27

Ok answer for myself previewmousdown seam to work now i can retreive a click on my animation, but my value is not updated with the new rating value !
Continue to explore it...

 
 ...
 else if (eventName == "PreviewMouseDown" && handlerName == "Rv_MouseClickDown")//test event on rive animation NOT WORKS
            {
                ((RiveControl)source).PreviewMouseDown += this.Rv_MouseClickDown;
                return true;
            }
            ...
            
        public void Rv_MouseClickDown(object sender, MouseButtonEventArgs args)
        {
            UnityEngine.Debug.Log("click");
        }

Thanks

23 Jul 2023, 09:54

Ok i finaly think that is not possible to retreive value from the rive animation so i made a tricky solution, i drawed 5 rectangle in front of the animation.
https://drive.google.com/file/d/1Uf5BtZ ... sp=sharing

I expose a previewmouseleftevent of the rectangle in my code, and i set the rating value according to the rectangle Name so 1 for my rectangle 1 etc...
It work well and my rating is updating to the correct value.

My code :

 <Grid Width="500" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="50,53,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="81*"/>
                <ColumnDefinition Width="93*"/>
                <ColumnDefinition Width="91*"/>
                <ColumnDefinition Width="85*"/>
                <ColumnDefinition Width="96*"/>
            </Grid.ColumnDefinitions>
            <NoesisGUIExtensions:RiveControl 
            x:Name="rating_animation"
            Source="rating_animation.riv" Grid.ColumnSpan="5">
                <NoesisGUIExtensions:RiveInput x:Name="rating_value"  InputName="rating" InputValue="{Binding Rating, ElementName=Root}"/>
            </NoesisGUIExtensions:RiveControl>
            <Rectangle x:Name="int1" PreviewMouseLeftButtonDown="Rect_PreviewMouseLeftButtonDown" Margin="0" Stroke="Red" StrokeThickness="2" Fill="#00000000"/>
            <Rectangle x:Name="int2" PreviewMouseLeftButtonDown="Rect_PreviewMouseLeftButtonDown" Margin="0" Stroke="Red" StrokeThickness="2" Grid.Column="1" Fill="#00000000"/>
            <Rectangle x:Name="int3" PreviewMouseLeftButtonDown="Rect_PreviewMouseLeftButtonDown" Margin="0" Stroke="Red" StrokeThickness="2" Grid.Column="2" Fill="#00000000"/>
            <Rectangle x:Name="int4" PreviewMouseLeftButtonDown="Rect_PreviewMouseLeftButtonDown" Margin="0" Stroke="Red" StrokeThickness="2" Grid.Column="3" Fill="#00000000"/>
            <Rectangle x:Name="int5" PreviewMouseLeftButtonDown="Rect_PreviewMouseLeftButtonDown" Margin="0" Stroke="Red" StrokeThickness="2" Grid.Column="4" Fill="#00000000"/>
        </Grid>

#if NOESIS
        protected override bool ConnectEvent(object source, string eventName, string handlerName)
        {
            UIElement s = (UIElement)source;
            UnityEngine.Debug.Log("/ ev / "+eventName+"/ hd / "+handlerName+"/ s /"+source);

            if (eventName == "Click" && handlerName == "Button_Click")
            {
                ((Button)source).Click += this.Button_Click;
                return true;
            }
            else if (eventName == "MouseEnter" && handlerName == "Rv_MouseOn")//test event on rive animation WORKS
            {
                ((RiveControl)source).MouseEnter += this.Rv_MouseOn;
                return true;
            }
            else if (eventName == "PreviewMouseDown" && handlerName == "Rv_MouseClickDown")//test event on rive animation NOT WORKS
            {
                ((RiveControl)source).PreviewMouseDown += this.Rv_MouseClickDown;
                return true;
            }
            else if (eventName == "MouseLeave" && handlerName == "Rv_Mouseleave")//test event on rive animation NOT WORKS
            {
                ((RiveControl)source).MouseLeave += Rv_Mouseleave;
                return true;
            }
            else if (eventName == "TouchDown" && handlerName == "Rv_touchdown")//test event on rive animation NOT WORKS
            {
                ((RiveControl)source).TouchDown += Rv_touchdown;
                return true;
            }
            else if (eventName == "PreviewMouseLeftButtonDown" && handlerName == "Rect_PreviewMouseLeftButtonDown")//test event on rive animation NOT WORKS
            {
                ((Rectangle)source).PreviewMouseLeftButtonDown += Rect_PreviewMouseLeftButtonDown; ;
                return true;
            }

            return false;
        }

        private void Rect_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs args)
        {
            Rectangle r = (Rectangle)sender;

            switch (r.Name)
            {
                case "int1":
                    Rating = 1;
                    break;
                case "int2":
                    Rating = 2;
                    break;
                case "int3":
                    Rating = 3;
                    break;
                case "int4":
                    Rating = 4;
                    break;
                case "int5":
                    Rating = 5;
                    break;
            }

            UnityEngine.Debug.Log("rct value : " + Rating);

        }

But I think it is a little tricky to have this filled rectangles in front of my anim, does i do this wrong ?
Do you have a better solution ?

https://drive.google.com/file/d/1QLjdTE ... sp=sharing

THanks

24 Jul 2023, 12:55

Hi,

You mean to get the actual value of an input that changed because of mouse interaction with the Rive, right?

Yes, the RiveInput is not updating its InputValue property, so even if you used a TwoWay binding the viewmodel property bound won't get the latest value.
Could you please report this in our bugtracker? We will think what could be the best way to get this working.

Cheers.

24 Jul 2023, 14:07

Hi,

You mean to get the actual value of an input that changed because of mouse interaction with the Rive, right?

Yes, the RiveInput is not updating its InputValue property, so even if you used a TwoWay binding the viewmodel property bound won't get the latest value.
Could you please report this in our bugtracker? We will think what could be the best way to get this working.

Cheers.

Yes exactly, it would be very helpful to have this feature no need to deal with button or else ! I will report this thanks you

24 Jul 2023, 16:41

Thanks for the ticket! (#2654)

Rive Animation and Events

Rive Animation and Events

Re: Rive Animation and Events

Re: Rive Animation and Events

Re: Rive Animation and Events

Re: Rive Animation and Events

Re: Rive Animation and Events

Who is online