iOS动画Bezier /正弦曲线 [英] iOS Animated Bezier/Sine Curve

问题描述

我希望在iOS中的循环上设置单线贝塞尔曲线的动画。我头脑中的想法类似于Siri之前的iPhone 4上的语音控制屏幕。曲线不需要对任何东西做出反应即。音频，麦克风等。它只需要从屏幕左侧循环到屏幕右侧，并改变曲线的幅度。

I am looking to animate a single-line bezier curve on a loop in iOS. The idea I have in my head resembles the Voice Control screen on the iPhone 4 before Siri. The curve does not need to react to anything ie. Audio, mic etc. It just needs to loop from screen left to screen right, and change the amplitude of the curve.

我尝试了几次测试，这是我最接近的测试：
IOS：从一条线到一条贝塞尔曲线的动画转换

I have tried a couple tests and this is the closest I have come: IOS : Animate transformation from a line to a bezier curve

我需要知道如何动画实际曲线看起来好像在移动，而不仅仅是向上和向下。

I need to know how to animated the actual curve to appear as if it is moving, not just up and down.

如果任何人有一些亮光这真是太棒了！

If any one has some light to shed on this, that would be awesome!

谢谢！

推荐答案

哇，今天我的工作完全一样。 :)
检查：

Wow, I worked on the exact same thing today. :) Check this :

因此，我绘制波浪的视图初始化为：

So the view where I draw my waves, is initialized as :

_self_view = [[TDTWaveView alloc] initWithFrame:CGRectMake(-320, 174, 640, 200)];

然后在我的viewDidLoad中，我调用 [self animateWave]; 一次。

Then in my viewDidLoad, I call [self animateWave]; once.

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

这为波浪提供了一种你想要的线性运动。

This gives the wave a sort of linear motion you might want.

至于wave的代码，我将分享正确的。

As far as the code for the wave goes, I'll share the drawrect.

self.yc = 30//The height of a crest.
float w = 0;//starting x value.
float y = rect.size.height;
float width = rect.size.width;
int cycles = 7;//number of waves
self.x = width/cycles;
CGContextRef context = UIGraphicsGetCurrentContext();
CGMutablePathRef path = CGPathCreateMutable();
CGContextSetLineWidth(context, .5);
while (w <= width) {
    CGPathMoveToPoint(path, NULL, w,y/2);
    CGPathAddQuadCurveToPoint(path, NULL, w+self.x/4, y/2 - self.yc, w+self.x/2, y/2);
    CGPathAddQuadCurveToPoint(path, NULL, w+3*self.x/4, y/2 + self.yc, w+self.x, y/2);
    w+=self.x;
}
CGContextAddPath(context, path);
CGContextDrawPath(context, kCGPathStroke);

这篇关于iOS动画Bezier /正弦曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！