05. Introduction to Rive

Introduction

For this next project we will be using a software called Rive. Rive is an animation software designed for interactivity for use in things like games, websites, (mobile) apps, etc.

How it works/pricing model/etc.

Rive, unfortunately, very recently changed their pricing model. It is free to use, but costs money to be able to export anything (ie to a website, Unreal Engine, Unity); which you will need to do for the next project.

That being said, Rive has graciously (by that I mean for free) allowed us to have a shared workspace where you will have the ability to create and export files.

Rive can import images, but is closer in functionality to Illustrator in terms of the design component.

You can use it via the web, or via a standalone app. I assume they are probably using something like electron that allows them to export web apps as applications, but it should be more performant in the desktop version.

What we will be doing in class

We will basically be doing the below demo, and I will walk you through it.

What we'll go over

  • Rive general layout, and Design vs Animate

  • Creating the button graphics

    • (create two rectangles, change their color)
    • (add text)
    • (group them together)

  • Creating the animated states

    • (understand how keyframes work)
    • (easing keyframes)

  • Having the animation trigger via hover

    • (transitions)
    • (how the State Machine works)
    • (Booleans, Triggers, Listeners, etc.)

  • Having another animation trigger via click

    • (multiple layers)
    • (resolving different objects using the same property)

  • Exporting to a web page

    • (what you need to change)

Rive code template

You can see a working example here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rive BUTTON demo</title>
  </head>

  <body>
    <!-- this should be the size of the artboard we had in the RIVE app-->
    <canvas id="canvas" width="500" height="500"></canvas>

    <!-- we link this for RIVE to do RIVE things-->
    <script src="https://unpkg.com/@rive-app/canvas"></script>
    <script>
      const r = new rive.Rive(
      {
        /* this should be the name of your .riv file */
        src: "button.riv",
        canvas: document.getElementById("canvas"),
        autoplay: true,
        // artboard: "Arboard", // Optional. If not supplied the default is selected
        /* make sure this matches your state machine */
        stateMachines: "handle hover",
        
        onLoad: () => 
        {
          // Ensure the drawing surface matches the canvas size and device pixel ratio
          r.resizeDrawingSurfaceToCanvas();
        },
      });
      
    </script>
  </body>
</html>

Homework (for 03/19)

  • Do the demo we started in class

  • Alter it in some meaningful way, consider some of the following:

    • make it change rotation, position, scale in some other way
    • alter the text
    • add little "confetti" animation
    • change the color(s)
    • make the button look three dimensionally pressed

  • Put the .riv file onto your Purchase webspace with the following HTML (see above), link your files in the google drive, as well as a link to your Purhcase webspace in a text file.