iOS SDK is well known among mobile app developers for its elegant APIs that make creating polished and crafting UI experiences a piece of cake. In this tutorial I will present some small (and easy to implement) code snippets for adding effects to UIImageViews. Note that these effects are added on the fly while the app is running, which translates to more load for the cpu, so use when needed (Latest iPhone models like 4s and 5 won’t have a problem in most cases, but it is not good practice to render a 200+ row UITable with an image full of animations and QuarzCore effects in each cell.
So here you are. All you need is an empty Xcode project with a ViewController class. Add an image to your .xib, hook it up to with the appropriate property in the code.
Case 1: Apply shadow to a UIImageView
[UIView animateWithDuration:1.5f animations:^(void) {
self.effectedImage.alpha = 1;
self.effectedImage.layer.shadowOpacity = 0.8;
self.effectedImage.layer.shadowOffset = CGSizeMake(0, 0);
self.effectedImage.layer.shadowRadius = 5;
self.effectedImage.layer.shadowColor = [UIColor blackColor].CGColor;
}];
The code is self explanatory, we create an animation block and we set the animation duration (float number, that’s why we have the f at the end.). I’ve named the UIImageView effectedImage. Inside the block we add what we want to perform in during the animation. Here we say that we want the imageView.alpha to be 1 (which means that the opacity will be 100%. For 80% opacity we should set the alpha to 0.8). Next we set the shadowOpacity and the shadowOffset. Next up is shadowRadius, which sets the sharpness of our shadow. I’ve set it to 5 which adds some blur effect to our shadow (just to the shadow not to the UIImageView). Finally we set the shadowColor. You can use any UIColor combination you like here as everywhere else in iOS programming.
Case 2: Image transition
int i = 0; self.effectedImage.image = [UIImage imageNamed:(i % 2) ? @"typpzflatlogo" : @"oldtyppzlogo"]; CATransition *transition = [CATransition animation]; transition.duration = 1.0f; transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; transition.type = kCATransitionFade; [self.effectedImage.layer addAnimation:transition forKey:nil];
Here we initialize an integer, which will act as the “identifier” of the current image. Next we initialize an CATransition, again set the duration. After that we set the timingFuction. timingFunction defines how the transition will be applied. We use predefined functions. Here I chose kCAMediaTimingFunctionEaseInEaseOut which as Apple’s developer library mentions: Specifies ease-in ease-out pacing. An ease-in ease-out animation begins slowly, accelerates through the middle of its duration, and then slows again before completing. Finally we set the transition.type, here a kCATransitionFade (fade in/out is a classic transition for images). Finally we add our animation to the UIImageView.layer and we are done. I’ve left the forKey:nil because here we apply a kCATransition. In general only one animation per unique key is added to the layer but the special key kCATransition is automatically used for transition animations, so you may specify
nil for this parameter.Case 3: Spin
CABasicAnimation *spin; spin = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; spin.fromValue = [NSNumber numberWithFloat:0]; spin.toValue = [NSNumber numberWithFloat:(2*M_PI)]; spin.duration = 0.8; // How fast should the image spin spin.repeatCount = HUGE_VALF; // HUGE_VALF means infinite repeatCount; [self.effectedImage.layer addAnimation:spin forKey:@"Spin"];
Here the code is pretty easy if you read the previous explanations. In repeatCount we set HUGE_VALF which means that we want the repeating of the animation to be infinite. Otherwise a float value should be set.
Note that all animations and effects are referencing the CALayer class, so we apply them to the UIImageView.layer and not directly to UIImageView. Many times I see casting UIViews and applying animations there, which is bad coding practice (and leads to a warning from the compiler). A bad example is this:
UIView *myView = (UIView *)self.view; [myView addAnimation:transition forKey:nil];
The nice approach to this would be just applying the animation to the view’s layer:
[myView.layer addAnimation:transition forKey:nil];
The code I used for this tutorial can be found on github. Feel free to use it of course and contribute if you like. Note that in the github project I have also used an animation called @”rippleEffect”. As you see this is not a documented type like the kCATransitionFade, which means that this snippet now works, but Apple may modify it in the future, so it’s not a good idea to use it in a production app.
