您的位置:首页 > 产品设计 > UI/UE

UI_动画

2015-10-07 15:05 351 查看


RootViewController.m
#import "RootViewController.h"
@interface RootViewController ()
@property(nonatomic, retain) UIImageView *imageView;

@end

@implementation RootViewController

- (void)dealloc
{
[_imageView release];
[super dealloc];
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor whiteColor];

self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 200, 100, 100)];
self.imageView.image = [UIImage imageNamed:@"soldier.jpg"];
[self.view addSubview:self.imageView];
[_imageView release];

UIButton *viewButton = [UIButton buttonWithType:UIButtonTypeSystem];
viewButton.frame = CGRectMake(100, 500, 150, 50);
[viewButton setTitle:@"UIView动画" forState:UIControlStateNormal];
[self.view addSubview:viewButton];
viewButton.layer.borderWidth = 1;
[viewButton release];
[viewButton addTarget:self action:@selector(viewAction:) forControlEvents:UIControlEventTouchUpInside];

UIButton *transformButton = [UIButton buttonWithType:UIButtonTypeSystem];
transformButton.frame = CGRectMake(100, 450, 150, 50);
[transformButton setTitle:@"transform动画" forState:UIControlStateNormal];
[self.view addSubview:transformButton];
transformButton.layer.borderWidth = 1;
[transformButton release];
[transformButton addTarget:self action:@selector(transformAction:) forControlEvents:UIControlEventTouchUpInside];

UIButton *layerButton = [UIButton buttonWithType:UIButtonTypeSystem];
layerButton.frame = CGRectMake(100, 400, 150, 50);
[layerButton setTitle:@"layer动画" forState:UIControlStateNormal];
[self.view addSubview:layerButton];
layerButton.layer.borderWidth = 1;
[layerButton release];
[layerButton addTarget:self action:@selector(layerAction:) forControlEvents:UIControlEventTouchUpInside];

// 让tableView横着滚.
UITableView *table = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
table.backgroundColor = [UIColor greenColor];
[self.view addSubview:table];
[table release];
table.transform = CGAffineTransformRotate(table.transform, M_PI_2);

}

// UIView动画
- (void)viewAction:(UIButton *)button {
// UIView的动画第一种,将图片放大.
// Duration动画的运行时间.
[UIView animateWithDuration:5 animations:^{
// 动画部分都写在block里.
self.imageView.frame = CGRectMake(0, 0, 300, 300);
self.imageView.alpha = 0;
}];

// UIView动画第二种.
[UIView animateWithDuration:5 animations:^{
// 所需动画部分.
self.imageView.frame = CGRectMake(0, 0, 300, 300);
self.imageView.alpha = 0;
} completion:^(BOOL finished) {
NSLog(@"动画内容结束");
[UIView animateWithDuration:5 animations:^{
self.imageView.frame = CGRectMake(100, 100, 200, 200);
self.imageView.alpha = 1;
}];
}];
}

// UIView动画第三种.
// delay:动画延时
NSLog(@"%ld", UIViewAnimationOptionRepeat);
NSLog(@"%ld", UIViewAnimationOptionAutoreverse);
NSLog(@"%ld", UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse);
[UIView animateWithDuration:5 delay:0 options:UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse animations:^{
self.imageView.frame = CGRectMake(0, 0, 300, 300);
self.imageView.alpha = 0;
} completion:^(BOOL finished) {

}];

// UIView动画第四种.
// usingSpringWithDamping:控制颤抖的频率,越小频率越快.
// initialSpringVelocity:控制动画弹出的初速度.
[UIView animateWithDuration:3 delay:0 usingSpringWithDamping:0.01 initialSpringVelocity:50 options:UIViewAnimationOptionAllowUserInteraction animations:^{
self.imageView.frame = CGRectMake(100, 100, 300, 300);

} completion:^(BOOL finished) {

}];
}

// 通过transform对视图的样式进行修改.
- (void)transformAction:(UIButton *)button {
// 通过transform, 使视图进行旋转,缩小等操作
// M_PI_2 每次旋转90°.
self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, M_PI_2);

// 控制缩放.
self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 0.9, 0.9);

// 控制偏移量
self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 10, -20);
}

- (void)layerAction:(UIButton *)button {
// layer主要是控制视图的显示内容,比如样式,内容都是layer来呈现,UIView的动画也是基于layer
// layer的第一种动画,旋转
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
// 设置起始的角度.
basicAnimation.fromValue = [NSNumber numberWithFloat:0.0];
// 设置旋转的角度.
basicAnimation.toValue = [NSNumber numberWithFloat:2 * M_PI];
// 设置动画的时长.
basicAnimation.duration = 3;
// 设置动画的播放次数.
// NSIntegerMax整数的最大值.
basicAnimation.repeatCount = NSIntegerMax;
// 把动画添加到图片的layer上.
[self.imageView.layer addAnimation:basicAnimation forKey:@"basicAnimation"];
// 设置是否回到原位.
basicAnimation.autoreverses = YES;

// layer的第二种动画.
CATransition *transiton = [CATransition animation];
// 设置动画的样式(水波纹).
transiton.type = @"rippleEffect";
// 设置动画时间和重复次数.
transiton.repeatCount = NSIntegerMax;
transiton.duration = 5;
// 把动画添加到layer上
[self.imageView.layer addAnimation:transiton forKey:@"transiton"];

CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
// 设置动画的时长.
basicAnimation.duration = 1;
// 动画重复次数.
basicAnimation.repeatCount = NSIntegerMax;
// 设置起始值.
basicAnimation.fromValue = [NSNumber numberWithFloat:0];
basicAnimation.toValue = [NSNumber numberWithFloat:5];
[self.imageView.layer addAnimation:basicAnimation forKey:@"basicAnimation"];

// CABasicAnimation动画就是在修改视图的transform属性,从而达到动画的效果.

// 关键帧动画.
// 通过一帧一帧的点或者角度,完成这个动画效果的设置.
CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"position"];
// 创建一个路径,用来记录移动的每一帧(坐标)
CGMutablePathRef path = CGPathCreateMutable();
// 指定移动的起始位置,为了移动图片,所以图片的中心位置就是起点

/**
*  Description
*
*  @param path#> 用来记录的路径 description#>
*  @param m#>    备用的参数,用不上, NULL description#>
*  @param x#>    中心坐标x description#>
*  @param y#>    中心坐标y description#>
*
*  @return <#return value description#>
*/
CGPathMoveToPoint(path, NULL, self.imageView.center.x, self.imageView.center.y);
// 再设置其它经过的点
CGPathMoveToPoint(path, NULL, 100, 100);
CGPathMoveToPoint(path, NULL, 10, 10);
CGPathMoveToPoint(path, NULL, 20, 100);
CGPathMoveToPoint(path, NULL, 140, 200);
CGPathMoveToPoint(path, NULL, 170, 190);
// 设置曲线路径
CGPathAddCurveToPoint(path, NULL, 200, 200, 100, 120, 40, 60);
CGPathAddCurveToPoint(path, NULL, 80, 10, 20, 100, 300, 100);
CGPathAddCurveToPoint(path, NULL, 10, 60, 200, 180, 30, 100);
CGPathAddCurveToPoint(path, NULL, 50, 90, 110, 10, self.imageView.center.x, self.imageView.center.y);
// 将这个路径添加到动画对象中.
keyframe.path = path;
// 设置时间和重复次数.
keyframe.repeatCount = NSIntegerMax;
keyframe.duration = 10;
// 动画添加到layer上.
[self.imageView.layer addAnimation:keyframe forKey:@"1"];
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: