CODEWITHSUNDEEP
uitableviewanimationuiscrollviewios8
sdtaheri
sdtaheri

Reputation: 575

Creating an animation such as iOS 8 Weather App

I want to create a view in which I like to have animation such as the one present in iOS 8 Weather app. I try to explain more what I have done. If anything is incorrect please guide me.

  1. In the top I put a label for the temperature. (The big one)
  2. Below that label, I put another label to show some text. In the Weather app, there is the horizontal scrollview showing the hourly forecast.
  3. Next is the Table view.

What I want to achieve is that when I start scrolling, the first label disappear smoothly and the second one go to top of the screen and the TableView stretches to show more content. When I scroll back to the top, I want the whole process to revert.

What is the best way to do this?

Upvotes: 4

Views: 1866

Answers (1)

Doug Proctor
Doug Proctor

Reputation: 79

I've recently re-created the iOS8 Weather app's scrolling effect for an app I'm creating.

The complete code is too long to post here but for anyone who's interested, I've put it on GitHub. You can download and run the project to see how it looks. Improvements to the code are welcome:

UIScrollView with masked content.

It works like this:

  1. You have one scrollview (the size of the screen), which contains a subview (the mask) which in turn has a subview (the content). We also add a large label to the top of the screen (in the Weather app, this displays the temperature).

  2. Then you use the scrollViewDidScroll delegate method to keep the mask fixed to the screen as the user scrolls. You also use this method to stretch the mask upwards at first.

  3. Fixing the mask to the screen means that the mask's subviews (our content) also becomes fixed. But we want it to scroll, so we do the opposite to the content of what we did to the mask (again, using scrollViewDidScroll).

  4. We need the mask to actually behave as a mask, so we set clipsToBounds = YES on the mask.

  5. Finally, we use the scrollview's offset during scroll to move and fade the big label at the top of the screen.

To make it behave exactly like the iOS8 Weather app, we need to also do the following:

  • Cancel any scroll touches that happen above the mask, i.e. over the large temperature display.
  • Ensure that the initial scroll that moves the temperature display is completed programatically if the user doesn't complete it.
  • Add a sideways-scrolling subview which is anchored to the top of the mask.

I haven't done these yet, though.

Upvotes: 6

Related Questions