0

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);
    }];
}
Community
  • 1
  • 1
Brosef
  • 2,945
  • 6
  • 34
  • 69

2 Answers2

8

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.

rob mayoff
  • 375,296
  • 67
  • 796
  • 848
  • I changed my animation to do what you described and it works, but it tends to slow down when transitioning between the two cycles. Do you know why that is? The only UIAnimation option I'm using is `UIViewAnimationOptionRepeat` – Brosef Jun 02 '14 at 07:13
  • That is why the answer you linked used `UIViewAnimationOptionCurveLinear`. – rob mayoff Jun 02 '14 at 16:08
0

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);
raurora
  • 3,623
  • 1
  • 22
  • 29
  • What is the purpose of placing the origin at the center? It does not look like the waveform is starting from the center when `CGAffineTransformMakeTranslation(+_self_view.frame.size.width/2, 0);` is applied. `CGAffineTransformMakeTranslation(size.width / 2, size.height / 2);` made the wave form shift diagonally towards the bottom right. – Brosef Jun 02 '14 at 00:53