Simple keyframes and tweening animation for UI/UX designers - is there any plugin for simple animation?

[A0R]

As UX designer we often need to do a some simple UI animations for UX demonstration, and  moving between different apps is not an ideal. When designing for GUI we need to build assets for knob, sliders and buttons (music apps, see attached example) that have range of png images and a simple keyframe and in between animation is all that needed. 

I understand from different form posts that its not on the to do list on the Affinity development team timeline but I hope that you will change that perspective for the benefit of supporting UI/UX designers we just need simple to use keyframe and tweening (in between) animation tool with the ability to export as final GIF or each keyframe to PNG.

* As for macro it will be great if we can get the ability to apply macro and define how many times it should run for example to stitch different photos of eace layer or external folder. Is there a way to do so?

 

Please don’t offer to use other apps or online tools, I don’t like to switch apps I just need simple to use animation plugin or built in solution for Affinity designer / photos and using something like Figma doesn’t always works. Also is there way to write program extension to Affinity using some scripting language?

*Also for creating something like a slider we need to define and export 128 or 64 steps, thats why animation with keyframes in between is needed..

Thank you

Edited March 1 by A0R

[retrograde]

Sorry, but as simple as you are describing what you need, you're looking at having to use another app at this point. Yes a simple timeline would be so awesome for a lot of simple scenarios, as opposed to a full blown animation feature set but unfortunately there is nothing on the horizon for this at the moment.

[A0R]

Thanks, I was hoping for an update to cover this ability as every other animation tool is simply too much for a simple task and the free ones like Kira app are more for drawing animation. Anyone can recommend mac app that is simple to use, have keyframes and in between auto transitions with vector layers other than Adobe after effect?

Edited March 2 by A0R

[Ron P.]

I use an app that meets some of your criteria, not all. Do you or have you experience with After Effects? If so then using Black Magic Design DaVinci Resolve, should be easier for you. Within DaVinci Resolve is Fusion, which can run circles around After Effects. It is a professional editing/production suite. It does come with a very steep learning curve. For the Pros they gladly pay the ~$300 price, BUT, they do have a Free version too, which is what I use. You can do just about everything in it, that can be done in the paid version. TBH, they could probably get away with charging over $1k for it. Black Magic's money comes from the hardware. Cameras, consoles for big production companies, that sell for $10k-$50k.

The reason I started using it, is the video editing, and I was tired of running up against the wall with the cheap editors, like Corel's, and wasn't going to throw money at Adobe. I tried others but didn't like them.

I'd recommend Googling video editors, animation apps (software) to find what might fit your needs.

[thomaso]

7 hours ago, A0R said:

Anyone can recommend mac app that is simple to use, have keyframes and in between auto transitions with vector layers other than Adobe after effect?

If you have "AE" subscribed you might be enabled to use "Animate", too.

Or check this list for vector tweening apps: https://rigorousthemes.com/blog/best-tweening-apps-to-create-animated-actions/

[A0R]

Ron P, thanks for the DaVinci Resolve tip I'm not familiar with this app will give it a try. 

Thomaso, I don't  have any experience with After Effects but used the old Adobe flash, which now is Adobe animate.. looking at some AE videos its great once you get familiar with few of the built in plugins and thanks for the url it got few apps that I didn't know about.

I do hope that at some point we can get a simple to use animation abilities as it almost a requirement for UX/UI and frontend development.

Edited March 3 by A0R

[BlueLiner]

Also a fan of DaVinci Resolve and Fusion. Lots of tutorials can be found on Youtube and the free version is likely all you will need. I was a former Vegas Pro user and have not looked back.

[retrograde]

On 3/1/2024 at 8:44 PM, A0R said:

Anyone can recommend mac app that is simple to use, have keyframes and in between auto transitions with vector layers other than Adobe after effect?

Yes it's called Keyshape. https://www.keyshapeapp.com/  and don't let the simple looking website and examples fool you into thinking it's too simple or not up to more complex animation work. It's way underrated and basically unknown. It is no After Effects but not everyone is looking for or even needs anything on that level. The team that develops it is in Finland I think and it seems that they are pretty low key about promoting it. Currently unfortunately there are only some really old tutorials on youtube on it but it does have a pretty robust help system which pretty much covers everything it can do. 

It's only for mac desktop, it's cheap-ish (30 bucks) and very powerful and stable and deceivingly simple to use. It has a 4.8 out of 5 on the app store. It's a vector animation tool that you can either copy and paste your vector artwork right from Designer into or if you open a file exported as an SVG from Designer it will honour the layers stack and names from your Designer file. Both preserving your vector paths, colours, transparency and drop shadows (it rasterizes these). It has a timeline, symbols, keyframes (including an auto keyframing button), pen tool, some basic shape tools, some simple interactivity options (onload, onclick, etc...) and a pretty full assortment of animatable transforms - opacity, rotation, scale, position (with motion paths), shape animations, easing interpolation presets, etc... and a pretty cool animation playback option called "stepped playback" which can give you that classic stop frame animation look. It also has an outline view mode similar to Designer for detailed path editing.

I use it for my simple animation work (https://www.kevincreative.com/Animation.html) and it can output to a wide variety of formats including svg, png, lottie (with free plugin), animated gif, mpeg4, WebP, sprite sheet, etc...  I even did a simple character walk cycle using it's hierarchy system that surprised the app developers as they had never seen it used in that way.

Wow this comment turned into a bit of a sales pitch didn't it 🙂 but until Serif develops some kind of animation app or feature set, if they ever do, this might be what you're looking for. Attached is a quick animation of a lever slider I did in it exported as an mpeg4 file created entirely in Keyshape including the drop shadow. Screenshot of the UI below as well.

[A0R]

retrograde, Thanks for the app recommendation, look simple and cover most of what I'm after.

Your logo and illustration are great! 

 

Update:
I also looked at Apple motion app and it's really good for doing animation hopefully this will help others.

[retrograde]

Thanks @A0R 

I looked at Apple Motion a while back as well but it seems to be a bit of a monster in terms or size and agility for what I needed and correct me if I'm wrong but I don't think it uses much in the way of a vector workflow if at all (maybe that has changed?). Plus there's the cost, compared to Keyshape, unless you really need Motions built in animation presets and some of its other bells and whistles, Keyshape's price, feature set and overall footprint is a pretty strong combination.

[Old Bruce]

2 minutes ago, retrograde said:

I looked at Apple Motion a while back as well but it seems to be a bit of a monster in terms or size and agility for what I needed and correct me if I'm wrong but I don't think it uses much in the way of a vector workflow if at all (maybe that has changed?)...

To the best of my knowledge there isn't a simple way to get vectors from an application like Designer into Motion. We can export slices as PDFs and Motion will import them. I seem to recall a method using Python and some special python routines and .... a couple of other things. Sorry my memory is what it is.

[retrograde]

22 hours ago, Old Bruce said:

To the best of my knowledge there isn't a simple way to get vectors from an application like Designer into Motion. We can export slices as PDFs and Motion will import them. I seem to recall a method using Python and some special python routines and .... a couple of other things. Sorry my memory is what it is.

In any case it seems maybe Motion is not the best route if you're looking to animate elements created in Designer using a vector workflow... I guess it really depends on what your needs are.

[A0R]

Yes, Motion is not the best tool for vector you need to cut parts in order to do simple animation, for now I'm just using Wick Editor or Apple keynote and plan to get Keyshape. Too bad some online editors are subscription based as there is some neat tools that even let you generate html/css code and clicked base animations.

Still, it would be great if Affinity can develop new tab with everything for vector animation and UX and offer it as additional app full price  most of the current design works involved web and video, but I understand that development takes lots of time.