Description
Interface & Motion was all about creating interactive and visual content for the web. During this project I designed, animated and coded an intractable animation for the web.
Product
Below you can view the video of the final product. I also included the link to the website where you can interact with the animation.
You can play with the demo yourself here
Process
Before I began this task, I already had experience with animation. I had animated human characters, objects, and also bird-like characters in the past. It seemed interesting to me to animate a character with four legs this time so I chose to animate a dog. This has many fun animation options and offers a good challenge.
)
I decided to design the dog to look like my real-life dog, Fellow. He's a three year old Boxer who's full of energy and loves to play.
)
I was going to animate the character using a skeleton technique which means I wont have to redraw every frame of each animation. Using a skeleton meant I had to break the character up in different parts that can overlap and move without it looking strange.
)
My favorite program for bone-based animation is Dragonbones. However, this software is starting to become outdated and is no longer being developed. For that reason, I had decided to switch to different software. There were a number of options with their own pros and cons.
Spine
Spine is the best software when it comes to character animation (mainly for games) based on bones. However, the basic package of Spine costs 80 euros, and when you want more options, one of which is Meshes (meshes are essential in my workflow), you have to pay over 300 euros. So that's not an option.
After Effects
In After Effects it is possible to work with bones to create animations as well. However, After Effects works (to my taste) a bit "clunky" with it. It doesn't feel smooth to use and with lesser hardware, After Effects is not pleasant to use. When using After Effects you're also dependand on paid software.
Rive
Rive is an open-source web-based animation app specifically made for the web. I have tried this once before but abandoned it because it did not have all the features I expected. Nowadays, Rive is much more developed and has almost all the functions that Dragonbones and Spine also have. You can also work well with states and interactions such as hovers and clicks, and there is a complete API in which animations can be easily placed with the canvas element in html. Ideal for this task. In the end, I decided to switch to Rive. In this way, I not only gain more experience with animation, but I also learn new software that I can use more often in the future.
Because I used Rive, I'm able to use the animations I made easily on the web.
Software
Photoshop
Rive
Visual Studio Code