Chipmunk for creating animations in iOS

Every year, mobile devices are becoming more productive, and users are becoming more demanding of applications and user interfaces. Surprising the user is becoming increasingly difficult, so you have to work hard on the way information is presented. High-quality design and sophisticated animation in the iOS-application undoubtedly increase the chances to interest the audience.

Under the cut - creating custom animation on the example of the application We Heart Pics .



IOS animation


Many iOS interface elements already use separate physical properties: automatic pulling of content to the edge when going beyond the borders of the scroll zone, the inertia of some elements, the dependence of the scroll speed on the speed of finger movements. There is no access to these effects, but realistic animation can be achieved using the physical engine.

For me, acquaintance with physical engines began after the release of Angry Birds. The game was really impressive, as was Cut the Rope, which was also based on the physics engine. But these are games. Should I use these effects in regular applications?

For We Heart Pics, this animation came up pretty well due to the similarity of the main idea of ​​the service with the real game. In short, the application has about 100 sections, divided into 6 categories, where the user uploads his photos. Filling the sections, the user sees his progress, as in regular games. A fully customized interface and thoughtful effects make the application more lively, and the process of creating photos really turns into a game.

Physical engines for iOS


Considering the existing physical engines for iOS, you have to choose from two main ones: Chipmunk (implementation in C) and Box2D (C ++ implementation). The cost of Chipmunk Pro is $ 249, Box2D is free. In terms of performance, Chipmunk Pro outperforms Box2D almost 2 times (information from chipmunk-physics.net ). The application decided to use Chipmunk Pro. The full library weighs 3.7Mb. For this example, the application size increased by only 180Kb.

Animation with Chipmunk


To connect the physical world of Chipmunk and the animated object, the PAPhysicsAnimation class was created, which creates the physical world, is engaged in its updating, and also passes out changes in the position of the animated objects. All object touches are also forwarded to PAPhysicsAnimation. Outside, the class looks like this:

typedef void (^UpdateBlockType)(CGPoint center, CGFloat angle);
@interface PAPhysicsAnimation : NSObject
@property (nonatomic, readonly) ChipmunkSpace *space;
@property (nonatomic, readonly) ChipmunkBody *staticBody;
- (void)startAnimation;
- (void)stopAnimation;
- (void)handleAnimationForBody:(ChipmunkBody *)body
                   updateBlock:(UpdateBlockType)updateBlock;
- (id)add:(NSObject *)obj;
- (id)remove:(NSObject *)obj;
- (void)touchesBegan:(NSSet *)touches inView:(UIView *)view;
- (void)touchesMoved:(NSSet *)touches inView:(UIView *)view;
- (void)touchesEnded:(NSSet *)touches inView:(UIView *)view;
- (void)touchesCancelled:(NSSet *)touches inView:(UIView *)view;
@end

The method handleAnimationForBody:updateBlock:allows you to track changes in animated objects and make changes directly in the UI.

Since the photos do not interact with each other, with the initial touch, a separate physical world is created for each of them. A square object with certain dimensions and mass is added to it. If the user releases the object near the area where the animation began, the object is attracted to its original position.

image

If an object is outside the area where the animation began, it falls down due to gravity in the physical world. When an object goes beyond the boundaries of the visible zone, it is removed along with the physical world. If the object is attracted to its original position, the animation stops and the physical world is also deleted.

References



Also popular now: