绘制无限正弦波 [英] Drawing an infinite sine wave

问题描述

我正在尝试制作类似于此解决方案的动画正弦波：
https://stackoverflow.com/a/ 17535290

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.

有人可以解释一下 CGAffineTransformMakeTranslation（+ _ self_view.frame.size.width / 2,0;）下面的代码？我的理解是它返回一个矩阵，将x轴向右移动一半的帧大小。我不明白这是如何导致动画做它做的。

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);
    }];
}

推荐答案

涉及两个视图。有正弦波视图，并且有正弦波视图的超视图（父级）。

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

假设超级视图宽320点 - 宽度为iPhone屏幕。

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

将正弦波视图设为640点，并在其中绘制两个周期的正弦波。每个周期正好是320点宽。因此，正弦波视图的左侧320点看起来与右侧320点完全相同。

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.

现在将正弦波视图置于其超级视图中，并带有 frame.x of -320。这意味着只能看到正弦波视图中正确的320个点：

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:

现在将正弦波视图向右移动320点（宽度的一半）：

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

当动画结束时，正弦波视图的可见部分看起来与动画前可见的部分相同：

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

如果此时你将正弦波视图重置到其初始位置（立即，没有动画），用户将无法分辨，因为可见像素不会改变：

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:

UIViewAnimationOptionRepeat 的效果是重置动画参数到原始状态然后开始动画。因此，如果按照我的描述排列正弦波视图及其超视图，您将获得无缝循环。

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.

这篇关于绘制无限正弦波的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！