動畫貝塞爾曲線點

Question

我想要動畫我用Paintcode（偉大的應用程序，順便說一句）所做的貝塞爾曲線，並繪製在「drawRect」方法中的自定義UIView。

繪圖工作正常，但我想要在貝塞爾曲線中爲單個點設置動畫。

這裏是我的非工作方法：

-(void)animateFlame{ 
    NSLog(@"Animating"); 
    // Create the starting path. Your curved line. 
    //UIBezierPath * startPath; 
    // Create the end path. Your straight line. 
    //UIBezierPath * endPath = [self generateFlame]; 
    //[endPath moveToPoint: CGPointMake(167.47, 214)]; 

    int displacementX = (((int)arc4random()%50))-25; 
    int displacementY = (((int)arc4random()%30))-15; 
    NSLog(@"%i %i",displacementX,displacementY); 

    UIBezierPath* theBezierPath = [UIBezierPath bezierPath]; 
    [theBezierPath moveToPoint: CGPointMake(167.47, 214)]; 
    [theBezierPath addCurveToPoint: CGPointMake(181+displacementX, 100+displacementY) controlPoint1: CGPointMake(89.74, 214) controlPoint2: CGPointMake(192.78+displacementX, 76.52+displacementY)]; 
    [theBezierPath addCurveToPoint: CGPointMake(167.47, 214) controlPoint1: CGPointMake(169.22+displacementX, 123.48+displacementY) controlPoint2: CGPointMake(245.2, 214)]; 
    [theBezierPath closePath]; 
    // Create the shape layer to display and animate the line. 
    CAShapeLayer * myLineShapeLayer = [[CAShapeLayer alloc] init]; 

    CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; 
    pathAnimation.fromValue = (__bridge id)[bezierPath CGPath]; 
    pathAnimation.toValue = (__bridge id)[theBezierPath CGPath]; 
    pathAnimation.duration = 0.39f; 
    [myLineShapeLayer addAnimation:pathAnimation forKey:@"pathAnimation"]; 

    bezierPath = theBezierPath; 
} 

利用這一點，在任何屏幕上移動的。生成的隨機位移很好，bezierPath變量是一個用類作用域聲明的UIBezierPath。

我錯過了什麼嗎？ （我們的目標是做一個排序蠟燭般的動畫）

Answer 1

快速編輯 剛剛看到您層的代碼。你在混合幾個不同的概念。像drawRect，CAShapeLayer，舊的動畫代碼等...

通過執行下面的方法，你應該能夠得到這個工作。

你不能做到這一點:(你不能動畫的drawRect的內容（即你不能讓它在動畫製作過程中吸取多次）。

您可以到使用計時器或其他東西，並創建您自己的動畫類型代碼（即創建一個計時器，每秒觸發30次並運行一個函數，計算您在動畫中的位置並更新要更改的值並呼叫[self setNeedsDisplay];以觸發繪製矩形方法。

除此之外沒有什麼可以做。

ANOTHER編輯

只需在此添加另一個選項。用CAShapeLayer做這件事可能是非常糟糕的表現。您可能最好使用帶有一系列UIImage的UIImageView。

在UIImageView中內置了properties，animationImages，animationDuration等。

可能的解決方案

的CAShapeLayer的path屬性是動畫，所以你可能地利用這一點。

喜歡的東西...

// set up properties for path 
@property (nonatomic, assign) CGPath startPath; 
@property (nonatomic, assign) CGPath endPath; 
@property (nonatomic, strong) CAShapeLayer *pathLayer; 

// create the startPath 
UIBezierPath *path = [UIBezierPath //create your path using the paint code code 
self.startPath = path.CGPath; 

// create the end path 
path = [UIBezierPath //create your path using the paint code code 
self.endPath = path.CGPath; 

// create the shapee layer 
self.pathLayer = [CAShapeLayer layer]; 
self.pathLayer.path = self.startPath; 
//also set line width, colour, shadows, etc... 

[self.view.layer addSubLayer:self.pathLayer]; 

那麼你應該能夠像動畫這樣的路徑...

- (void)animatePath 
{ 
    [UIView animateWithDuration:2.0 
     animations^() { 
      self.pathlayer.path = self.endPath; 
    }]; 
} 

有大量的筆記在約CAShapeLayer並動態的文檔路徑屬性。

雖然這應該工作。

另外，擺脫舊的動畫代碼。從iOS4.3開始，你應該使用更新的塊動畫。