1

I have a *.rive file and I want to use that in my WPF app like a loading spinner.

There is any way to use rive file in WPF using Image, Media Element etc.

Do I need to convert it as gif?

Dai
  • 141,631
  • 28
  • 261
  • 374
Udin M
  • 51
  • 5
  • First-off, please tell us what, exactly, a `RIV` file is.. I can't find any mention or description of it in any of the major file-types databases. e.g. https://fileinfo.com/search – Dai Nov 30 '21 at 09:03
  • Rive is a real-time interactive design and animation tool by Rive Inc.. Use the Rive editor to create vector based motion graphics that respond to different states and user inputs. Rive lets you create advanced timeline animations through animation mixing, interpolation and inverse-kinematics. Transition between animations using state machines. When we export it as .riv it generate a file with this extension. For more...(https://defold.com/extension-rive/) – Udin M Nov 30 '21 at 09:20
  • `rive` is not `riv`. – Dai Nov 30 '21 at 09:29
  • If it is vector-based you can use Paths and Shapes and storyboard animations to recreate it in WPF. I am not aware of a nuget-package or native support of this filetype. – Denis Schaf Nov 30 '21 at 09:38
  • @DenisSchaf It would be a _lot_ of work to recreate a Rive animation in WPF using WPF's own features. For example, Rive includes skeletal animations whereas WPF does not... and probably will never. – Dai Nov 30 '21 at 09:39
  • I would start by exporting as HTML5 and continue from there – Bizhan Nov 30 '21 at 09:40
  • @Bizhan How is that going to help? – Dai Nov 30 '21 at 09:40
  • @Dai I thought it was obvious since the animation in HTML5 and WPF-XAML have great similarities. – Bizhan Nov 30 '21 at 09:43
  • @Bizhan It's not that HTML5 and WPF's animation features are similar (they really aren't, IMO), but that _in this case_ it's very incompatible: Rive animations aren't exported as CSS `@keyframes` animations: you still need their Web runtime library. Maybe if they had SVG export as an option (does it? I don't know) then you could run that through an SVG-to-XAML converter but you lose all the _structured_ control over the animation. – Dai Nov 30 '21 at 09:44
  • @Dai I don't know either. I never worked with Rive. But I automatically assumed a "vector-based animation software" must have a vector output! If what you're saying is true then I would contact rive for a feature request. – Bizhan Nov 30 '21 at 09:51
  • 1
    @Bizhan Right, that was my first thought when I was reading about Rive, and I wondered how Rive was so _big_ as a brand if it's just yet another vector animation software tool, then I read their technical docs and saw that their real-value is exposing structured animations to host programs - so you can _easily_ do [things like this](https://codepen.io/m3eu/pen/VwYBbwO) with far less handwork. – Dai Nov 30 '21 at 09:53

2 Answers2

2

Short answer: You cannot

  • Rive is not just an animation tool, but an animation framework that requires a specially written runtime for different kinds of hosts.
  • Rive's documentation says they only have first-party support for:
    • The web (and a first-party React wrapper).
    • iOS, Android, Flutter, Tizen
    • React Native
    • "C++"
  • Note the lack of WPF, XAML, WinUI, UWP, Jupiter, Silverlight, WinForms, etc.
    • Microsoft's desktop developer story in 2021 sure is fun, isn't it?
      • MS hasn't had a clear and consistent desktop story since Windows 7, it's depressing, and still awful.

I note that "C++" isn't a platform, just a language, so it's odd that they describe it like that. Anyway, their C++ runtime ships with a renderer for Skia, which isn't of much use

Long answer: You can, if you want to put the effort in

  1. Clone and build their C++ runtime.
  2. Replace the Skia renderer with a new renderer of your own creation that renders to WPF somehow.
    • You can host Skia within WPF, but it's an opaque surface: the structure and contents of the Rive animation wouldn't be rendered directly by WPF which would introduce inefficiencies.
    • Also, I think WPF is still stuck on DirectX 9, and there might be functionality in Rive that would benefit from being on DX12.
  3. And the rest is an exercise for the reader.
Dai
  • 141,631
  • 28
  • 261
  • 374
1

I haven't tested it but

here is a runtime for rive in C# + UWP https://github.com/rive-app/rive-sharp

here is a way how to display UWP in WPF In WPF control - display a UWP app

max
  • 21
  • 2