当你的才华撑不起你的野心时，你就应该静下来学习。 —— CJJ
- 这一篇将会讲解CoreAnimation中五种类型动画的基本使用方法，每一种类型都会用一种我们常用的动画来做例子，代码已贴上来，可以直接复制使用。
- 文尾有demo链接，想要学习一下的小伙伴可以下载看看，帮到你的话点个star吧😄
- 话不多说，直接上图上代码
CoreAnimation核心动画
————— 接下来用一个UIImageView来演示核心动画的五种动画效果 —————
五种动画类型的调用
为了使结构清晰，我创建了一个动画抽象类CJJCoreAnimation
.h文件
typedef NS_ENUM(NSInteger , CJJAnimationType)
{
CJJAnimationType_Basic = 101,
CJJAnimationType_Key,
CJJAnimationType_Spring,
CJJAnimationType_Transition,
CJJAnimationType_Group
};
@interface CJJCoreAnimation : NSObject
+ (instancetype)initAnimation;
- (void)addAnimationForView:(UIView *)view;
@end
NS_ASSUME_NONNULL_END
.m文件
#import "CJJCoreAnimation.h"
@implementation
+ (instancetype)initAnimation
{
return [[self alloc] init];
}
- (void)addAnimationForView:(UIView *)view
{
}
@end
五种动画类
继承
枚举调用
#pragma mark - action
- (void)animationClick:(UIButton *)btn{
switch (_type) {
case CJJAnimationType_Basic:
[self testCABasicAnimation];
break;
case CJJAnimationType_Key:
[self testCAKeyframeAnimation];
break;
case CJJAnimationType_Spring:
[self testCASpringAnimation];
break;
case CJJAnimationType_Transition:
[self testCATransition];
break;
case CJJAnimationType_Group:
[self testCAAnimationGroup];
break;
}
}
#pragma mark - test CoreAnimation
- (void)testCABasicAnimation
{
CJJCABasicAnimation *basicAnimation = [CJJCABasicAnimation initAnimation];
[basicAnimation addAnimationForView:self.animationImg];
}
- (void)testCAKeyframeAnimation
{
CJJCAKeyframeAnimation *keyAnimation = [CJJCAKeyframeAnimation initAnimation];
[keyAnimation addAnimationForView:self.animationImg];
}
- (void)testCASpringAnimation
{
CJJCASpringAnimation *springAnimation = [CJJCASpringAnimation initAnimation];
[springAnimation addAnimationForView:self.animationImg];
}
- (void)testCATransition
{
CJJCATransition *tranAnimation = [CJJCATransition initAnimation];
[tranAnimation addAnimationForView:self.navigationController.view];
CATransitionVC *v1 = [CATransitionVC new];
[self.navigationController pushViewController:v1 animated:YES];
}
- (void)testCAAnimationGroup
{
CJJCAAnimationGroup *groupsAnimation = [CJJCAAnimationGroup initAnimation];
[groupsAnimation addAnimationForView:self.animationImg];
}
-
1.基础动画： CABasicAnimation
自转效果
/** 调用方法(重写)*/
- (void)addAnimationForView:(UIView *)view
{
NSLog(@"测试基本动画");
// [self positionWithView:view];
[self transform_rotation_zWithView:view];
}
/** 实现自转动画*/
- (void)transform_rotation_zWithView:(UIView *)view
{
CABasicAnimation *transfrom_rotation_z = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
//默认是顺时针效果，若把fromValue和toValue的值互换，则为逆时针效果
transfrom_rotation_z.fromValue = [NSNumber numberWithFloat:0.f];
transfrom_rotation_z.toValue = [NSNumber numberWithFloat:M_PI * 2];
transfrom_rotation_z.duration = 0.8;
transfrom_rotation_z.autoreverses = NO;
transfrom_rotation_z.fillMode = kCAFillModeForwards;
transfrom_rotation_z.repeatCount = MAXFLOAT;
//以上缩放是以view的中心点为中心缩放的，如果需要自定义缩放点，可以设置卯点：
// //中心点
// [view.layer setAnchorPoint:CGPointMake(0.5, 0.5)];
// //左上角
// [view.layer setAnchorPoint:CGPointMake(0, 0)];
//右下角
[view.layer setAnchorPoint:CGPointMake(1, 1)];
//如果这里想设置成一直自旋转，可以设置为MAXFLOAT，否则设置具体的数值则代表执行多少次
[view.layer addAnimation:transfrom_rotation_z forKey:nil];
}
-
2.关键帧动画： CAKeyframeAnimation
弹窗效果
- (void)addAnimationForView:(UIView *)view
{
NSLog(@"测试关键帧动画");
[self animationAlert:view];
}
//弹窗效果
- (void)animationAlert:(UIView *)view
{
CAKeyframeAnimation *popAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
popAnimation.duration = 0.6;
popAnimation.values = @[[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.01f, 0.01f, 1.0f)],
[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1f, 1.1f, 1.0f)],
[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9f, 0.9f, 1.0f)],
[NSValue valueWithCATransform3D:CATransform3DIdentity]];
popAnimation.keyTimes = @[@0.0f, @0.5f, @0.75f, @1.0f];
popAnimation.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[view.layer addAnimation:popAnimation forKey:nil];
}
-
3.弹性动画： CASpringAnimation
下落弹簧效果
- (void)addAnimationForView:(UIView *)view
{
NSLog(@"测试弹簧动画");
CASpringAnimation *springAnimation = [CASpringAnimation animationWithKeyPath:@"position.y"];
springAnimation.mass = 1;
springAnimation.stiffness = 100;
springAnimation.damping = 1;
springAnimation.initialVelocity = 0;
springAnimation.duration = springAnimation.settlingDuration;
springAnimation.fromValue = @(view.center.y);
springAnimation.toValue = @(view.center.y + 150);
springAnimation.fillMode = kCAFillModeForwards;
[view.layer addAnimation:springAnimation forKey:nil];
}
-
4.转场动画: CATransition
翻转跳转页面效果
- (void)addAnimationForView:(UIView *)view
{
NSLog(@"测试转场动画");
CATransition *transitionAnimation = [CATransition animation];
transitionAnimation.duration = 0.5;
transitionAnimation.type = @"oglFlip";
[view.layer addAnimation:transitionAnimation forKey:nil];
}
-
5.动画组合： CAAnimationGroup
组合动画效果
- (void)addAnimationForView:(UIView *)view
{
NSLog(@"测试动画组");
[self animationAroundWithView:view];
}
//中心向四周扩散动画
- (void)animationAroundWithView:(UIView *)view
{
CGFloat width = view.frame.size.width;
CGFloat height = view.frame.size.height;
CALayer *animationLayer = [CALayer layer];
animationLayer.frame = CGRectMake(width * 0.3, height * 0.3, width * 0.4, height * 0.4);
NSInteger count = 5;
double duration = 5;
for (int i = 0; i < count; i++) {
//动画1:放缩
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
basicAnimation.fromValue = @0.5;
basicAnimation.toValue = @3.0;
//动画2:帧动画
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
keyAnimation.values = @[@1,@0.9,@0.8,@0.7,@0.6,@0.5,@0.4,@0.3,@0.2,@0.1,@0.0];
keyAnimation.keyTimes = @[@0,@0.1,@0.2,@0.3,@0.4,@0.5,@0.6,@0.7,@0.8,@0.9,@1.0];
CAMediaTimingFunction *defaultCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
//初始化一个动画组
CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
//设置相关属性
groupAnimation.fillMode = kCAFillModeForwards;
//设置动画开始时间
groupAnimation.beginTime = CACurrentMediaTime()+(double)i*duration/(double)count;
//设置动画持续时间
groupAnimation.duration = duration;
groupAnimation.repeatCount = HUGE_VAL;
groupAnimation.timingFunction = defaultCurve;
groupAnimation.removedOnCompletion = NO;
//添加刚刚已经准备好的两个动画
groupAnimation.animations = @[basicAnimation,keyAnimation];
//将动画组添加到layer中去
CALayer *layer = [CALayer layer];
layer.backgroundColor = [UIColor orangeColor].CGColor;
layer.frame = CGRectMake(0, 0, width * 0.4, height * 0.4);
layer.borderColor = [UIColor orangeColor].CGColor;
layer.borderWidth = 1.0f;
layer.cornerRadius = height * 0.2f;
layer.opacity = 0.0f;
[layer addAnimation:groupAnimation forKey:@"layer"];
[animationLayer addSublayer:layer];
}
[view.layer addSublayer:animationLayer];
//动画3:滚动
CABasicAnimation *transitionAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
transitionAnimation.fromValue = @0.5;
transitionAnimation.toValue = @3.0;
transitionAnimation.duration = 5;
//动画4:移动
CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
positionAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 450)];
positionAnimation.beginTime = 0;
positionAnimation.duration = 5;
positionAnimation.fillMode = kCAFillModeForwards;
positionAnimation.removedOnCompletion = NO;
//动画5:反向移动
CABasicAnimation *positionAnimation1 = [CABasicAnimation animationWithKeyPath:@"position"];
positionAnimation1.toValue = [NSValue valueWithCGPoint:CGPointMake(350, 150)];
positionAnimation1.duration = 5;
positionAnimation1.beginTime = 5;
positionAnimation1.fillMode = kCAFillModeForwards;
positionAnimation1.removedOnCompletion = NO;
//动画6:反向移动
CABasicAnimation *positionAnimation2 = [CABasicAnimation animationWithKeyPath:@"position"];
positionAnimation2.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 600)];
positionAnimation2.duration = 10;
positionAnimation2.beginTime = 10;
positionAnimation2.fillMode = kCAFillModeForwards;
positionAnimation2.removedOnCompletion = NO;
//合成以上6种动画效果
CAAnimationGroup *group = [CAAnimationGroup animation];
group.duration = 20.0;
group.fillMode = kCAFillModeForwards;
group.removedOnCompletion = NO;
group.animations = @[transitionAnimation,positionAnimation,positionAnimation1,positionAnimation2];
[view.layer addAnimation:group forKey:nil];
}
文尾献上Demo CJJCoreAnimationDemo
网友评论