Praktik Terbaik Animasi UIView iPhone

142

Apa yang dianggap praktik terbaik untuk menjiwai transisi tampilan di iPhone?

Misalnya, ViewTransitionsproyek sampel dari apel menggunakan kode seperti:

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

tetapi ada juga cuplikan kode yang mengambang di sekitar jaring yang terlihat seperti ini:

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

Apa pendekatan terbaik? Jika Anda bisa memberikan potongan juga itu akan sangat dihargai.

CATATAN: Saya tidak bisa mendapatkan pendekatan kedua agar berfungsi dengan benar.

Keith Fitzgerald
sumber

Jawaban:

118

Dari bagian referensi UIView tentang beginAnimations:context:metode ini:

Penggunaan metode ini tidak disarankan di iPhone OS 4.0 dan yang lebih baru. Anda harus menggunakan metode animasi berbasis blok sebagai gantinya.

Misalnya Animasi Berbasis Blok berdasarkan Tom's Comment

[UIView transitionWithView:mysuperview 
                  duration:0.75
                   options:UIViewAnimationTransitionFlipFromRight
                animations:^{ 
                    [myview removeFromSuperview]; 
                } 
                completion:nil];
Rafael Vega
sumber
4
Jadi .. harus jelas, itu berarti gunakan pendekatan pertama (CATransition), bukan yang kedua?
Steve N
2
Ya, ini adalah pendekatan pertama (CATransition).
NebulaFox
16
@ Sebelas N, tidak, itu berarti menggunakan animasi berbasis blok UIViewsebagai gantinya. Mereka pada dasarnya sama dengan beginAnimationsdan teman, tetapi menggunakan fitur blok / penutupan.
Dan Rosenstark
36
Ya, Yar benar. Ini adalah bagaimana animasi blok terlihat seperti: [UIView transitionWithView:mysuperview duration:0.75 options:UIViewAnimationTransitionFlipFromRight animations:^{ [myview removeFromSuperview]; } completion:nil]Periksa dokumentasi UIView untuk detailnya.
Tom van Zummeren
3
Kecuali jika Anda ingin mendukung ponsel 3.1.3. Maka jangan gunakan blok.
ZaBlanc
69

Saya telah menggunakan yang terakhir untuk banyak animasi ringan yang bagus. Anda dapat menggunakannya menyeberangi dua tampilan, atau memudar satu di depan yang lain, atau memudar. Anda dapat memotret pemandangan lain seperti spanduk, Anda dapat membuat tampilan melebar atau mengecil ... Saya mendapatkan banyak jarak tempuh dari beginAnimation/ commitAnimations.

Jangan berpikir bahwa yang dapat Anda lakukan adalah:

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

Berikut ini contohnya:

[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];

Seperti yang Anda lihat, Anda bisa bermain dengan alpha, bingkai, dan bahkan ukuran tampilan. Bermain-main. Anda mungkin akan terkejut dengan kemampuannya.

mahboudz
sumber
52

Perbedaannya tampaknya adalah jumlah kontrol yang Anda butuhkan atas animasi.

Itu CATransition pendekatan memberikan kontrol yang lebih dan karena itu lebih banyak hal untuk mengatur, misalnya. fungsi pengaturan waktu. Menjadi objek, Anda dapat menyimpannya nanti, refactor untuk mengarahkan semua animasi Anda padanya untuk mengurangi kode duplikat, dll.

Metode UIViewkelas adalah metode kenyamanan untuk animasi umum, tetapi lebih terbatas daripada CATransition. Misalnya, hanya ada empat jenis transisi yang mungkin (flip kiri, flip kanan, meringkuk, meringkuk ke bawah). Jika Anda ingin melakukan fade in, Anda harus menggali untuk CATransition'smemudar transisi, atau mengatur animasi eksplisit UIViewalpha Anda.

Perhatikan bahwa CATransitionpada Mac OS X Anda dapat menentukan CoreImagefilter sewenang-wenang untuk digunakan sebagai transisi, tetapi seperti yang berlaku sekarang Anda tidak dapat melakukan ini pada iPhone, yang kekurangan CoreImage.

Ryan McCuaig
sumber
7
Perhatikan bahwa ini adalah saran untuk iOS 2.0-era. Lihat jawaban Rafael Vega pada metode berbasis blok jika Anda menggunakan iOS 4.0 atau lebih tinggi.
Ryan McCuaig
Perhatikan juga bahwa CoreImage sekarang tersedia pada iOS 5, tetapi hanya beberapa fitur-fiturnya. Saya percaya Anda dapat menggunakan transisi CoreImage dalam animasi, tetapi Anda tidak dapat membuat filter CoreImage khusus di iOS (5).
Aaron Ash
26

Kita dapat menghidupkan gambar di ios 5 menggunakan kode sederhana ini.

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!");
    }];
Guru
sumber
5
ini tersedia di iOS 4 juga dan disebut sebagai animasi "berbasis blok". Itu tidak terbatas pada iOS 5 dan yang lebih baru.
johnbakers
8

Dalam UIViewdokumen, baca fungsi ini untuk ios4 +

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

Bagaimanapun metode "Blok" lebih disukai sekarang-a-hari. Saya akan menjelaskan blok sederhana di bawah ini.

Pertimbangkan potongan di bawah ini. bug2 dan bug 3 adalah imageViews. Animasi di bawah ini menjelaskan animasi dengan durasi 1 detik setelah penundaan 1 detik. Bug3 dipindahkan dari pusatnya ke pusat bug2. Setelah animasi selesai itu akan dicatat "Pusat Animasi Selesai!".

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

Semoga bersih !!!

Deepukjayan
sumber
2
Anda menugaskan CGPoint bug3.center ke bug3Center dan setelah itu Anda menetapkan CGPoint bug2.center ke variabel bug3Center yang sama? Mengapa kamu melakukan itu ?
pnizzle
Ups !! itu teman salah ketik. Diperbarui sekarang.
Deepukjayan
2

Berikut ini adalah Code for Smooth animation, mungkin dapat membantu banyak pengembang.
Saya menemukan potongan kode ini dari tutorial ini.

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.
iPatel
sumber
2

ayo coba dan checkout Untuk Swift 3 ...

UIView.transition(with: mysuperview, duration: 0.75, options:UIViewAnimationOptions.transitionFlipFromRight , animations: {
    myview.removeFromSuperview()
}, completion: nil)
Saurabh Sharma
sumber