CODEWITHSUNDEEP
ioscocoa-touchios7
Brosef
Brosef

Reputation: 3095

Drawing an infinite sine wave

I'm trying to make an animated sine wave similar to this solution: https://stackoverflow.com/a/17535290

I'm trying to make my sine wave continuous so that I'm constantly drawing the same sine wave. In the solution above, once the starting point of the wave is equal to the width of the frame, the view restarts drawing a new wave.

Can someone explain what CGAffineTransformMakeTranslation(+_self_view.frame.size.width/2, 0); does in the code below? My understanding is that it returns a matrix that shifts the x-axis to the right by half the frame size. I don't understand how that causes the animation to do what it does. 

-(void)animateWave {
    [UIView animateWithDuration:.5 delay:0.0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionCurveLinear animations:^{
    _self_view.transform = CGAffineTransformMakeTranslation(+_self_view.frame.size.width/2, 0);
    } completion:^(BOOL finished) {
    _self_view.transform = CGAffineTransformMakeTranslation(0, 0);
    }];
}

Upvotes: 0

Views: 2017

Answers (2)

rob mayoff
rob mayoff

Reputation: 385750

There are two views involved. There is the “sine wave” view, and there is the superview (parent) of the sine wave view.

Suppose the superview is 320 points wide - the width of the iPhone screen.

Make the sine wave view 640 points, and draw two cycles of the sine wave in it. Each cycle is exactly 320 points wide. Thus the left 320 points of the sine wave view look exactly like the right 320 points.

Now position the sine wave view in its superview with a frame.x of -320. This means only the right 320 points of the sine wave view are visible:

initial view arrangement

Now animate the sine wave view to the right by 320 points (half of its width):

animating

When the animation finishes, the visible part of the sine wave view looks identical to the part that was visible before the animation:

complete

If at this point you reset the sine wave view to its initial position (instantly, without animation), the user won't be able to tell, because the visible pixels won't change:

reset

The effect of UIViewAnimationOptionRepeat is to reset the animated parameters to their original states and then start the animation over. Thus if you arrange the sine wave view and its superview as I described, you will get a seamless loop.

Upvotes: 8

raurora
raurora

Reputation: 3673

Your understanding is correct. Here, the idea is to place the origin at the center of view. Try this, do you see any difference? 

CGSize size = self.bounds.size;
CGAffineTransform translate = CGAffineTransformMakeTranslation(size.width / 2, size.height / 2);

Upvotes: 0

Related Questions