2014-01-28 168 views
1

我想要動畫我用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。

我錯過了什麼嗎? (我們的目標是做一個排序蠟燭般的動畫)

回答

3

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

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

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

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

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

ANOTHER編輯

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

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

可能的解決方案

CAShapeLayerpath屬性是動畫,所以你可能地利用這一點。

喜歡的東西...

// 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開始,你應該使用更新的塊動畫。

+1

謝謝! 我仍然無法使用你的方法啓動並運行一個動畫塊和一個CAShapeLayer(沒有任何事情發生,我試過各種東西) 我最終的解決方案是使用一個定時器並調用setNeedsDisplay,現在我我將自己管理動畫。 –

+0

很高興你在最後工作。 – Fogmeister