Core Animation 2D water effect like shown.

Hello All,


I was wanting to create a 2d water/fluid like effect for an app that contains a graph. Something very simalar to this link/image below.

I was thinking since my end points could stay at the bottom of the iPhone and iPad screen I could animate the bezier path of points for the top line and set it to fill the complete oddly shaped path. Is this a fools errand can UIDynamics get me easier results? I am just looking for some advice on starting points. Eventually the subpaths in the top line will have to settle to the accurate graph readings but I wanted to add this "thinking/loading" animation effect before the graph gets populated. Is Core Animation the best route? I was thinking of testing a three sided square with the top part of the sqaure as the wavy jiggly line as a starting point. Does anyone see why I should avoid this route?


(Full disclosure/credit: This is from a designer named Joe Ski via Dribbble not me. I only show this as a visual reference to what I am trying to get close to in code.)


https://dribbble.com/shots/1694287-Animated-Graph?list=searches&offset=68


CAShapeLayer looks like a great choice for you. It's a bit difficult to edit path objects (I haven't been able to do anything other than segment-by-segment iteration and copying), but if you write a little bit of extra code, you should be able to make it work. CAShapeLayer is great because it provides path interpolation, so all you need to provide is the keyframes. You'll need to use explicit animations to make it work, so don't be surprised if nothing animates by default. Let me know if you need help with the path editing—I've written code like this and would be willing to share it with you.

I have tried this many different ways. With no success. Either the animation doesn't run at all and the shape just displays at the end value or literaly nothing comes up on screen. It is just a black backgound. I have a feeling reading your respose that I am not making them explicit animations? My attempts have consisted of creating a series of UIBezierPaths that all have the same number of points just differnt values and creating CABasicAnimations for each fromValue: toValue being one of the paths I created and then taking those CABasicAnimation objects and using them as the values for the values array in a CAKeyframeAnimation. I have no idea how to access individual points of the path? So I have been using four separate paths trying to make the shape layer interate/interpalate through them all but it is not working. All the attempts build with no warnings or errors so it is furstatating to say the least. You might be shocked at how little exsists on this topic via Google, Bing, and Stackoverflow searches. It is as if no one wants to attempt using CAKeyframeAnimations and paths.

Any help would be great.

How about forget the basic animations and just throw your paths in the values array? Then you can run the keyframe animation. Oh, and by the way, all of the CAAnimation classes are by definition explicit animations. Don't worry about that part.


I haven't worked with CAShapeLayer specifically, but I know how Core Animation works, so hopefully this will work for you.

I have it working now. It was a problem with my keyPath@"keyNames" the moment I changed them to @"path" everything feel into place.


Thanks for your help.

Core Animation 2D water effect like shown.
 
 
Q