节选自:http://www.cnblogs.com/lee0oo0/p/4225730.html
设定动画的属性。以下是属性及其对应的说明：
C221A1BE-B020-41BF-B75F-4324E1A0011E.png
animation.duration = 2.5; // 动画持续时间
animation.repeatCount = 1; // 不重复
animation.beginTime = CACurrentMediaTime() + 2; // 2秒后执行
animation.autoreverses = YES; // 结束后执行逆动画
// 动画先加速后减速
animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
设定动画开始和结束帧时的状态。设定的值会变为KeyPath所指定的属性的值。
3F3702E4-5460-4680-B21F-FA95056C96DE.png
// 指定position属性（移动）
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
// 设定动画起始帧和结束帧
animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)]; // 起始点
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // 终了点
-
缩放动画(不停止)
@property (weak, nonatomic) IBOutlet UIView *redView;
@property (weak, nonatomic) IBOutlet UIImageView *imageV;
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// 创建动画
CABasicAnimation *anim = [CABasicAnimation animation];// 描述下修改哪个属性产生动画 // anim.keyPath = @"position"; // 只能是layer属性 anim.keyPath = @"transform.scale"; // 设置值 // anim.toValue = [NSValue valueWithCGPoint:CGPointMake(250, 500)]; anim.toValue = @0.5; // 设置动画执行次数 anim.repeatCount = MAXFLOAT; // 取消动画反弹 // 设置动画完成的时候不要移除动画 anim.removedOnCompletion = NO; // 设置动画执行完成要保持最新的效果 anim.fillMode = kCAFillModeForwards; [_imageV.layer addAnimation:anim forKey:nil]; }
-
手指画一条线,让view随着这条线走
@interface DrawView ()@property (nonatomic, strong) UIBezierPath *path; @end @implementation DrawView - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { // touch UITouch *touch = [touches anyObject]; // 获取手指的触摸点 CGPoint curP = [touch locationInView:self]; // 创建路径 UIBezierPath *path = [UIBezierPath bezierPath]; _path = path; // 设置起点 [path moveToPoint:curP]; } - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { // touch UITouch *touch = [touches anyObject]; // 获取手指的触摸点 CGPoint curP = [touch locationInView:self]; [_path addLineToPoint:curP]; [self setNeedsDisplay]; } - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { // 给imageView添加核心动画 // 添加核心动画 CAKeyframeAnimation *anim = [CAKeyframeAnimation animation]; anim.keyPath = @"position"; // anim.values = @[@(angle2Radion(-10)),@(angle2Radion(10)),@(angle2Radion(-10))]; anim.path = _path.CGPath; anim.duration = 1; anim.repeatCount = 1; //给这个view的图层加一个动画 [[[self.subviews firstObject] layer] addAnimation:anim forKey:nil]; } - (void)drawRect:(CGRect)rect { //根据_path画一条线 [_path stroke]; } @end
-
转场动画
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;@end @implementation ViewController static int i = 1; - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { // 转场代码 if (i == 4) { i = 1; } // 加载图片名称 NSString *imageN = [NSString stringWithFormat:@"%d",i++]; _imageView.image = [UIImage imageNamed:imageN]; // 转场动画 CATransition *anim = [CATransition animation]; anim.type = @"pageCurl"; anim.duration = 0.5; [_imageView.layer addAnimation:anim forKey:nil]; } @end
-
动画组
@property (weak, nonatomic) IBOutlet UIView *redView;
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// 同时缩放，平移，旋转
CAAnimationGroup *group = [CAAnimationGroup animation];CABasicAnimation *scale = [CABasicAnimation animation]; scale.keyPath = @"transform.scale"; scale.toValue = @0.5; CABasicAnimation *rotation = [CABasicAnimation animation]; rotation.keyPath = @"transform.rotation"; rotation.toValue = @(arc4random_uniform(M_PI)); CABasicAnimation *position = [CABasicAnimation animation]; position.keyPath = @"position"; position.toValue = [NSValue valueWithCGPoint:CGPointMake(arc4random_uniform(200), arc4random_uniform(200))]; group.animations = @[scale,rotation,position]; [_redView.layer addAnimation:group forKey:nil]; }
- 折叠(根据x旋转)动画
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *topView;
@property (weak, nonatomic) IBOutlet UIImageView *bottomView;
// 添加手势的View
@property (weak, nonatomic) IBOutlet UIView *dragView;
@property (nonatomic, weak) CAGradientLayer *gradientL;
@end
@implementation ViewController
// 一张图片必须要通过两个控件展示，旋转的时候，只旋转上部分控件
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 通过设置contentsRect可以设置图片显示的尺寸，取值0~1
//topView和bottomView的frame一样 通过设置铆点anchorPoint来调整
_topView.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
_topView.layer.anchorPoint = CGPointMake(0.5, 1);
_bottomView.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
_bottomView.layer.anchorPoint = CGPointMake(0.5, 0);
// 添加手势
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[_dragView addGestureRecognizer:pan];
// 渐变图层
CAGradientLayer *gradientL = [CAGradientLayer layer];
// 注意图层需要设置尺寸
gradientL.frame = _bottomView.bounds;
gradientL.opacity = 0;
gradientL.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];
_gradientL = gradientL;
[_bottomView.layer addSublayer:gradientL];
}
// 拖动的时候旋转上部分内容，200(垂直(Y)偏移量) M_PI(旋转180度)
- (void)pan:(UIPanGestureRecognizer *)pan
{
// 获取偏移量
CGPoint transP = [pan translationInView:_dragView];
NSLog(@"%@", NSStringFromCGPoint(transP));
// 旋转角度,往下逆时针旋转
CGFloat angle = -transP.y / 200.0 * M_PI;
CATransform3D transfrom = CATransform3DIdentity;
// 增加旋转的立体感，近大远小,d：距离图层的距离
transfrom.m34 = -1 / 500.0;
transfrom = CATransform3DRotate(transfrom, angle, 1, 0, 0);
_topView.layer.transform = transfrom;
// 设置阴影效果
_gradientL.opacity = transP.y * 1 / 200.0;
if (pan.state == UIGestureRecognizerStateEnded) { // 反弹
/**
* 弹簧效果的动画
* usingSpringWithDamping 参数: usingSpringWithDamping的范围为0.0f到1.0f，数值越小「弹簧」的振动效果越明显。
* initialSpringVelocity 参数: initialSpringVelocity则表示初始的速度，数值越大一开始移动越快。
* http://www.renfei.org/blog/ios-8-spring-animation.html
*/
[UIView animateWithDuration:0.6 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseInOut animations:^{
_topView.layer.transform = CATransform3DIdentity;
} completion:^(BOOL finished) {
}];
}
}
@end
- 音量震动
E9E73E8C-2511-4656-94FC-9D9179D452B4.png
F8B483F8-D235-4CD6-A220-1BFBEF203356.png
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *lightView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// CAReplicatorLayer复制图层，可以把图层里面所有子层复制
// 创建复制图层
CAReplicatorLayer *repL = [CAReplicatorLayer layer];
repL.frame = _lightView.bounds;
[_lightView.layer addSublayer:repL];
//设置一个layer震动条
CALayer *layer = [CALayer layer];
layer.anchorPoint = CGPointMake(0.5, 1);
layer.position = CGPointMake(15, _lightView.bounds.size.height);
layer.bounds = CGRectMake(0, 0, 30, 150);
layer.backgroundColor = [UIColor whiteColor].CGColor;
[repL addSublayer:layer];
//设置图层的动画
CABasicAnimation *anim = [CABasicAnimation animation];
anim.keyPath = @"transform.scale.y";
anim.toValue = @0.1;
anim.duration = 0.5;
anim.repeatCount = MAXFLOAT;
// 设置动画反转 动画结束时是否执行逆动画
anim.autoreverses = YES;
[layer addAnimation:anim forKey:nil];
// 复制层中子层总数
// instanceCount：表示复制层里面有多少个子层，包括原始层
repL.instanceCount = 3;
// 设置复制子层偏移量，不包括原始层,相对于原始层x偏移
repL.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
// 设置复制层动画延迟时间
repL.instanceDelay = 0.1;
// 如果设置了原始层背景色，就不需要设置这个属性
repL.instanceColor = [UIColor redColor].CGColor;
// 颜色值递减
repL.instanceRedOffset = -0.3;
}
@end
- 菊花
45593372-4178-4EB6-925C-04765F9387AE.png
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *redView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
CAReplicatorLayer *repL = [CAReplicatorLayer layer];
repL.frame = _redView.bounds;
[_redView.layer addSublayer:repL];
CALayer *layer = [CALayer layer];
layer.transform = CATransform3DMakeScale(0, 0, 0);
layer.position = CGPointMake(_redView.bounds.size.width / 2, 20);
layer.bounds = CGRectMake(0, 0, 10, 10);
layer.cornerRadius = 10.0;
layer.masksToBounds = YES;
layer.backgroundColor = [UIColor purpleColor].CGColor;
[repL addSublayer:layer];
// 设置缩放动画
CABasicAnimation *anim = [CABasicAnimation animation];
anim.keyPath = @"transform.scale";
anim.fromValue = @1;
anim.toValue = @0;
anim.repeatCount = MAXFLOAT;
CGFloat duration = 1;
anim.duration = duration;
[layer addAnimation:anim forKey:nil];
int count = 30;
CGFloat angle = M_PI * 2 / count;
// 设置子层总数
repL.instanceCount = count;
repL.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
repL.instanceDelay = duration / count;
}
@end
网友评论