iOS 动画贝塞尔曲线/正弦曲线

Posted

技术标签:

【中文标题】iOS 动画贝塞尔曲线/正弦曲线【英文标题】:iOS Animated Bezier/Sine Curve 【发布时间】:2013-07-08 18:56:18 【问题描述】:

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

我已经尝试了几个测试,这是我最接近的测试: IOS : Animate transformation from a line to a bezier curve

我需要知道如何为实际曲线设置动画,使其看起来好像在移动,而不仅仅是上下移动。

如果有人对此有所了解,那就太棒了!

谢谢!

【问题讨论】:

【参考方案1】:

哇,我今天也在做同样的事情。 :) 检查这个:

所以我绘制波浪的视图被初始化为:

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

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

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

这给了波浪一种你可能想要的线性运动。

至于wave的代码,我将分享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);

【讨论】:

这太棒了!这几乎是我要找的。当我尝试这样做时,我看到的唯一问题是视图的动画并不是真正连续的。有什么想法吗? 我故意留了一些小东西让你去解决:/ 知道了!感谢您的帮助! 很高兴为您提供帮助 :) 那么您最终做了哪些修改? 你真正要做的是在你的drawRect中绘制一个正弦波,然后应用一个UIView动画来左右移动它。如果您不需要改变波形的频率或幅度,这是一个很好的解决方案。

以上是关于iOS 动画贝塞尔曲线/正弦曲线的主要内容,如果未能解决你的问题,请参考以下文章

JS模拟CSS3动画-贝塞尔曲线

贝塞尔曲线与CAShapeLayer的关系以及Stroke动画

CSS3动画常用贝塞尔曲线-效果演示

为贝塞尔曲线的一个点设置动画[重复]

cubic-bezier贝塞尔曲线css3动画工具

iOS世界里的贝塞尔曲线(一):贝塞尔曲线基础