Typpz Blog

iOS SDK: animations and effects in UIImageViews

Nikos M. — Sun, 09 Jun 2013 17:18:20 +0000

UIImageView.layer animations and effects

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.

MacBook Air (Mid 2012) review

Nikos M. — Sat, 01 Jun 2013 09:25:09 +0000

Macbook Air 13″

After about 5 years, the time has come to change my MacBook Aluminum (first aluminum unibody macbook series). My new machine is a mid-2012 MacBook Air with 8gigs of RAM. My old machine keeps working fine -only thing I upgraded through all these years is RAM (I bought it with 2GB and doubled it to 4GB two years ago)- but it feels a bit slow and the fan has been noisy lately although I’ve cleaned the inside quite few times.

The decision on which notebook I should buy was not easy, but I was sure I should go for flash storage. As I am a mac fan, the options I had were the new MacBook 13″ with Retina display and the MacBook Air 13″. I thought a while for the non-Retina MacBook Pro 13″ but it lacks flash storage (in default configurations) and has a screen with the same resolution as my old machine -although the screen has much better color saturation than the first unibody MacBook-. I finally bought the 13″ inch MacBook Air as this will be a laptop for personal use (I use a different notebook for my job) which means that my main usage will be internet, email, movie watching, photo organizing and a bit of photoshop use as well as spending some time coding in Xcode or coda.

The MacBook Air is an amazing machine. Compared to HDD notebooks I’ve been using up to now, it boots in less than 30 secs, and it seems very fast, thanks to flash storage. Applications launch fast as well. I think that everyone should go on flash storage. You compromise capacity, but you get rid of loading times. I transferred my files via a time machine backup, so the migration was painless. My old machine run also OS X 10.8 Mountain Lion, so I didn’t come up with program incompatibilities etc.

Display on the MacBook Air is the only aspect that has some drawbacks. Although the resolution is higher than the non-retina MacBook Pro, the display has worse color saturation. Personally I prefer the real estate -especially when it comes to personal use- than the absolute quality a professional designer should look for. That does not mean that the display in the Air is back, it is still much much better than many other laptops in this category, but it is not as color accurate as the Pro’s display is. Regarding the real estate, its like working with a 15″ laptop although it is still 13″. Fonts render small, but this is not a problem, they are readable, sharp and clear. Viewing angles are also amazing and what I like most is that the Air’s display seems much less glossier than the Pro’s display.

Processing power in the Air is not screaming (my processor is i5 at 1.8Ghz), but it does not seem slow (thanks again to flash storage) especially for everyday tasks. It is not dedicated for processing and rendering full hd video in Final Cut Pro, but it is very fast and smooth in compiling a -very- large project in Xcode, launching the ios simulator and running it. Bigger screen resolution also makes the developers happier.

The biggest hit in the MacBook Air are portability and battery life. This machine is very light and thin, make carrying it unnoticeable. Battery life is great too. From my personal experience, battery life lasts for 5-6 hours with -quite heavy- everyday use (coding, surfing while listening to music). Of course it lasts less when watching full hd video, but even with medium-power processor, it handles that task as well.

Summing up, if you are seeking an ultraportable notebook, with a high-res screen, capable processor and fast boot-sleep times, the MacBook Air definitely worths a look.

How to reset os x password with recovery partition

Nikos M. — Sat, 20 Oct 2012 17:50:40 +0000

In case your forgot or lost your os x password (and you have no other user with admin rights), you have to reset the default user’s pass. This can be done via the Mountain Lion Recovery HD partition. Follow these steps.

Shutdown your mac.
Boot it. Hold “Option” at boot and select the “Recovery HD” disk at the boot menu
Wait for the recovery hd to load until “Mac OS X Utilities” menu appears.
Click on the “Utilities” menu and select “Terminal”
In Terminal, type the following:

resetpassword

Confirm the password change and reboot as usual as usual and you are ready to go using your newly created pass.

Note that prior to os x 10.7 there was a “Reset Password” menu item in the Utilities menu, which was the easiest way to reset a lost password.

If the above method does not work you can boot to recovery mode, launch the Terminal from the Utilities folder and type:

rm /var/db/.AppleSetupDone

Note that this will not reset your password but it will let you run the default setup procedure (like when you get a new mac) and create a new admin account the next time you boot your machine (it will not delete your old acount). After rebooting, follow the procedure to create the new account and then navigate to system preferences>user & groups and reset the password for your old account. If settings in user & groups are faded out, click on the lock icon in the lower left corner and authenticate (using your new account credentials).

Learn to use Xcode 4 snippets

Nikos M. — Tue, 17 Jan 2012 18:49:03 +0000

One of my favorite features of the new Xcode 4 is code snippets. Code snippets let you use (and re-use) common classes and objects by simply typing a shortcut. For example if you type dealloc, Xcode 4 automatically generates the deallocation method for you:

- (void)dealloc {

<#deallocations#>

[super dealloc];

}

To add your code snippets to Xcode:

Find the code you want and highlight it.
Drag the selected code to the the Snippet Library
Name your snippet (this is just the name you see in the Snippet Library)
Choose a shortcut for your snippet which is used to invoke it (a good practice is to use shortcuts that show what the snippet does, like dealloc is used for invoking the deallocation method).
Choose language and platform (so Xcode knows when to offer this snippet).
If you like a bubble to appear as part of your snippets (like the #deallocations# in the example), just type: <#text in the bubble#> in your snippet.

How to upgrade Mobile Safari anti-phishing database

Nikos M. — Sun, 27 Nov 2011 10:32:36 +0000

Since iOS 3.1, Mobile Safari features an anti-phishing filter. In order to be protected from phishing sites as much as possible, the filter’s database must be up-to-date. According to Apple, the database upgrades automatically while the user charges the iPhone (in order to protect battery life). To upgrade you have to: connect the iPhone to the AC adapter, launch Mobile Safari and lock the screen. Easy enough except that most users exit Safari before locking the screen in a regular use.

Thank you Steve!

Nikos M. — Thu, 06 Oct 2011 20:17:13 +0000

Steve Jobs passed away at the age of 56! Tech world will never be the same without him! Rest in Peace Steve! Thank you for everything and may your spirit lead Apple to more innovations!

How to: Fix WordPress Warning: Cannot modify header information

Nikos M. — Sun, 21 Aug 2011 10:07:35 +0000

If you try to load your WordPress blog and you come across this warning (or anything similar), the fix is really easy. The error message should look like this:

Warning: Cannot modify header information: headers already sent by: (output started at //home/htdocs/wordpress/wp-config.php:1) in /home/htdocs/wordpress/wp-login.php on line 12

Notice that the error could warn about any file, not only the wp-config and the wp-login. The solution is to edit any file that is noticed in the error message (download via ftp and edit it locally, then upload it to your wordpress directory and replace the old one, or edit it directly in your server) and remove all spaces before the and after the ?>.;-)



Unhide Library folder in Mac OS X 10.7 Lion
Nikos M. — Tue, 02 Aug 2011 18:16:54 +0000

After upgrading to OS X Lion, I released that the Library folder in my user’s home folder (where all the .plist files from the installed apps are stored) was gone. I wish Lion would have respected my folders and installed apps from my Snow Leopard installation during setup (it also removes iSync). Not big deal unless you use some kind of old-school Nokia cell phone). As there is no option to show hidden folders in OS X (or I haven’t found it), the only way to bring back the Library folder is via terminal. Open the Terminal.app (found under Utilities folder or search it with Spotlight) and paste the following command. Yes, you are done!
chflags nohidden ~/Library/

      



OS X Lion how to: remove user name from menu bar
Nikos M. — Sat, 23 Jul 2011 13:53:53 +0000

The first thing that tracked my attention after upgrading to OS X 10.7 Lion is that my full name (logged in user) was displayed on the top menu bar! Except that I do not want my surname showing up there, I am the only user on my mac. It is very easy to remove this option. You just have to click on the username in the menu bar while holding the Command(?) key and drag it off of the bar.
You can reenable it again, by going into System Preferences > Users & Groups > Login Options and checking the “Show fast user switching menu as” option. If the options are greyed out (and you are not able to modify them), just click the Lock icon at the bottom left corner, typer your password and you are ready to go.

      



Get usefull info about your Mac from the terminal
Nikos M. — Fri, 03 Dec 2010 01:53:56 +0000
Mac OS X (despite its user-friendly UI and the general ease of use) is built on Darwin kernel which means thats it is a UNIX system. Using the terminal (it is located in application>utilities folder) you can easily get some valuable info about your mac. If you run Mac OS X 10.6 Snow Leopard, you have the ability to boot with the 64-bit kernel instead of the 32-bit that loads by default (Apple has chosen the 32-bit as the default boot kernel to prevent glitches caused by 32-bit kernel extensions). To boot with the 64-bit kernel you need a Mac with an Intel Core 2 duo or newer processor (Intel Core Duo does not support 64-bit) and 64-bit capable EFI. To check if your EFI supports 64-bit, open the terminal and type the following command:
ioreg -l -p IODeviceTree | grep firmware-abi
If the terminal returns “EFI64″ as shown in the image below you are ready to go. Just restart your mac holding “6″ and “4″ numeric keys and it will boot with the 64-bit kernel. Note though that in a typical system (for example a core 2 duo mac with 2 to 4 GB of RAM), there will be no significant performance improvement. Also even with the 32-bit kernel, you can run 64-bit applications and take full advantage of 64-bits (that is not a Snow Leopard feature. Leopard was able to run 64-bit apps and adress more than 4GB of RAM too).
Some other important info you can easily get about your portable mac from the terminal, is your battery condition. Type the following in the command line and you the terminal will return your battery’s max capacity, current capacity and design capacity.
ioreg -l | grep Capacity

If you see that max capacity is lower than design capacity do not panic, batteries start to loose capacity after some charging cycles.