Bild während der Übersetzung ändern

Question

Wie kann ich myLayer.contents während der Übersetzung mit einer Reihe von Bildern (d. H. Zwischen img1 und img2) wechseln? Vielen Dank!

UIImage *myImage = [UIImage imageNamed:@"img1.png"]; 
CALayer *myLayer = [CALayer layer]; 
myLayer.contents = (id)myImage.CGImage; 
myLayer.Position = CGPointMake(0,0); 
myLayer.Bounds=CGRectMake(0.0, 0.0, 50, 50); 
[self.view.layer addSublayer:myLayer]; 

//translation1 
CGPoint startPt = CGPointMake(10,10); 
CGPoint endPt = CGPointMake(100,100);  
CABasicAnimation *transl1 = [CABasicAnimation animationWithKeyPath:@"position"]; 
transl1.removedOnCompletion = FALSE; 
transl1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; 
transl1.fromValue = [NSValue valueWithCGPoint:startPt]; 
transl1.toValue = [NSValue valueWithCGPoint:endPt]; 
transl1.duration = 3; 
transl1.fillMode = kCAFillModeForwards; 
transl1.beginTime = 0; 
[myLayer addAnimation: transl1 forKey: nil]; 

Answer 1

Der Mann zu Fuß Beispiel:

ich mit genau der gleichen Aufgabe beschäftigt habe, aber ich hatte eine Lauf Spinne zu tun, die 6 Bein zu Fuß ist und 12 Frames. Es war wirklich sehr schwierig zu machen und dauerte einige Monate, um zu perfektionieren. Die Sache ist, dass das Beispiel des wachenden Mannes normalerweise getan wird, indem man ein Array von Bildrahmen (Erstes Bein, Letztes Bein) auf eine animationImages-Eigenschaft von UIImageView setzt. Dann schalten Sie die Animation zusammen mit dem sich bewegenden Charakter nach rechts und links ein und erzeugen dadurch eine Illusion des Gehens. Jetzt entsteht das große Problem, wenn Sie eine Illusion der Beschleunigung erstellen möchten. Es gibt keine Möglichkeit, die Animationsdauer während der Animationswiedergabe zu ändern, und dies ist ein schwerer Rückschlag, der nur schwer zu überwinden ist. Hier

ist der Code, den ich produziert, dieses Problem zu überwinden:

Hier definieren Sie ein Array mit den Laufbein Bilder, Bilderrahmen pro Schritt.

animationImagesSpider = [NSArray arrayWithObjects: 
[UIImage imageNamed:@"1@2x.png"], [UIImage imageNamed:@"2@2x.png"], [UIImage imageNamed:@"3@2x.png"], [UIImage imageNamed:@"4@2x.png"], [UIImage imageNamed:@"5@2x.png"], [UIImage imageNamed:@"6@2x.png"], [UIImage imageNamed:@"6@2x.png"], [UIImage imageNamed:@"8@2x.png"], [UIImage imageNamed:@"9@2x.png"], [UIImage imageNamed:@"10@2x.png"], [UIImage imageNamed:@"11@2x.png"], [UIImage imageNamed:@"1@2x.png"], nil]; 

Hier legen Sie das Array an die UIImageView:

imgViewSpider = [[UIImageView alloc] initWithFrame:CGRectMake(200,410,100,145)]; 
imgViewSpider.animationImages = animationImagesSpider; 

Nun, wenn Sie rufen Sie einfach [imgViewSpider startAnimating]; Dies startet die Animation mit einer konstanten Geschwindigkeit, bis Sie sie stoppen. Um dies zu überwinden habe ich eine Rekursion verwendet, die eine kurze Animation für jeden Schritt spielt und dies ermöglicht es, die Dauer zwischen dem einzelnen Schritten einstellen:

- (void) spiderRun { 

    imgViewSpider.animationDuration= 0.51-(accSp/3.5); 
    [imgViewSpider setAnimationRepeatCount:222]; /// this is a dummy value that has no effect because animtion ends after the first frame 
    [imgViewSpider startAnimating]; 
    [self performSelector:@selector(spiderRun) withObject:nil afterDelay: 0.5-(accSp/3.5)]; 

} 

Durch ständig den accSp Wert zu ändern, kann ich die Gehgeschwindigkeit Kontrolle während der Wanderung .

Answer 2

Sie müssen eine zweite Animation transl2 erstellen, diese Animation wird das Bild tauschen. Sie müssen die Dauer auf die Hälfte der Transl1 Dauer einstellen, so dass sie in der Mitte der Transl1 Animation liegt.

transl1.duration = 3

transl2.duration = 1,5

Answer 3

Als das andere Plakat gesagt, schaffen eine zweite Animation, die die Inhalte Eigenschaft der Schicht um ein neues Bild belebt.

Ich würde empfehlen, beide Animationen in eine Animationsgruppe einzufügen und die Animationsgruppe zur Ebene hinzuzufügen. Dann können Sie sowohl die Dauer als auch die Startzeit beider Animationen einfach steuern. Sie können dafür sorgen, dass der Bildaustausch über einen Teil der Gesamtdauer stattfindet, der zeitlich in der Mitte der Animation stattfindet.

Sie würden den Start der Animation mit der Eigenschaft beginTime und der Dauer mit der Eigenschaft duration festlegen.