動畫效果設(shè)計一直是iOS平臺的優(yōu)勢,良好的動效設(shè)計可以很好地提升用戶體驗淤井,豐富app的展示布疼,而動畫則是動效的基礎(chǔ)支撐。今天就來看一下簡單的動畫學(xué)習币狠。
概念性的東西我就不做介紹了游两,我就直接上代碼(簡單暴力,呵呵)
1.簡單的縮放代碼
- (CAAnimation *)SetupScaleAnimation{
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.duration = 3.0;
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:3.0];
scaleAnimation.repeatCount = MAXFLOAT;
scaleAnimation.autoreverses = YES;
scaleAnimation.fillMode = kCAFillModeForwards;
scaleAnimation.removedOnCompletion = NO;
return scaleAnimation;
}
2.簡單的移動代碼
- (CAAnimation *)SetupMoveAnimation{
CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
moveAnimation.fromValue = [NSValue valueWithCGPoint:_label.layer.position];
moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(_label.layer.position.x, 667-60)];
moveAnimation.autoreverses = YES;
moveAnimation.duration = 3.0;
return moveAnimation;
}
3.簡單的旋轉(zhuǎn)代碼
- (CAAnimation *)SetupRotationAnimation{
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
rotationAnimation.duration = 1.5;
rotationAnimation.autoreverses = YES;
rotationAnimation.repeatCount = MAXFLOAT;
rotationAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
rotationAnimation.toValue = [NSNumber numberWithFloat:2 * M_PI];
rotationAnimation.fillMode = kCAFillModeBoth;
return rotationAnimation;
}
4.動畫組代碼
- (CAAnimation *)SetupGroupAnimation{
CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
groupAnimation.duration = 3.0;
groupAnimation.animations = @[[self SetupScaleAnimation], [self SetupMoveAnimation], [self SetupRotationAnimation]];
groupAnimation.autoreverses = YES;
groupAnimation.repeatCount = MAXFLOAT;
return groupAnimation;
}
調(diào)用代碼
- (void)SetupLayer{
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(150, 20, 100, 30)];
label.text = @"哈哈哈";
label.font = [UIFont boldSystemFontOfSize:12];
label.textColor = [UIColor redColor];
[self.view addSubview:label];
_label = label;
[_label.layer addAnimation:[self SetupScaleAnimation] forKey:@"scale"];
}
雖然這些很初級漩绵,但是我之前一直不會怎么寫贱案,都是網(wǎng)上搜代碼,所以我想學(xué)習一下止吐,學(xué)習嘛宝踪,慢慢來,急也急不來碍扔,想做出很炫的動畫瘩燥,是要日積月累的。插入一我的故事:之前為了5.20蕴忆,作為一個碼農(nóng)的我颤芬,算是費盡心思的取悅女朋友。學(xué)習的堅持是需要動力的套鹅,取悅我心愛之人是我的動力之一,其次還有就是我想做出更好的app汰具,熟悉更多的知識卓鹿。我想做出一個漂亮的動效給她看,就以葫蘆畫瓢仿照著寫留荔,終于有點成效吟孙,這就是我們碼農(nóng)的浪漫-用代碼成就浪漫澜倦,更勝一切浪漫。
demo的下載地址
該demo只是為了實現(xiàn)動畫效果杰妓,代碼沒做封裝藻治,望諒解,效果圖如下:
用代碼成就浪漫2.gif
學(xué)習筆記將持續(xù)更新巷挥。桩卵。。