iOS - Animated background image (GIF) - ios

I am currently developing a weather app.
For now I have just implemented static background image on the Home page that vary depending on the current weather.
I would like to improve this feature in order to provide a better user experience.
I think that with the rapid growth of technology, hardware, wifi but even frameworks and developing tools we are able to make greater and greater Apps each days.
That's why I am really interested about knowing different ways to improve my App.
Moreover, I think that the proper/coolest way to differentiate my App from the weather-app market is to have unique features or at least "more enjoyable" than others.
I really don't know where to start, I have read 3 different posts on StackOverflow about animated background without success.
I would like to know which solution is better in order to implement animated background image.
Should I play a short video infinitely, like a GIF ?
In term of battery consumption, should I worry about that ? Even knowing that the average app-navigation time for a weather app is approximatively 47s.
PS: I am developing with Objective C.
If you have any suggestions, any informations, I'll take it.
Thank you in advance.

There is a way to create a continuously animated image. What you do is create a UIImage with a special initializer (see final line). You give this initializer the base name of an image, like “storm”. The understanding is that you will have several files named storm1.png, storm2.png, etc., the succession of which will constitute an animation. All you do is call the initializer and specify how long you’d like each animation frame to last, and all the rest is automatic. The image view that gets created will continue cycling through however many animation frames you have. As long as that image view is visible, Apple’s code will guarantee the image will be continuously animating. As soon as it gets to the end of the list (say, storm8 if you have 8 frames in your animation), it automatically starts over. At least in Swift, you don’t even have to tell it the file extension of the images.
If you want the image to cover the entire background of your view controller, just set up the imageView in Interface Builder to be pinned to the left, right, top, and bottom of the main view of your view controller.
Here’s the syntax for creating the continuously animated image in your code:
UIImage *image = [UIImage animatedImageNamed:#"storm.jpg" duration:0.5f];
Or in Swift:
let imageView.image = UIImage.animatedImageNamed("storm", duration: 0.5)

Related

Positioning and Resizing handles similar to Apple Pages

In Apple's Pages app it allows you to add an image or text box or shape layer to the page then resize it by tapping on it and the handles appear. A similar thing also happens in the Pixelmator app and a few others. Is this something made by Apple that I can use in my app or would I have to build it in myself?
As far as I know there is no system support for resize handles and you will need to build it yourself. That's what I've done when I needed them. I added views on top of the thing that I wanted to resize, with pan gesture recognizers attached.
I have an app called CIFilterTest on Github (written in Objective-C, unfortunately) that uses resize handles to let the user move around points and rects when they are needed for the various Core Image filters. Even though it's written in Objective-C it should give you the idea.
Note that most Core Image filters run VERY slowly on the simulator, making the app seem extremely laggy. That's an artifact of running Core Image filters on the simulator. It runs much faster on an actual iOS device.

How do I know when the screen is being drawn on iOS?

I would like to know when the screen is being drawn on iOS. In particular, I'd like to know if there are any visible changes being drawn on screen. This can be handy to know how long a page took to render, for example (assuming that the user is not interacting with the page). I would like to be able to capture this information in a regular production build, not in a developer build. And I'd like this to be a general solution applicable to most any page in my app, not just a specific page.
For example, I have a page that 1) asynchronously queries an API for data, 2) displays that data in a UITableView where some of the entries may be offscreen, and then 3) asynchronously downloads the images for each of the visible items on the screen. I want to get callbacks when the UITableView is rendered and when all of the images are rendered. The total time to render the page can be determined by looking at the timestamp of the last call to the callback (again, assuming no user interaction).
On Android, this is fairly simple. You can use ViewTreeObserver.addPreDrawListener to get a callback whenever the screen is being drawn. If there's no visible change to the screen, the callback is not called.
On iOS, it looks like CADisplayLink might potentially serve a similar purpose. However, when I hook up my CADisplayLink, it appears to be called over-and-over forever, whether or not there are visible changes on the screen.
Is there a way to know when there are visible changes to the screen being drawn in iOS?
In iOS 9 Apple made it impossible to get access to things drawn onto the screen outside of your app. Prior, it was possible to use an API called IOSurface to do it, but Apple closed it down in iOS 9. (To prevent apps from snooping on each other.)
So if you're talking about ANYTHING being drawn to the screen the answer is no. If you're looking for changes within your app there's probably a way to do it.

SVProgressHUD iOS8 Replace circle with animation

My Developer is using SVProgressHUD to show loading screen. Is it possible to replace the circle with image animation (a sequence of images)
Using Ashish's suggestion of GifHUD is fine but you could use the UIImageView's animationImagesAPI. You should be able to just set the images and the duration to get the effect you are looking for. Doing so would reduce your 3rd party dependencies from 2 to 0 which is always a win in my book.
This is a question to ask "your developer", not a question to ask the community. Modifying the 3rd party library or implementing custom functionality like this is always possible, but if it should/could be done is dependent on many circumstances.
To directly answer your question, you can just replace the centered animation with a UIImageView and load a series of images into it and start animating it. This is not a difficult task at all. Implementing this into the current library means complications with future maintenance alongside possible other issues.

UIScrollView: Bad performance with large images

TL:DR
What technique does Apple use to make Photo.app so fast, even with large images?
Long Version
I watched Apple's WWDC 2010 video about scroll views to learn how to replicate Photo.app pagination behavior and low memory utilization (PhotoScroller Demo). It works well, but since images are loaded only when they are needed, when I try to paginate to another image, the app locks while the JPEG is being decompressed.
The same video shows a tiling technique to get better performance, but since I'm using photos taken from the camera and stored in the app, that doesn't seem feasible (having multiple copies of each photo, in different resolutions, would consume too much space - 4MB vs 27MB). Also, using iExplorer I noticed Photo.apps has only a copy of each photo (it doesn't even have a small thumbnail copy for the gallery).
What technique did Apple use to make Photos.app so fast? How can I get that same performance in my app?
I'm a bit confused if this should be here or on Programmers,
since there's no code in the question, but F.A.Q. says that algorithm
questions are part of Stackoverflow, and the tags here match it
better.
So if you just show one image fullscreen you can do this:
In the WWDC11 Session 104 - Advanced Scroll View Techniques they talk about infinite scrolling and how to do it. The basic idea is to scroll the view and after scrolling reposition the (UIImage)view inside the scroll view so it appears centered or whatever you layout constraints are.You could then load the new UIImage into the UIImageView. Since you only have one UIImageView it should be pretty low memory consuming. I am not sure about how the loading times of the images will behave though.
Maybe preload the next UIImage to the left and right to the current image and then load it into the UIImageView after reposition the scrollView can help here.
For anyone who is still looking for simply implementation of scroll view that hold lot's of images.
https://github.com/sumofighter666/ReusableScrollView
It is as simply as implementing UITableView

Progressively load subviews to speed up iOS app performance

I'm looking for a technique to progressively load in the contents of a UIViewController to make an app feel "snappier". I noticed this issue when pushing a viewcontroller onto the stack there's a noticeable delay while waiting for it to push in. The UIViewController's View has some complex subviews with transparency. I'm wondering if I create them after viewDidAppear and 'fade' them in, then the transition will appear much smoother.
I noticed a similar effect in Apple's Trailers app. When tapping a movie in that app the detail view pushes in and the contents load after the fact. Granted part of that delay is because they are downloading the details before showing them, but it seems like they always fadein that large image whether it's been downloaded already or not.
Has anyone had much success with this or with improving UIViewController loads in general.
Before you start making changes in an effort to improve performance, use Instruments to profile your app and find out where the problem really is. Is it in drawing the complex subviews? Is it in loading the data? The only way to know is to measure.
There's no reason you couldn't do as you propose -- have the view controller create/load its main view and then add the complex subviews afterward. Your view controller can add and remove subviews at will. Will that make the app feel snappier? It might -- it's similar to the default image strategy Apple built into iOS, where the OS loads a picture of your interface to make the device seem responsive, and then substitutes the real interface once that's ready. On the other hand, if the user still has to wait for the complex subviews to be created before the view is useful, seeing the rest of the view might not help much.
Another possibility (again, after measuring) might be to create the views before the user needs them. This runs counter to the lazy initialization that iOS apps commonly use to conserve memory and power, but if you know that you're going to need the views and you can expect a lull in user activity before they're needed, it could be a good way to increase the app's apparent speed. All you need to do to get a view controller to create/load its view is to access its view property.

Resources