inspired by the the animated graph from Joe Ski on his dribbles profile I wonder where to start if I want to implement something like this on iOS.
Is CoreGraphics and drawRect combined with NSTimer the right starting point? Where comes CoreAnimation into the game? Or is CorePlot the platform to build on?
Can you please advice me where I have to dig into?
You need to start by exploring the Core Animation framework and have some knowledge about Core Graphics. This is how I would go about it:
Define your shapes with UIBezierPaths
Define the target shapes with different paths
Animate the "path" key with CABasicAnimation between the start and target paths
Happy exploring!
Generally, if you'd like to implement an advanced custom animation, I think you should start with CADisplayLink (and CVDisplayLink for MacOS).
CADisplayLink allows you to intervene every single time the screen is refreshed, e.g: ~60 times/second if you are having 60fps.
If you look at its examples, you'll see that it also gives you timing information so that you don't need to rely on NSTimer which doesn't go well with animations actually.
In you particular case, as Mundi said, CABasicAnimation might be enough as well.
Also, you can follow BAFluidView example on Github which uses CAKeyframeAnimation to achieve something similar.
Related
What I basically need to achieve is a Fruit Ninja - style "slash" effect, where the "slash" trails the user's touch and follows the shape of the user's gesture, and is thinner the longer the distance the user has swiped.
The simplest way to achieve this seemed to be to collect all the points the user passes through in a UIBezierPath, and "stretch" an image through the length of the BezierPath. This would achieve the kind of "trailing" effect I was looking for and also ensure that the line is thinner if the distance travelled is longer.
However I can't seem to find a way to actually implement this. Is this even possible?
Alternatives? Thanks.
P.S: This is for a low-medium priority section of a regular app and not a game, so I would like to avoid having go down to OpenGL and spend a lot of time to achieve this (with completely custom drawing, etc). Something at the SDK level would be preferred, and if that's not possible at all, we'll just figure out a different UI.
Thanks!
For pretty easy-to-use stretching teqhniques of images/views you could look into
https://github.com/hfossli/AGGeometryKit/
I recommend trying to draw using CoreGraphics. See this link
http://www.effectiveui.com/blog/2011/12/02/how-to-build-a-simple-painting-app-for-ios/
Okay. Maybe you can use this.
https://github.com/hfossli/AGDraw
Just something I wrote a while ago. Hit clear and try to draw something (clear will toggle between two types of strokes). You'll see the width of the penstroke will increase with the velocity you use.. I guess that fits your need. If you fix some bugs, please make a pull request. You are free to use the code, but I will add a MIT license later.
What is the best and most efficient way to add effects to a game built with cocos2d?
I mean effects like an explosion.
Are they just animation / sprits?
If not, then what should i receive from the designer?
You can run cocos2d project which comes with library and in the top left drop down list you can choose Particle System Test and build it. So you will able to see all basic particle effects cocos2d has.
Also there is a nice application ParticleDesigner, where you can make your nice looking particles and generate a file to add to cocos2d project, it also has a lot of samples, so it would be good for you to download it and see.
And cocos2d supports animations as well, so you can make animations from frames, but of course in the case of explosions particles would look much better
I would take a look at CCParticleSystem and or CCParticleSystemQuad. You or your designer can use tools like ParticleDesigner to create great looking particle effects.
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?
I would like to achieve a cool particle effect like in here.
The bubble should be similar to an explosion starting from the centre and expanding. I'd like to add an animated wave coming out from the left and right side of the bubble and looking like this. I guess I could use to two distinct animation and put together as I assume this has never been done in a Cocos2d game.
Also, I would like to avoid using non-Cocos2d tools as particle designer. In chapter 1 of the Cocos2d cookbook I found some cool particle examples and the code doesn't seem too complex. Instead, using third party tools I need to import their classes and use their file format to create particles and I have to pay. Even more there doesn't seem to be many particle effect files shared (at least not the ones I want).
Thanks a lot.
EDIT: I added a comment with a theory on how the first of the two animation could work.
Your best chance is with Particle Designer. You can modify the emitters in the library and visualize your changes. It's the easiest way to achieve a great effect. Once you find the combination of values that you like , you can simply create an emitter from code and set all those properties yourself. You don't have to pay or use any class (which you actually don't have to , it's already built in cocos2D) . So just download the free version of Particle Designer and then set the values from code. It's the same thing , it only takes a bit more work to do.
I want to draw a sinusodial wave which varies with time on a UIView.
What are the approaches should i take ?
Any sample code is there ??
I believe the easiest way I've heard of doing what you want to do is using CAKeyframeAnimation.
There is a tutorial page with a sample project here:
http://cocoawithlove.com/2008/09/parametric-acceleration-curves-in-core.html
There is a stackoverflow about something similar here:
Basic keyframe animation (rotation)
and the Apple Developer Documentation lists an example application called "MoveMe" that uses keyframe animations
I do not think you have to go all the way to OpenGL for this, but it is certainly capable of this.