iOS some question about animations and labels

[sgs1]

Hi everybody!

I'm new to ios7 development and i have some questions.
I'm developing for my client an app that calculate the energy savings. My web designer has provided a stack where i can see two values (in %) like in the image that i attach here.

Now: i could develop this function by creating a rectangle, set it in 10 columns and color it by the value that i have.

But after this, this stack could be broken at the center ..and at its place, i have to put an image.

The first question is: is this animation possible?

The second question: is possible to see the content of a view gradually? Like a gradient?

The third question: i would like that the field that i'm building cames from the left and when i want to go to next view they go out on the right. Is this possible?

 

[xStep]

I'd do it in code instead of using fixed images. Even if you want 10% jumps now, it will be easy to change to single percent jumps later.

I played with this and came up with the attached animated GIF sample. Perhaps it answers your questions of some possibilities.

Look at the documentation for UIView to see what properties can be animated. I animated the frame and the alpha values of container views that contained the percentage subviews. Affecting the container affects all it's subviews. If you move the container, all of it's subviews move with it. If you alter the alpha value of the container, it affects all of its subviews. I also placed my two containers into a master container and set its property clipsToBounds to YES. When shifting views within that one, they will not draw outside of that rectangle.

The sliding from one graph to that other has a fade in on the container view entering the screen and fade out on the one leaving. Not a gradient affect but it's a nice effect. Doing a true gradient takes a lot more thought.

The changing percent labels are centered vertically and horizontally onto their respective backgrounds. When the value changes, both are adjusted horizontally to stay centered to the visible width of their background. A little math check ensures they don't disappear when the values are small.

I've altered the CALayer of each percentage label to color it the same as the background it belongs to and gave it a small cornerRadius.

I called my containers energy1 and energy2. A fixed X position for the drawing is called energyXPos.

Move to the left.

        [UIView animateWithDuration: 0.5 animations:^{
            // Shouldn't need this within the animations block but it works.
            [edificationSlider setValue: savingPercent2 animated: YES];

            energy2.alpha = 1.0;
            energy1.alpha = 0.0;

            // move energy2 to left into view.
            CGRect newFrame = energy2.frame;
            newFrame.origin.x = energyXPos;
            energy2.frame = newFrame;
            
            // move energy1 to left out of view.
            newFrame = energy1.frame;
            newFrame.origin.x = - newFrame.size.width - 20.0; // 20 is padding
            energy1.frame = newFrame;
        }];

Move to the right.

        [UIView animateWithDuration: 0.5 animations:^{

            [edificationSlider setValue: savingPercent1 animated: YES];

            energy2.alpha = 0.0;
            energy1.alpha = 1.0;

            // move energy1 to right into view.
            CGRect newFrame = energy1.frame;
            newFrame.origin.x = energyXPos;
            energy1.frame = newFrame;
            
            // move energy2 to right out of view.
            newFrame = energy2.frame;
            newFrame.origin.x = energy2.superview.frame.size.width + 20.0;
            energy2.frame = newFrame;
        }];

My subview tree looks something like this;

Master Container

Energy Container (also represents the gray area)

GrayViewLabel
YellowView

YellowViewLabel​

I make the gray area 100 percent width and never resize it.

Click/Tap on the image to open it in another browser tab/window to see the animation.

 

[sgs1]

Thanks for the reply.

But i have an image! Can i do the same effects?

 

[xStep]

SERIOUSLY! YOUR PICKING UP THIS THREAD AFTER 3 MONTHS! Look, if your going to request help or suggestions, you have to be responsive. You also need to be more explicit with your descriptions.

If you have fixed images, then no, you can't animate the percent changes the way I did in my sample.

What you might try is layering the individual images and fading between the old and new value via the alpha setting. See the code I posted previously.

 

[sgs1]

Thanks for the reply and sorry for my delay.

Does Apple have a page where i can find the animation that i can set on uiimageview?

 

[xStep]

You can start with my first response, third paragraph, first six words.

 

[sgs1]

You can start with my first response, third paragraph, first six words.

Thank you.