項(xiàng)目的任務(wù)，需要實(shí)現(xiàn)一個類似于下圖的翻轉(zhuǎn)動畫，圖片在翻轉(zhuǎn)的同時，還要進(jìn)行改變。
最開始，直接使用UIView的動畫。
代碼很簡單：
- (void)viewAnimation {
[UIView transitionWithView:_imageView duration:2*actionSeconds options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
if (_imageView.tag == 101) {
_imageView.image = [UIImage imageNamed:@"logo"];
_imageView.tag = 102;
} else {
_imageView.image = [UIImage imageNamed:@"icon"];
_imageView.tag = 101;
}
}completion:^(BOOL finished) {
[self viewAnimation];
}];
}
但是，這樣實(shí)現(xiàn)的動畫，圖片在翻轉(zhuǎn)的時候，背景會變暗。
這是因?yàn)椋诜D(zhuǎn)的時候，imageView的alpha值會變化。
為了圖片背景不變暗，所以決定使用layer層的動畫。
代碼如下：
- (void)simpleLyerRotation
{
CABasicAnimation* basicAnimation;
basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
basicAnimation.toValue = [NSNumber numberWithFloat: M_PI ];
basicAnimation.duration = 1.2*actionSeconds;
basicAnimation.cumulative = NO;
basicAnimation.repeatCount = 1;
basicAnimation.fillMode = kCAFillModeForwards;
basicAnimation.removedOnCompletion = NO;
basicAnimation.delegate = self;
[_imageView.layer addAnimation:basicAnimation forKey:@"rotationAnimation"];
[self performSelector:@selector(changeImg) withObject:nil afterDelay:0.6 * actionSeconds];
}
- (void)changeImg
{
if (_imageView.tag == 101) {
_imageView.image = [UIImage imageNamed:@"logo"];
_imageView.tag = 102;
} else {
_imageView.image = [UIImage imageNamed:@"icon"];
_imageView.tag = 101;
}
}
但是，效果有問題，翻轉(zhuǎn)的時候，會轉(zhuǎn)到反面去。
仔細(xì)分析之后，我發(fā)現(xiàn)，需要達(dá)到的功能是：圖片先順著旋轉(zhuǎn)90°，接著再逆著旋轉(zhuǎn)90°。這樣，就不會顯示反著的圖片。
這樣的話，就需要一個連續(xù)的動畫效果。
使用CABasicAnimation，我無法實(shí)現(xiàn)這樣的功能。后來，發(fā)現(xiàn)可以使用CAKeyframeAnimation，來創(chuàng)建這樣的動畫效果。
代碼如下：
- (void)layerRotation ?{
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animation];
// 旋轉(zhuǎn)角度， 其中的value表示圖像旋轉(zhuǎn)的最終位置
keyAnimation.values = [NSArray arrayWithObjects:
[NSValue valueWithCATransform3D:CATransform3DMakeRotation(0, 0,1,0)],
[NSValue valueWithCATransform3D:CATransform3DMakeRotation((M_PI/2), 0,1,0)],
[NSValue valueWithCATransform3D:CATransform3DMakeRotation(0, 0,1,0)],
nil];
keyAnimation.cumulative = NO;
keyAnimation.duration = 1.2 * actionSeconds;
keyAnimation.repeatCount = 1;
keyAnimation.removedOnCompletion = NO;
keyAnimation.delegate = self;
[_imageView.layer addAnimation:keyAnimation forKey:@"transform"];
[self performSelector:@selector(changeImg) withObject:nil afterDelay:0.6 * actionSeconds];
}
