Simon say’s Project-D ticker CoreAnimation howto with MonoTouch

I’ve been tweeting about Project-D for awhile now, but this will be my first blog post speaking about it. I’m sure you will catch on about what Project-D actually is but the real name is going to remain secret for a little longer.

I want Project-D to be a community driven application. I want to hear people’s feedback and put the features people really want. I also want to take the opportunity of building the application and advocating the use of MonoTouch through howtos. So in a series of blog posts as I build Project-D, I hope to show the source code of items I built and how I built them in MonoTouch.

This week I got an interesting idea from someone on Twitter who said I should have a ticker similar to CNN. I started thinking about it throughout the week and then it came to me. Some very subtle CoreAnimation effects could really make the ticker bling out at the same time not being too over the top. I also couldn’t remember if anyone did any CoreAnimation based howto for MonoTouch yet. So I decided this was a good opportunity to accomplish a couple things at once.

Here’s what I ended up with so far. Keep your eye on the bottom of the screen, so you can see the transition of the ticker. Also every 10 seconds it refreshes, so keep watching the ticker.

I have 2 view controllers. One for the story listing and one seperate for the ticker itself. I add it to the story view controller via:

StoryTickerController tickerController = new StoryTickerController();
this.View.AddSubview(tickerController.View);

As you probably noticed I had the ticker slide up on load with a nice animation. I used MonoTouch’s CoreAnimation API bindings to achieve this:

void AnimateShowTicker()
{
    UIView.BeginAnimations("tickerShowIn");
    UIView.SetAnimationDuration(1.0f);
    RectangleF rect = this.View.Frame;
    rect.Location = new PointF(rect.Left, 0);
    this.View.Frame = rect;
    UIView.CommitAnimations();
}

The nice thing about CoreAnimation is any properties you change after calling BeginAnimations() start to be recorded for the animation. Once you call CommitAnimations() the changes will occur. It’s a really nice way to do animations by just coding your property changes as normal. I really like how this is done.

After I got that completed for the nice on load transition, I wanted to also transition when the upcoming story changes. I decided a nice fade out to fade in would be nice. I did it as follows:

void UpdateTicker()
{
    UIView.BeginAnimations("tickerTransitionOut");
    UIView.SetAnimationDelegate(this);
    UIView.SetAnimationDidStopSelector(new Selector("fadeOutDidFinish"));
    UIView.SetAnimationDuration(0.5f);
    labelTicker.Alpha = 0.0f;
    UIView.CommitAnimations();
}

[Export("fadeOutDidFinish")]
public void FadeOutDidFinish()
{
    labelTicker.Text = story.Title;

    UIView.BeginAnimations("tickerTransitionIn");
    UIView.SetAnimationDuration(0.5f);
    labelTicker.Alpha = 1.0f;
    UIView.CommitAnimations();
}

Once the fade-out animation completes, I want to swap the text, and fade the label back into view.

Line 5 we tell which selector we wish to be called when the animation is finished. We declare using the [Export] attribute which method is going to be associated with a selector name so that when the animation is completed, that method gets executed. From here I do another animation but this time set the alpha to 1.0 so that the label is again visible with the new text.

And that’s all that was needed to make both effects. All very simple, subtle but slick using MonoTouch.

You can catch me on Twitter for more information and much more via @simongui. Please retweet!