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

CALayer 花瓣飘落 转场动画-CATransation 动画组 UIView动画封装

2015-12-22 00:00 429 查看
摘要: 逐帧动画

#import "ViewController.h"
#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height
#define LayerWidth 50
@interface ViewController (){
CALayer *layer;
}

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
layer = [[CALayer alloc]init];
//设置宽高
layer.bounds = CGRectMake(0,0, LayerWidth, LayerWidth);
//设置中心点位置
layer.position = CGPointMake(WIDTH/2.0, HEIGHT/2.0);
layer.backgroundColor = [UIColor colorWithRed:0 green:146/255.0 blue:1.0 alpha:1].CGColor;
[self.view.layer addSublayer:layer];
//设置圆角
layer.cornerRadius = LayerWidth/2;
//设置阴影
layer.shadowColor = [UIColor grayColor].CGColor;
layer.shadowOffset = CGSizeMake(2, 2);
layer.shadowOpacity = 0.9;//透明度(0-1)
//锚点(x,y 范围都是0-1)
layer.anchorPoint = CGPointMake(1, 1);
NSLog(@"%@",layer);
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
//获取点击位置
UITouch *touch = [touches anyObject];
NSLog(@"点击的位置是:%@",NSStringFromCGPoint([touch locationInView:self.view]));
//获取Layer
NSLog(@"%@",self.view.layer.sublayers);
layer.position =[touch locationInView:self.view];
//放大
CGFloat width = layer.bounds.size.width;
if(width == LayerWidth){
width = LayerWidth *4;
}
else{
width = LayerWidth;

}
layer.bounds = CGRectMake(0, 0, width, width);
layer.cornerRadius =width/2;//圆角是更具当前圆形宽度来设置
}
@end

//花瓣飘落

//
// ViewController.m
// 花瓣飘落
//
// Created by DC020 on 15/12/22.
// Copyright (c) 2015年 Bill. All rights reserved.
//

#import "ViewController.h"

@interface ViewController (){
CALayer *_layer;//创建一个图层
}

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
//设置背景
UIImage *backgroundImage = [UIImage imageNamed:@"background"];
self.view.backgroundColor = [UIColor colorWithPatternImage:backgroundImage];
//自定义一个图层(花瓣)
_layer = [[CALayer alloc]init];
_layer.bounds = CGRectMake(0, 0, 16, 30);
_layer.position = CGPointMake(50, 200);
_layer.contents = (id)[UIImage imageNamed:@"petal"].CGImage;
[self.view.layer addSublayer:_layer];
//执行动画
[self keyFrameAnimation];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark 关键帧动画
-(void)keyFrameAnimation{
//1.创建关键帧动画
CAKeyframeAnimation *keyframeAni = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//2.设置关键帧
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, _layer.position.x, _layer.position.y);//路径移动到起点
CGPathAddCurveToPoint(path, NULL, 160, 280, -30, 300, 50, 400);//绘制两次贝塞尔曲线

keyframeAni.path = path;//设置动画沿着路径进行

// NSValue *key1 = [NSValue valueWithCGPoint:_layer.position];
// //对于关键帧动画,初始值不能省略
// NSValue *key2 = [NSValue valueWithCGPoint:CGPointMake(80, 250)];
// NSValue *key3 = [NSValue valueWithCGPoint:CGPointMake(20, 320)];
// NSValue *key4 = [NSValue valueWithCGPoint:CGPointMake(100, 410)];
// keyframeAni.values = @[key1,key2,key3,key4];
//设置一些其他的属性
keyframeAni.duration = 3.0;
keyframeAni.beginTime = CACurrentMediaTime() + 2;//设置延迟两秒钟执行
keyframeAni.autoreverses = YES;//从终点返回起点
keyframeAni.repeatCount = HUGE_VALF;
//添加到动画图层
[_layer addAnimation:keyframeAni forKey:@"keyFrameAnimation"];
}

//-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
// UITouch *touch = [touches anyObject];
// CGPoint location = [touch locationInView:self.view];
// //1.创建动画并制定动画属性
// CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
// //2.设置动画属性初始值和结束值
// //初始值可以不设置,默认图层初始位置
// basicAnimation.toValue = [NSValue valueWithCGPoint:location];
//
// //3.设置其他动画属性
// basicAnimation.duration = 1.0;//动画时间
// basicAnimation.repeatCount = 1;//循环次数
// basicAnimation.delegate = self;
// //记录鼠标点击位置,在动画结束后使用
// [basicAnimation setValue:[NSValue valueWithCGPoint:location] forKey:@"animationLocation"];
//
//
// //4.添加动画.注意key相当于给动画命名,以后可以使用此名称获取该动画
// [_layer addAnimation:basicAnimation forKey:@"basicAnimation"];
//}
//#pragma mark 动画代理方法
//#pragma mark 动画结束的时候会触发
//-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
// //开启动画事务
// [CATransaction begin];
// //禁用隐式动画
// [CATransaction setDisableActions:YES];
// _layer.position = [[anim valueForKey:@"animationLocation"] CGPointValue];
// //递交动画事务
// [CATransaction commit];
//}
@end

//转场动画-CATransation

//
// ViewController.m
// 转场动画-CATransation
//
// Created by DC020 on 15/12/22.
// Copyright (c) 2015年 Bill. All rights reserved.
//

#import "ViewController.h"
#define IMAGE_COUNT 9//图片数量

@interface ViewController (){
UIImageView *_imageView;
int _current;
}

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
_current = 0;
//定义一个图片控件
_imageView = [[UIImageView alloc]initWithFrame:[[UIScreen mainScreen]bounds]];
_imageView.contentMode = UIViewContentModeScaleAspectFill;
_imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",_current]];
[self.view addSubview:_imageView];
//添加手势
UISwipeGestureRecognizer *leftSwipeGesture = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwipe:)];
leftSwipeGesture.direction = UISwipeGestureRecognizerDirectionLeft;//设置手势方向
[self.view addGestureRecognizer:leftSwipeGesture];

UISwipeGestureRecognizer *rightSwipeGesture = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rightSwipe:)];
rightSwipeGesture.direction = UISwipeGestureRecognizerDirectionRight;
[self.view addGestureRecognizer:rightSwipeGesture];

}
-(void)leftSwipe:(UISwipeGestureRecognizer *)gesture{
[self transitionAnimation:YES];//YES表示下一张图片
}
-(void)rightSwipe:(UISwipeGestureRecognizer *)gesture{
[self transitionAnimation:NO];//NO表示上一张图片
}
#pragma mark 转场动画
-(void)transitionAnimation:(BOOL)isNext{
//1.创建动画对象
CATransition *transition = [[CATransition alloc]init];
//2.设置对话类型,对于苹果官方没有公开的动画类型只能使用字符串
//cube 立方体翻转效果
//oglFlip 翻转效果
//suckEffect 收缩效果
//rippleEffect 水滴波纹效果
//pageCurl 向上翻页效果
//pageUnCurl 向下翻页效果
//cameraIrisHollowOpen 摄像头打开效果
//cameraIrisHollowClose 摄像头关闭效果
transition.type = @"cameraIrisHollowOpen";
//设置子类型
if (isNext) {
transition.subtype = kCATransitionFromRight;
}
else{
transition.subtype = kCATransitionFromLeft;
}
//设置动画时间
transition.duration = 1.0;
//设置转场后的新视图
if(isNext){
_current = (_current + 1) %IMAGE_COUNT;
}
else{
_current = (_current - 1 + IMAGE_COUNT) %IMAGE_COUNT;
}
_imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",_current]];
//添加动画
[_imageView.layer addAnimation:transition forKey:@"TC"];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

//动画组

//
// ViewController.m
// 动画组
//
// Created by DC020 on 15/12/22.
// Copyright (c) 2015年 Bill. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
//初始化一个图层
CALayer *_layer = [[CALayer alloc]init];
_layer.frame = CGRectMake(20, 20, 40, 40);
_layer.backgroundColor = [UIColor greenColor].CGColor;
[self.view.layer addSublayer:_layer];
//移动位置的动画:keyPath ==> position;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(315, 607)];
//对layer放大
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:3.0];

//以z轴进行旋转
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotateAnimation.fromValue = [NSNumber numberWithFloat:0];
rotateAnimation.toValue = [NSNumber numberWithFloat:6*M_PI];//旋转3周
//把上面的动画组合起来
CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];//动画组初始化
groupAnimation.autoreverses = YES;
groupAnimation.duration = 3.0;
groupAnimation.repeatCount = HUGE_VALF;
groupAnimation.animations = @[animation,scaleAnimation,rotateAnimation];
[_layer addAnimation:groupAnimation forKey:@"layerMove"];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

//逐帧动画

//
// ViewController.m
// 逐帧动画
//
// Created by DC020 on 15/12/22.
// Copyright (c) 2015年 Bill. All rights reserved.
//

#import "ViewController.h"

@interface ViewController (){
NSMutableArray *_muArray;//存放动画的所有
UIImageView *_imageView;
UIImage *_image;

CALayer *_layer;
int current;
}

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
current = 0;
_muArray = [NSMutableArray array];
// _imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 375, 375)];
// [self.view addSubview:_imageView];
//创建图层
_layer = [[CALayer alloc]init];
_layer.frame = CGRectMake(0, 20, 298, 275);
[self.view.layer addSublayer:_layer];

//加载所有图片
for(int i = 1;i <= 87;i++){
_image = [UIImage imageNamed:[NSString stringWithFormat:@"dazhao_%d",i]];
[_muArray addObject:_image];
}

//定义时钟对象
CADisplayLink *displayLink =[CADisplayLink displayLinkWithTarget:self selector:@selector(step)];
//添加时钟对象到主运行循环
[displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

// //设置动画
// _imageView.animationImages = _muArray;//动画数组(包括所有动画图片)
// _imageView.animationDuration = 0.01*[_muArray count];//1秒显示10张
// _imageView.animationRepeatCount = HUGE_VALF;//重复无限次
// [_imageView startAnimating];//开始动画
}
static int s = 0;
-(void)step{
s++;
if (s %1 == 0) {
UIImage *image = _muArray[current];
_layer.contents = (id)image.CGImage;//更新图片
current = (current +1)%87;
}
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

////
// ViewController.m
// UIView动画封装-弹簧
//
// Created by DC020 on 15/12/22.
// Copyright (c) 2015年 Bill. All rights reserved.
//

#import "ViewController.h"

@interface ViewController (){
UIImageView *_imageView;
}

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
//创建图像
_imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"ball"]];
_imageView.center = CGPointMake(375/2.0, 667/2.0);
[self.view addSubview:_imageView];
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
CGPoint location = [touch locationInView:self.view];
//创建弹性动画
//阻尼:范围0-1,越接近0,弹性效果越明显
//velocity:弹性复原速度
[UIView animateWithDuration:5.0 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:100 options:UIViewAnimationOptionCurveLinear animations:^{
_imageView.center = location;//最终小球位置
} completion:nil];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: