9 years ago from Kenny Chen, Director of User Experience Design
Motion is becoming more and more important with interaction in mobile apps. I'm wondering what the general consensus of what tools I should be playing with specifically for mobile apps.
A lot of people on our team use Tumult Hype to mockup a quick interaction. It's an animation tool similar to Adobe Edge Animate. It doesn't offer the same easing and physics options as Origami/Pop, but if you're prototyping something quick and dirty, Hype is pretty great.
You can also mirror your Hype project to your iOS devices with Tumult Reflect (free).
It supports touch events for interactivity.
And last, but certainly not least, is my favorite feature: built-in GIF exporting.
Another vote here for Hype. It’s great if you’re working within it’s constraints.
When things get tricker with timing, I usually turn to Cheetah 3D. It’s usually overkill, but animation can be so precise. I should really learn After Effects.
Framer.js and Framer Studio would be another great option, especially if you want to build a prototype (rather than just fine tuning a single animation).
Using Storyboards in Xcode is yet another option, if you're building an iOS app with fairly standard behaviour.
For really quick and dirty concepts, I sometimes use Photoshop. It can be a good way to get a simple idea across, and it also has GIF exporting. Nothing says “JUST LIKE THIS!” like a GIF in a chat window. :D
Thank you for your suggestion! I bought Hype several months ago but haven't use it since then. I might have to look into using it more.
Anybody here tried the Pixate beta? It looks really promising, hope to get my hands on it soon.
http://famo.us/ How about this?
I've been using Facebook's Origami along with Quartz Composer. It certainly has a learning curve but once you get the hang of it, it becomes very useful.
There is also Pixate, which I haven't tried yet, but looks really promising. The big thing with Pixate is that it seems simpler and more powerful than QC. Also, according to Pixate's twitter they plan on adding code export which should make the developers life a lot easier when the animation code is already generated. Again, I haven't tried Pixate, so everything I said could be false.
Another thing worth checking out is Framer.Js. Haven't tried this one either but its gotten a lot of attention.
Hope this helps! :)
I typically use After Effects or Edge Animate for my projects!
Thank you. I will try them out - any good tutorials you know of?
There was a thread a while back that had some good resources for AE.
sorry for the shameless plug: Animatron
free, browser based, export to html5, gifs and videos. export to animated svg is coming really soon.
check what our users did with it: http://www.animatron.com/explore#staff-picks
When you finish your animated marketing video, at that point the time has come to publish it. You can transfer it to your own site or you can stack it on a video hosting service https://www.videomash.co.uk/, for example, YouTube or Vimeo and install it in your site. For most clients utilizing YouTube or Vimeo will be a superior decision. Nothing incorrectly in hosting the video on your site; however it will begin gobbling up your data transmission and if numerous viewers watch your video chances are you may come up short on your transfer speed restrain. Be that as it may, in the event that you utilize YouTube or Vimeo you don't have these issues. When you publish it on any of this video hosting service, you can insert the video on your site. You can likewise urge your viewers to implant it on their site to get most extreme perspectives.
I use InVision for quick prototyping (basic screen-flows) and Facebook's Origami if I want to prototype more complex interactions/animations using individual layers.
Currently experimenting with Pixate and Principle, they fall right in the middle, as they are easier than Origami (but for more basic animations) and harder than InVision (for the whole app screen-flow).
You're right, Motion is becoming more and more important and I'm facing the same conundrum. I guess After Effects is the standard in the industry for creating more subtle custom animations. I'll have to get into it eventually.
Too bad there's no one tool to fit all our needs at the moment. Joggling between the different tools out there is a tedious process.
Keynote + Magic Move for simple fades, translations and scaling.
For all of the mentions of Xcode, does anyone have any recommendations on learning Core Animation?
Adobe Edge is super heavy about browser performance!
I personally found bounce.js really easy to use and requires zero coding ability. It's simple to tweak and integrate. If you read the article there's a lot of good knowledge re: animations too.
http://bouncejs.com/https://medium.com/tictail-makers/giving-animations-life-8b20165224c5
I've also tried http://framerjs.com/ but I don't code much so it was a little over my head.
Looks like this question resurface again! I'm sure I've seen this question awhile ago.
Anyway, it really depends on what you need to archive, either quality, speed, interaction, or integration level.
Nothing surpass the quality of after effects so far, but it does take time to craft each one of them.
Quick and dirty would be PowerPoint or Keynote just to prove a point of interactivity. Nothing beats the speed of this for me so far.
Interaction wise, origami and framer.js does it for me. Lots more support for the origami community recently, but it does mean learning how to wire the flow up. Framer however have a distinct advantage for when you want to carry the prototype around on mobile. Huge plus for ease of use if you are familiar with JS.
And nothing comes close to integration level of doing it in Xcode itself. Bigger learning curve but you'll get to pass the code to devs once you are happy with it. As well as html/CSS/JS prototype for the web versions. Though more time and learning curve if you're unfamiliar with either. Also check out Meng To's design + code for some Xcode read.
Many many more ways of doing this mentioned here. So pick one that fits you best. Takes time to experiment with all of them to find which you like best. :)
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now