iOS：如何沿正弦曲线设置图像动画？

Question

正如在标题中所述，我想要使用CG / CA甚至OpenGL在UIView中沿着正弦曲线从底部到顶部移动一些气泡。如果需要的话。

这是我的CA代码段工作正常，但它是一个动画的直线。如何构建正弦曲线行为？

- (void)animateBubble:(UIImageView *)imgView {
    [UIView beginAnimations:[NSString stringWithFormat:@"%i",imgView.tag] context:nil];
    [UIView setAnimationDuration:6];
    [UIView setAnimationDelegate:self];
    imgView.frame = CGRectMake(imgView.frame.origin.x, 0, imgView.frame.size.width, imgView.frame.size.height);
    [UIView commitAnimations];
}

我已经用SpriteKit获得了想要的结果（看看：http://youtu.be/Gnj3UAD3gQI）。气泡沿着正弦曲线从底部到顶部行进，其中振幅在随机范围内。此外，我还使用陀螺仪传感器来影响路径。

这种行为是否可以通过UIKit，CG，CA以某种方式重现（如果OpenGL也是绝对必要的话）？代码示例很精彩，但任何其他想法也受到高度赞赏。

Answer 1

要沿路径设置动画，首先需要定义该路径。如果你真的需要一个真正的正弦曲线，我们可以告诉你如何做到这一点，但最简单的方法是用两条二次贝塞尔曲线定义近似正弦曲线的东西：

CGFloat width = ...
CGFloat height = ...
CGPoint startPoint = ...

CGPoint point = startPoint;
CGPoint controlPoint = CGPointMake(point.x + width / 4.0, point.y - height / 4.0);
CGPoint nextPoint = CGPointMake(point.x + width / 2.0, point.y);

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:point];
[path addQuadCurveToPoint:nextPoint controlPoint:controlPoint];

point = nextPoint;
controlPoint = CGPointMake(point.x + width / 4.0, point.y + height / 4.0);
nextPoint = CGPointMake(point.x + width / 2.0, point.y);

[path addQuadCurveToPoint:nextPoint controlPoint:controlPoint];

这样渲染路径：

显然，将startPoint，width和height更改为您想要的任何内容。或者，如果需要更多迭代，请重复添加更多贝塞尔路径的过程。

无论如何，在定义路径而不是渲染路径本身之后，您可以创建一个CAKeyframeAnimation，以便沿着该路径为position的{​​{1}}设置动画：

UIView