博客> iOSUIView动画详解(ObjectiveC)
iOSUIView动画详解(ObjectiveC)
2017-08-16 08:24 评论:0 阅读:461 wzt

我在之前的一篇博客中《iOS UIView动画详解(Swift)》讲解了使用Swift来实现UIView类下面提供的多种动画效果,如位置动画、旋转动画、缩放动画、颜色动画、透明度动画等等。为了这个题目的完整性,今天我使用Objective-C来完全重写以上的所有的动画。项目案例已经上传至:https://github.com/chenyufeng1991/iOS-UIView-Animation 中的Animation-OC文件夹下,另一个目录下则是Swift实现的动画。

(1)位置动画

PositionAnimation可以实现View的移动,最简单的就是X轴,Y轴的移动。这里实现几个小方块的移动。

view source print ? 01.

import "PositionViewController.h"

02.

03. @interface PositionViewController () 04.

05. @property (weak, nonatomic) IBOutlet UIView redSquare; 06. @property (weak, nonatomic) IBOutlet UIView greenSquare; 07.

08. @end 09.

10. @implementation PositionViewController 11.

12.

  • (void)viewDidLoad { 13.

14. [super viewDidLoad]; 15. } 16.

17.

18.

  • (void)viewWillAppear:(BOOL)animated{ 19.

20. [super viewWillAppear:animated]; 21. [UIView animateWithDuration:2 animations:^{ 22. self.redSquare.frame = CGRectMake(self.redSquare.frame.origin.x, 400, self.redSquare.bounds.size.width, self.redSquare.bounds.size.height); 23. self.greenSquare.frame = CGRectMake(200, 500, self.greenSquare.bounds.size.width, self.greenSquare.bounds.size.height); 24. }]; 25. } 26.

27. @end

(2)透明度动画

透明度动画可以让某个View的透明度在0-1之间改变。透明度为0表示全透明,看不见了。透明度为1表示和正常情况下一样。

view source print ? 01.

import "OpacityViewController.h"

02.

03. @interface OpacityViewController () 04.

05. @property (weak, nonatomic) IBOutlet UIView *redSquare; 06.

07. @end 08.

09. @implementation OpacityViewController 10.

11.

  • (void)viewDidLoad { 12.

13. [super viewDidLoad]; 14. } 15.

16.

  • (void)viewWillAppear:(BOOL)animated{ 17.

18. [super viewWillAppear:animated]; 19. [UIView animateWithDuration:2 animations:^{ 20. self.redSquare.alpha = 0.3; 21. }]; 22. } 23.

24. @end

(3)缩放动画

缩放动画可以让一个View的大小发生改变,按比例的放大缩小。

view source print ? 01.

import "ScaleViewController.h"

02.

03. @interface ScaleViewController () 04.

05. @property (weak, nonatomic) IBOutlet UIView *redSquare; 06.

07. @end 08.

09. @implementation ScaleViewController 10.

11.

  • (void)viewDidLoad { 12.

13. [super viewDidLoad]; 14. } 15.

16.

  • (void)viewWillAppear:(BOOL)animated{ 17.

18. [super viewWillAppear:animated]; 19. [UIView animateWithDuration:2 animations:^{ 20. //宽高缩放比; 21. self.redSquare.transform = CGAffineTransformMakeScale(2, 3); 22. }]; 23. } 24.

25. @end

(4)颜色动画

颜色动画可以让一个View在一个时间间隔内发生颜色的渐变,进行颜色的过渡。

view source print ? 01.

import "ColorViewController.h"

02.

03. @interface ColorViewController () 04.

05. @property (weak, nonatomic) IBOutlet UIView *greenSquare; 06.

07. @end 08.

09. @implementation ColorViewController 10.

11.

  • (void)viewDidLoad { 12.

13. [super viewDidLoad]; 14. } 15.

16.

  • (void)viewWillAppear:(BOOL)animated{ 17.

18. [super viewWillAppear:animated]; 19. [UIView animateWithDuration:2 animations:^{ 20. //宽高缩放比; 21. self.greenSquare.backgroundColor = [UIColor brownColor]; 22. }]; 23. } 24.

25. @end

(5)旋转动画

可以让某个View绕圆点进行旋转。

view source print ? 01.

import "RotationViewController.h"

02.

03. @interface RotationViewController () 04.

05. @property (weak, nonatomic) IBOutlet UIView greenSquare;//旋转一次; 06. @property (weak, nonatomic) IBOutlet UIView redSquare;//旋转无数次; 07.

08. @end 09.

10. @implementation RotationViewController 11.

12.

  • (void)viewDidLoad { 13.

14. [super viewDidLoad]; 15. } 16.

17.

  • (void)viewWillAppear:(BOOL)animated{ 18.

19. [super viewWillAppear:animated]; 20. [self spinGreenSquare]; 21. [self spinRedSquare]; 22. } 23.

24.

  • (void)spinGreenSquare{ 25.

26. [UIView animateWithDuration:2 animations:^{ 27. self.greenSquare.transform = CGAffineTransformRotate(self.greenSquare.transform, M_PI);//一个PI,180度; 28. } completion:^(BOOL finished) { 29. }]; 30. } 31.

32.

  • (void)spinRedSquare{ 33.

34. [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ 35. self.redSquare.transform = CGAffineTransformRotate(self.redSquare.transform, 360);//一个PI,180度; 36. } completion:^(BOOL finished) { 37. [self spinRedSquare]; 38. }]; 39. } 40.

41. @end

(6)重复动画

该动画可以让某个动画过程反复执行。

view source print ? 01.

import "RepeatViewController.h"

02.

03. @interface RepeatViewController () 04.

05. @property (weak, nonatomic) IBOutlet UIView greenSquare; 06. @property (weak, nonatomic) IBOutlet UIView redSquare; 07.

08. @end 09.

10. @implementation RepeatViewController 11.

12.

  • (void)viewDidLoad { 13.

14. [super viewDidLoad]; 15. } 16.

17.

  • (void)viewWillAppear:(BOOL)animated{ 18.

19. [super viewWillAppear:animated]; 20. [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionRepeat animations:^{ 21. self.greenSquare.frame = CGRectMake(250, self.greenSquare.frame.origin.y, self.greenSquare.frame.size.width, self.greenSquare.frame.size.height); 22. } completion:^(BOOL finished) { 23. }]; 24.

25. [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{ 26.

27. self.redSquare.frame = CGRectMake(250, self.redSquare.frame.origin.y, self.redSquare.frame.size.width, self.redSquare.frame.size.height); 28. } completion:^(BOOL finished) { 29. }]; 30. } 31.

32. @end

(7)缓冲动画

这里主要使用了贝塞尔曲线的效果来改变View动画的速率效果。大家可以实践一下。

view source print ? 01.

import "EasingViewController.h"

02.

03. @interface EasingViewController () 04.

05. @property (weak, nonatomic) IBOutlet UIView greenSquare; 06. @property (weak, nonatomic) IBOutlet UIView redSquare; 07.

08. @end 09.

10. @implementation EasingViewController 11.

12.

  • (void)viewDidLoad { 13.

14. [super viewDidLoad]; 15. } 16.

17.

  • (void)viewWillAppear:(BOOL)animated{ 18.

19. [super viewWillAppear:animated]; 20. //主要是设置options这个参数; 21. [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{ 22.

23. self.greenSquare.frame = CGRectMake(250, self.greenSquare.frame.origin.y, self.greenSquare.frame.size.width, self.greenSquare.frame.size.height); 24. } completion:nil]; 25.

26. [UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{ 27.

28. self.redSquare.frame = CGRectMake(250, self.redSquare.frame.origin.y, self.redSquare.frame.size.width, self.redSquare.frame.size.height); 29. } completion:nil]; 30. } 31.

32. @end

(8)弹簧动画

该动画执行过程中类似弹簧的真实效果,你可以设置弹簧的阻尼和初始速度来达到非常逼真的弹簧抖动。

view source print ? 01.

import "SpringViewController.h"

02.

03. @interface SpringViewController () 04.

05. @property (weak, nonatomic) IBOutlet UIView greenSquare; 06. @property (weak, nonatomic) IBOutlet UIView redSquare; 07.

08. @end 09.

10. @implementation SpringViewController 11.

12.

  • (void)viewDidLoad { 13.

14. [super viewDidLoad]; 15. } 16.

17.

  • (void)viewWillAppear:(BOOL)animated{ 18.

19. [super viewWillAppear:animated]; 20. //通过设置参数即可改变不同的状态; 21. [UIView animateWithDuration:2 delay:0.5 usingSpringWithDamping:0.2 initialSpringVelocity:0 options:UIViewAnimationOptionTransitionNone animations:^{ 22.

23. self.greenSquare.frame = CGRectMake(250, self.greenSquare.frame.origin.y, self.greenSquare.frame.size.width, self.greenSquare.frame.size.height); 24. } completion:nil]; 25.

26. [UIView animateWithDuration:2 delay:0.5 usingSpringWithDamping:0.2 initialSpringVelocity:1 options:UIViewAnimationOptionTransitionNone animations:^{ 27.

28. self.redSquare.frame = CGRectMake(250, self.redSquare.frame.origin.y, self.redSquare.frame.size.width, self.redSquare.frame.size.height); 29. } completion:nil]; 30. } 31.

32. @end

(9)图片旋转

在我们实际的需求中,我们可能需要让图片在移动旋转之前就处于左转90度、右转90度、旋转180度的状态,然后在此基础上再进行其他的动画。实现如下:

view source print ? 01.

import "ImageRotationViewController.h"

02.

03.

define kScreenWidth [[UIScreen mainScreen] bounds].size.width

04.

define kScreenHeight [[UIScreen mainScreen] bounds].size.height

05.

06. /** 07.

  • 在该示例中对UIImage进行旋转,注意不是对UIImageView旋转,这可以满足更多自定义的需求; 08. */ 09. @interface ImageRotationViewController () 10.

11. @end 12.

13. @implementation ImageRotationViewController 14.

15.

  • (void)viewDidLoad { 16.

17. [super viewDidLoad]; 18. /* 19. UIImageOrientationUp, // default orientation 20. UIImageOrientationDown, // 180 deg rotation 21. UIImageOrientationLeft, // 90 deg CCW 22. UIImageOrientationRight, // 90 deg CW 23. UIImageOrientationUpMirrored, // as above but image mirrored along other axis. horizontal flip 24. UIImageOrientationDownMirrored, // horizontal flip 25. UIImageOrientationLeftMirrored, // vertical flip 26. UIImageOrientationRightMirrored, // vertical flip 27. / 28. UIImageView imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, kScreenHeight / 2, 80, kScreenWidth)]; 29. UIImage image = [UIImage imageNamed:@"1"]; 30. /** 31.

  • 以下方法让一张图片一开始就处于旋转状态,而不是正放的状态;注意是对UIImage的操作,而不是对UIimageView控件的操作;最后再把image放入控件即可。 32. / 33. UIImage imageRotate = [UIImage imageWithCGImage:image.CGImage scale:1 orientation:UIImageOrientationLeft]; 34. [imageView setImage:imageRotate]; 35. [self.view addSubview:imageView]; 36. [UIView animateWithDuration:2 animations:^{ 37. imageView.transform = CGAffineTransformRotate(imageView.transform, M_PI_2); 38. imageView.frame = CGRectMake(0, 64, kScreenWidth, 80); 39. }]; 40. } 41.

42. @end

这里实现的动画都是非常的简单,大家可以通过下载代码自己尝试一下。后续我会给大家讲解更为高级炫酷的动画。尽请期待。

收藏
0
sina weixin mail 回到顶部