วิธีปฏิบัติที่ดีที่สุดสำหรับ iPhone UIView Animation


142

อะไรคือวิธีปฏิบัติที่ดีที่สุดในการสร้างภาพเคลื่อนไหวการเปลี่ยนมุมมองบน iPhone

ตัวอย่างเช่นViewTransitionsโครงการตัวอย่างจาก apple ใช้รหัสเช่น:

CATransition *applicationLoadViewIn = [CATransition animation];
[applicationLoadViewIn setDuration:1];
[applicationLoadViewIn setType:kCATransitionReveal];
[applicationLoadViewIn setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[[myview layer] addAnimation:applicationLoadViewIn forKey:kCATransitionReveal];

แต่ยังมีตัวอย่างโค้ดที่ลอยอยู่รอบ ๆ ตาข่ายซึ่งมีลักษณะดังนี้:

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
[UIView setAnimationDelegate:self];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:myview cache:YES];
[myview removeFromSuperview];
[UIView commitAnimations];

แนวทางที่ดีที่สุดคืออะไร หากคุณสามารถให้ข้อมูลโค้ดได้เช่นกัน

หมายเหตุ:ฉันไม่สามารถรับวิธีที่สองเพื่อทำงานอย่างถูกต้อง

คำตอบ:


118

จากส่วนการอ้างอิง UIViewเกี่ยวกับbeginAnimations:context:วิธีการ:

ห้ามใช้วิธีนี้ใน iPhone OS 4.0 และใหม่กว่า คุณควรใช้วิธีภาพเคลื่อนไหวแบบบล็อกแทน

ตัวอย่างของแอนิเมชันที่ใช้บล็อกตามความคิดเห็นของทอม

[UIView transitionWithView:mysuperview 
                  duration:0.75
                   options:UIViewAnimationTransitionFlipFromRight
                animations:^{ 
                    [myview removeFromSuperview]; 
                } 
                completion:nil];

4
ดังนั้น .. เพื่อความชัดเจนนั่นหมายถึงใช้วิธีแรก (CATransition) ไม่ใช่วิธีที่สอง?
Steve N

2
ใช่มันเป็นแนวทางแรก (CATransition)
NebulaFox

16
@Steven N ไม่ได้หมายความว่าจะใช้แอนิเมชั่นบล็อกUIViewแทน โดยพื้นฐานแล้วพวกเขาจะเหมือนกับbeginAnimationsและเพื่อน ๆ แต่ใช้คุณสมบัติบล็อก / ปิด
Dan Rosenstark

36
ใช่หญ้าถูกต้อง นี่เป็นลักษณะภาพเคลื่อนไหวของบล็อก: [UIView transitionWithView:mysuperview duration:0.75 options:UIViewAnimationTransitionFlipFromRight animations:^{ [myview removeFromSuperview]; } completion:nil]ตรวจสอบรายละเอียดจากเอกสารประกอบของ UIView
Tom van Zummeren

3
ยกเว้นถ้าคุณต้องการรองรับโทรศัพท์ 3.1.3 จากนั้นอย่าใช้บล็อก
ZaBlanc

69

ฉันใช้ภาพเคลื่อนไหวอนิเมชั่นน้ำหนักเบาที่มีประโยชน์มากมาย คุณสามารถใช้ crossfade สองมุมมองหรือลบมุมมองต่อหน้ามุมมองอื่นหรือลบมุมมองออก คุณสามารถถ่ายภาพมุมมองมากกว่าอีกเช่นแบนเนอร์คุณสามารถทำให้การยืดหรือหดมุมมอง ... ฉันได้รับมากระยะจาก/beginAnimationcommitAnimations

อย่าคิดว่าสิ่งที่คุณทำได้คือ:

[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:myview cache:YES];

นี่คือตัวอย่าง:

[UIView beginAnimations:nil context:NULL]; {
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationDelegate:self];
    if (movingViewIn) {
// after the animation is over, call afterAnimationProceedWithGame
//  to start the game
        [UIView setAnimationDidStopSelector:@selector(afterAnimationProceedWithGame)];

//      [UIView setAnimationRepeatCount:5.0]; // don't forget you can repeat an animation
//      [UIView setAnimationDelay:0.50];
//      [UIView setAnimationRepeatAutoreverses:YES];

        gameView.alpha = 1.0;
        topGameView.alpha = 1.0;
        viewrect1.origin.y = selfrect.size.height - (viewrect1.size.height);
        viewrect2.origin.y = -20;

        topGameView.alpha = 1.0;
    }
    else {
    // call putBackStatusBar after animation to restore the state after this animation
        [UIView setAnimationDidStopSelector:@selector(putBackStatusBar)];
        gameView.alpha = 0.0;
        topGameView.alpha = 0.0;
    }
    [gameView setFrame:viewrect1];
    [topGameView setFrame:viewrect2];

} [UIView commitAnimations];

อย่างที่คุณเห็นคุณสามารถเล่นกับอัลฟ่าเฟรมและขนาดของมุมมองได้ เล่นรอบ ๆ คุณอาจประหลาดใจกับความสามารถของมัน


52

ความแตกต่างนั้นดูเหมือนจะเป็นปริมาณการควบคุมที่คุณต้องการในแอนิเมชั่น

CATransitionวิธีการดังกล่าวช่วยให้คุณควบคุมได้มากขึ้นและทำให้มีสิ่งต่างๆมากขึ้นในการตั้งค่าเช่น ฟังก์ชั่นจับเวลา ในฐานะที่เป็นวัตถุคุณสามารถจัดเก็บไว้ในภายหลังปรับโครงสร้างให้ชี้ภาพเคลื่อนไหวทั้งหมดของคุณเพื่อลดรหัสที่ซ้ำซ้อน ฯลฯ

UIViewวิธีการเรียนวิธีการความสะดวกสบายสำหรับภาพเคลื่อนไหวที่เหมือนกัน แต่จะถูก จำกัด CATransitionมากกว่า ตัวอย่างเช่นมีการเปลี่ยนประเภทที่เป็นไปได้เพียงสี่ประเภท (พลิกซ้ายพลิกขวาโค้งงอขดตัวลง) หากคุณต้องการที่จะจางหายไปคุณจะต้องขุดลงเพื่อCATransition'sเปลี่ยนสีจางหรือตั้งค่าภาพเคลื่อนไหวชัดเจนของUIViewอัลฟาของคุณ

โปรดทราบว่าCATransitionบน Mac OS X จะช่วยให้คุณระบุโดยพลการCoreImageกรองเพื่อใช้เป็นการเปลี่ยนแปลง แต่มันยืนตอนนี้คุณไม่สามารถทำเช่นนี้ใน iPhone CoreImageซึ่งขาด


7
โปรดทราบว่านี่เป็นคำแนะนำในยุค iOS 2.0 ดูคำตอบของ Rafael Vega เกี่ยวกับวิธีบล็อกแบบบล็อกหากคุณใช้ iOS 4.0 ขึ้นไป
Ryan McCuaig

โปรดทราบว่า CoreImage มีให้บริการใน iOS 5 แล้ว แต่มีเพียงไม่กี่ฟีเจอร์เท่านั้น ฉันเชื่อว่าคุณสามารถใช้การเปลี่ยนแปลง CoreImage ในภาพเคลื่อนไหวได้ แต่คุณไม่สามารถสร้างตัวกรอง CoreImage ที่กำหนดเองบน iOS (5)
Aaron Ash

26

เราสามารถสร้างภาพเคลื่อนไหวใน iOS 5 โดยใช้รหัสง่ายๆนี้

CGRect imageFrame = imageView.frame;
imageFrame.origin.y = self.view.bounds.size.height;

[UIView animateWithDuration:0.5
    delay:1.0
    options: UIViewAnimationCurveEaseOut
    animations:^{
        imageView.frame = imageFrame;
    } 
    completion:^(BOOL finished){
        NSLog(@"Done!");
    }];

5
สิ่งนี้มีอยู่ใน iOS 4 เช่นกันและเรียกว่าเป็นภาพเคลื่อนไหว "บล็อกที่ใช้" ไม่ จำกัด เฉพาะ iOS 5 และใหม่กว่า
johnbakers

8

ในUIViewเอกสารให้อ่านเกี่ยวกับฟังก์ชันนี้สำหรับios4 +

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

6

อย่างไรก็ตามวิธี "บล็อก" นั้นได้รับการแจ้งล่วงหน้าทุกวัน ฉันจะอธิบายบล็อกง่าย ๆ ด้านล่าง

ลองพิจารณา snipped ด้านล่าง bug2 และ bug 3 คือ imageViews ภาพเคลื่อนไหวด้านล่างอธิบายภาพเคลื่อนไหวที่มีระยะเวลา 1 วินาทีหลังจากหน่วงเวลา 1 วินาที บั๊ก 3 ถูกย้ายจากศูนย์กลางไปยังศูนย์กลางของบั๊ก 2 เมื่อนิเมชั่นเสร็จสมบูรณ์มันจะถูกบันทึกไว้ "Center Animation Done!"

-(void)centerAnimation:(id)sender
{
NSLog(@"Center animation triggered!");
CGPoint bug2Center = bug2.center;

[UIView animateWithDuration:1
                      delay:1.0
                    options: UIViewAnimationCurveEaseOut
                 animations:^{
                     bug3.center = bug2Center;
                 } 
                 completion:^(BOOL finished){
                     NSLog(@"Center Animation Done!");
                 }];
}

หวังว่าจะสะอาด !!!


2
คุณกำหนด CGPoint bug3.center ให้กับ bug3Center และหลังจากนั้นคุณกำหนด CGPoint bug2.center ให้กับ Bug3Center เดียวกันหรือไม่ ทำไมคุณทำแบบนั้น ?
pnizzle

oopss !! นั่นเป็นเพื่อนที่พิมพ์ผิด อัปเดตทันที
Deepukjayan

2

นี่คือรหัสสำหรับภาพเคลื่อนไหวที่ราบรื่นอาจเป็นประโยชน์สำหรับนักพัฒนาหลายคน
ฉันพบข้อมูลโค้ดนี้จากบทช่วยสอนนี้

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[animation setAutoreverses:YES];
[animation setFromValue:[NSNumber numberWithFloat:1.3f]];
[animation setToValue:[NSNumber numberWithFloat:1.f]];
[animation setDuration:2.f];
[animation setRemovedOnCompletion:NO];

[animation setFillMode:kCAFillModeForwards];
[[self.myView layer] addAnimation:animation forKey:@"scale"];/// add here any Controller that you want t put Smooth animation.

2

ลองทำและเช็คเอาต์สำหรับ Swift 3 ...

UIView.transition(with: mysuperview, duration: 0.75, options:UIViewAnimationOptions.transitionFlipFromRight , animations: {
    myview.removeFromSuperview()
}, completion: nil)
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.