绘制无限正弦波

Question

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

我试图使我的正弦波连续，以便我不断地绘制相同的正弦波。在上面的解决方案中，一旦波的起始点等于帧的宽度，视图就会重新开始绘制新波。

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

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

Answer 1

涉及两种观点。有“正弦波”视图，并且有正弦波视图的超视图（父级）。

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

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

现在将正弦波视图放在其超级视图中，其frame.x为-320。这意味着只能看到正弦波视图的右边320点：

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

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

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

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

Answer 2

您的理解是正确的。这里的想法是将原点放在视图的中心。试试这个，你看到有什么不同吗？

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