Creating Perfectly "up to spec" Animations
I'm working with a designer right now that likes to work a lot with After Effects. They create beautiful, well timed animations that look great, but I'm having trouble actually implementing the designs.
I can make everything look perfect, as in everything is the right size, shape, color, etc., but I can't get the movements to feel perfect, like they are in the spec. I can try my best to eyeball it, and tweak my animation parameters until things look close enough to the original design, but this isn't very satisfying. All of that tweaking and recompiling is super time consuming, and not very fun, and in the end things don't always feel correct as I can only approximate the timing functions.
Are there any tools that make implementing After Effects animations in iOS easier?
I would suggest that you take a look at my animation library for iOS. iOS Animation Examples With this native library you can import Quicktime video data using the Animation codec and convert that data with exact timing already defined by the animators. This ability to export directly from After Effects can really save you a lot of time.
Related
How to best reproduce the closing activity ring animation from watchOS 4 on iOS? Im particularly interested in the rotating sparkling effect.
Here a still frame of the animation I'm talking about:
and here is a video of it.
Is it possible to implement something like this with Core Animation?
Here at the university of science in zürich in the usability lab, we use:
sketch or illustrator or designer.gravit.io for designing the svg sketches.
than we import it in after effects or in Haiku.ai for animating
and export it as .json for airbnbs animations library Bodymovin or also known as Lottie. Therefor are libraries for web, android and ios available.
The advantage of this solution over #bryanjclark "exported it as a series of images" is that the animation is sharp in every resolution (svg), it is only one .json file and you have the full control over its speed and frames.
Otherwise if you really want to do it with code only, give a look at this Article, done with OpenGL ES2.0.
Or with the AnimationCore example in this SO Answer.
I’m nearly-certain that is a pre-rendered animation, not something generated on-device. (If it is generated on-device, it’s not something you’d have API access).
I’d bet that:
a designer worked it up in a tool like AfterEffects,
exported it as a series of images,
then the developers implemented it using something like WKImageAnimatable
You can see other developers using WKImageAnimatable to build gorgeous animations in their WatchKit apps - for example, Cultured Code’s app Things (watch the video there!) has some really terrific little animation flourishes that (almost-definitely) use WKImageAnimatable under-the-hood!
I'm developing a app that will showcase products. One of the features of this app is that you will be able to "rotate" the product, using your finger/Pan-Gesture.
I was thinking in implementing this by taking photos of the product from different angles so when you "drag" the image, all I would have to do is switch the image according. If you drag a little, i switch only 1 image... if you drag a lot, i will switch them in cadence making it look like a movie... but i have a concerns and a probable solution:
Is this "performatic"? Since its a art/museum product showcase, the photos will be quite large in size/definition, and loading/switching when "dragged a lot" might be a problem because it would cause "flickering"... And the solution would be: instead of loading pic-by-pic i would put them all inside one massive sheet, and work through them as if they were a sprite...
Is that a good ideia? Or should I stick with the pic-by-pic rotation?
Edit 1: There`s a complicator: the user will be able to zoom in/out and to rotate the product in any axis (X, Y and Z)...
My personal opinion, I don't think this will work the way you hope or the performance and/or aesthetics will not be what you want.
1) Taking individuals shots that you then try to keyframe to based on touch events won't work well because you will have inevitable inconsistencies in 'framing' the shots such that the playback won't be smooth
2) The best way to do this, I suspect, will be to shoot it with video and shoot it with some sort of rig that allows you to keep the camera fixed while rotating the object
3) I'm pretty sure this is how most 'professional' grade product carousel type presentations work
4) Even then you will have more image frames than you need -- not sure whether you plan to embed the images files in app or download on demand -- but that is also a consideration in terms of how much downsampling you'll need to do to reduce frames/file size
Suggestion
Look at shooting these as video (somewhat like described above) and downsampling and removing excess frames using a video editor. Then you could use AVFoundation for playback and use your gestures to 'scrub' into the video frames. I worked on something like this for HTML playback at a large company and I can assure you it was done with video.
Alternatively, if video won't work for you. Your sprite sheet solution might work (consider using SpriteKit). But then keep in mind what I said about trying to keyframe one off camera shots together -- it just won't work well. Maybe a compromise would be to shoot static images but do so by fixing the camera and rotating the objects at very specific increments. That could work as well I suppose but you will need to be very careful about light and other atmospehrics. It doesn't take much variation at all to be detectable to the human eye causing the whole presentation to seem strange. Good luck.
A coder from my company did something like this before using 360 images of an object and it worked just great but it didn't have zoom. Maybe you could add zoom by adding a pinch gesture recognizer and placing the image view into a scroll view to zoom in on the static image.
This scenario sounds like what you really need is a simple 3D model loader library or write it in OpenGL yourself. But this pan and zoom behavior is really basic when you make that jump to 3D so it should be easy to find lots of examples.
All depends on your situation and time constraints :)
At the moment i can draw a route on a map.
On the map i can zoom and i can pan. If the route is very big it goes really slow.
Therefor i want to do it with OpenGl.
From the map i can convert coordinateToPixel and get the current zoom.
I thought it would be the best to base the translation and zoom on that for the transformation matrix.
I never worked with OpenGL before. I have been reading stuff for the last few hours but most stuff i read is outdated or goes into things i don't care about for now like shaders.
Can someone provide me with resources for simple stuff like on the image?
I never worked with OpenGL before.
You are asking a lot, and I do mean a lot, of work from yourself if you want to switch from using native iOS drawing methods to using an advanced real-time rendering system that you don't even know yet.
I agree with Brad Larson that you are going to go much further and faster by leveraging the tools in iOS for your purpose. However, that does not mean you can't improve performance while using them.
I have found that when using Core Graphics for complicated drawing, you can dramatically reduce the time it takes to render a drawing by drawing it on a background thread. And Apple makes it much much easier to learn and use Grand Central Dispatch than the time it would take you to do all of this in OpenGL.
I learned how to use dispatch queues also for the single purpose of making drawing go faster. The simple technique is to render in the background, then take the results to the main thread for displaying them. Since you already have your drawing code figured out, you won't have to do much extra work to take this extra step, and I think you will be impressed with the performance.
I saw an improvement of at least 5 - 10 times in drawing speed when I implemented Core Graphics drawing with dispatch queues. They are really awesome.
Is it even possible to continue rendering and updating while resizing the window so that it doesn't stretch?
This is pretty deeply baked into XNA's Game class's behaviour. I'm dealing with this exact problem now, but I don't have a good solution yet. EDIT: I how now found a solution - but it doesn't answer the bit about scaling - so I've posted it as a question/answer pair over here.
You could possibly dive in with reflection and disconnect the events that pause the game's timer when you start resizing (and unpause it when you stop). I haven't tried this yet, I'm a bit loathe to do it without understanding why they exist in the first place.
(Personally I am thinking of having my game subscribe to the resize start/end events as well, and then pumping Update myself on an appropriate timer until XNA comes back. I wasn't going to worry about the scaling of the display.)
One way to work around this problem is to replace the Game class entirely. The XNA WinForms Sample provides a suitable replacement - although you have to implement your own Draw/Update loop and timing. I've just tested this in an old level editor and it works just as you want when resized.
Although it does slow down quite a bit when you make the window larger, as it constantly re-allocates the backbuffer to make it bigger. You could replace that behaviour to make it over-allocate the backbuffer size, so it doesn't reallocate so often.
The underlying problem has something to do with win32, and is described in some detail in this thread on GameDev.net. But it doesn't really provide a satisfying solution either.
It might be interesting to note that the WinForms sample draws on its OnPaint method (and you get a loop by constantly calling Invalidate). Whereas XNA's built-in Game class subscribes to Application.Idle.
I'm about to start work on my first big iOS app, but haven't really started any code yet... So it's all theoretical, and in my head at the moment as I'm still in the design phase.
Regardless, I know I'm going to need some animation effects in the app, so I'm just doing some research. In Flash (AS3), there are libraries like Tweener, and TweenLite that have TONS of easing options available.
Am I crazy, or are there really no other easing options available besides the four standard ones:
UIViewAnimationCurveEaseIn
UIViewAnimationCurveEaseOut
UIViewAnimationCurveEaseInOut
UIViewAnimationCurveEaseOut
Am I really going to have to dig into deep core animation to accomplish this? Or does anyone know of some 3rd party SDK that'll come in handy.
Thanks all...
Actually, there is one other: UIViewAnimationCurveLinear... Wow, that's a downer. The reason you're seeing such limited options, is because you've only explored UIView's Core Animation wrapper. Core Animation is much more powerful, and capable than that. If you need absolute fine-grain control over your animation, use CAKeyFrameAnimations, and if you need soft-grain control, use CAAnimation and CABasicAnimation. Even CATransaction will work. Basic easing curves were built into iOS because you are expected to provide the instructions for interactions more complicated than that. See here for an excellent series of easing curves that work great with CAKeyframeAnimation. Of course, this isn't for everyone... So there's a beta framework available with built-in tweeting values here
As the other poster suggested, keyframe animations let you describe motion along complex curves, or between designated key points.
If you want a custom timing function, you can create one pretty simply, and use it anywhere that you can specify one of the canned timing functions like linear or ease in, ease out. Take a look at the CAMediaTiming Function class reference. Specifically, look at the method functionWithControlPoints::::
That lets you create a timing curve using a single cubic bezier curve. That's your only option, I'm afraid.
What effect are you after, specifically?