一、Transform动画
1.利用Transform的CGAffineTransformTranslate，可实现上下左右的移动动画；
首先定义一个用于显示动画的transformImageView，如下：
@property(nonatomic,strong)UIImageView* transformImageView;
（1）实现向上的动画，每次向上移动50个像素点：
[UIView animateWithDuration:1.0 animations:^{
self.transformImageView.transform = CGAffineTransformTranslate(self.transformImageView.transform, 0, -50);
}];
（2）实现向下的动画，每次向下移动50个像素点：
[UIView animateWithDuration:1.0 animations:^{
self.transformImageView.transform = CGAffineTransformTranslate(self.transformImageView.transform, 0, 50);
}];
（3）实现向左的动画，每次向左移动50个像素点：
[UIView animateWithDuration:1.0 animations:^{
self.transformImageView.transform = CGAffineTransformTranslate(self.transformImageView.transform, -50, 0);
}];
（4）实现向右的动画，每次向右移动50个像素点：
[UIView animateWithDuration:1.0 animations:^{
self.transformImageView.transform = CGAffineTransformTranslate(self.transformImageView.transform, 50, 0);
}];
2.利用Transform的CGAffineTransformScale，可以实现放大和缩小的动画；
（1）实现放大的动画，每次放大的倍数为1.5:
[UIView animateWithDuration:1.0 animations:^{
self.transformImageView.transform = CGAffineTransformScale(self.transformImageView.transform, 1.5, 1.5);
}];
（2）实现缩小的动画，每次缩小的倍数为0.5:
[UIView animateWithDuration:1.0 animations:^{
self.transformImageView.transform = CGAffineTransformScale(self.transformImageView.transform, 0.5, 0.5);
}];
3.利用Transform的CGAffineTransformRotate，可以实现左右旋转动画。
（1）实现向左旋转M_PI_4的动画：
[UIView animateWithDuration:1.0 animations:^{
self.transformImageView.transform = CGAffineTransformRotate(self.transformImageView.transform, -M_PI_4);
}];
（2）实现向右旋转M_PI_4的动画：
[UIView animateWithDuration:1.0 animations:^{
self.transformImageView.transform = CGAffineTransformRotate(self.transformImageView.transform, M_PI_4);
}];
二、序列帧动画
一般项目中常见的动画有序列帧动画，比如著名的汤姆猫使用的就是这种类型的动画，下面介绍的是序列帧动画在项目中使用的场景。
它是主要通过使用UIImageView的animationImages，animationRepeatCount，animationDuration等属性来实现的：
首先定义一个用于显示汤姆猫的tomImageView，如下：
@property (weak, nonatomic) IBOutlet UIImageView *tomImageView;
/**
序列帧动画实现
@paramcount 总的图片张数
@paramname 图片名称
*/
- (void)runAnimationWithCount:(NSInteger)count name:(NSString*)name {
if (self.tomImageView.isAnimating) return;
NSMutableArray *imageArray = [NSMutableArray array];
for(NSIntegeri =0; i < count; i++) {
NSString*fileName = [NSStringstringWithFormat:@"%@_%02ld.jpg",name, i];
NSString*filePath = [[NSBundlemainBundle]pathForResource:fileNameofType:nil];
UIImage*image = [UIImageimageWithContentsOfFile:filePath];
// UIImage *image = [UIImage imageNamed:fileName];
[imageArrayaddObject:image];
}
self.tomImageView.animationImages= imageArray;
self.tomImageView.animationRepeatCount = 1;
self.tomImageView.animationDuration= imageArray.count*0.15;
[self.tomImageView startAnimating];
CGFloat delay = self.tomImageView.animationDuration + 1.5;
[self.tomImageViewperformSelector:@selector(setAnimationImages:)withObject:nilafterDelay:delay];
}
三、Lottie动画
可以使用Lottie这个第三方库实现动画。
（1）首先通过cocopoads导入这个类库，如下：
project ‘Animation.xcodeproj'
platform :ios, '9.0'
target ‘Animation’ do
pod 'lottie-ios'
end
（2）导入头文件，如下：
#import <Lottie/Lottie.h>
（3） LOTAnimationView的动画实现：
/**
LotAnimation的动画实现
@paramanimationName 动画名称
*/
- (void)runLotAnimationViewWithAnimationName:(NSString*)animationName {
if (self.isAnimating) return;
LOTAnimationView*animationView = [LOTAnimationViewanimationNamed:animationName];
animationView.contentMode = UIViewContentModeScaleAspectFill;
animationView.frame=CGRectMake(self.view.frame.size.width/2-150,100,300,200);
animationView.animationProgress=0;
[animationViewplay];
[self.viewaddSubview:animationView];
self.isAnimating = YES;
// 实现动画音效
[MusicPlayerHelper playAudioWithAudioName:@"like_normal_audio"];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[animationViewremoveFromSuperview];
self.isAnimating=NO;
});
}
四、核心动画
核心动画常见的主要有CABasicAnimation、CAKeyframeAnimation、CATransition等。下面分别对它们进行介绍。
（1）CABasicAnimation
@property (nonatomic, strong) CALayer * layer;
在viewDidLoad中实现如下方法
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
CALayer *layer = [CALayer layer];
layer.position = CGPointMake(100, 100);
layer.bounds = CGRectMake(0, 0, 100, 100);
layer.backgroundColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:layer];
self.layer = layer;
}
（a）CABasicAnimation的平移动画
/// 平移
- (void)animationWithTranslate {
// 1.创建动画对象
CABasicAnimation *anima = [CABasicAnimation animation];
// 2.设置动画对象
// keyPath决定了执行怎样的动画，调整哪个属性来执行动画
anima.keyPath = @"position";
// anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
// toValue : 最终变成什么值
// byValue : 增加多少值
anima.byValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
anima.duration = 2.0;
/**让图层保持动画执行完毕后的状态**/
// 动画执行完毕后不要删除动画
anima.removedOnCompletion = NO;
// 保持最新的状态
anima.fillMode = kCAFillModeForwards;
// 3.添加动画
[self.layer addAnimation:anima forKey:nil];
}
（b）CABasicAnimation的缩放动画
/// 缩放
- (void)animationWithScale {
// 1.创建动画对象
CABasicAnimation *anima = [CABasicAnimation animation];
// 2.设置动画对象
// keyPath决定了执行怎样的动画，调整哪个属性来执行动画
anima.keyPath = @"bounds";
// anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
anima.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
anima.duration = 2.0;
/**让图层保持动画执行完毕后的状态**/
// 动画执行完毕后不要删除动画
anima.removedOnCompletion = NO;
// 保持最新的状态
anima.fillMode = kCAFillModeForwards;
// 3.添加动画
[self.layer addAnimation:anima forKey:nil];
}
（c）CABasicAnimation的旋转动画
/// 旋转
- (void)animationWithRotate {
// 1.创建动画对象
CABasicAnimation *anima = [CABasicAnimation animation];
// 2.设置动画对象
// keyPath决定了执行怎样的动画，调整哪个属性来执行动画
anima.keyPath = @"transform";
// anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
anima.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, -1, 0)];
anima.duration = 2.0;
anima.removedOnCompletion = NO;
anima.fillMode = kCAFillModeForwards;
// 3.添加动画
[self.layer addAnimation:anima forKey:nil];
}
（d）CABasicAnimation的变换动画
/// 变换
- (void)animationWithTransform {
// 1.创建动画对象
CABasicAnimation *anima = [CABasicAnimation animation];
// 2.设置动画对象
// keyPath决定了执行怎样的动画，调整哪个属性来执行动画
// anima.keyPath = @"transform.rotation";
// anima.keyPath = @"transform.scale.x";
anima.keyPath = @"transform.translation.x";
anima.toValue = @(100);
// anima.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
anima.duration = 2.0;
anima.removedOnCompletion = NO;
anima.fillMode = kCAFillModeForwards;
// 3.添加动画
[self.layer addAnimation:anima forKey:nil];
}
（2）CAKeyframeAnimation
@property (weak, nonatomic) IBOutlet UIView *redView;
(a)CAKeyframeAnimation 的位置变换
- (void)animationWithMove {
// CABasicAnimation fromValue --> toValue
CAKeyframeAnimation *anima = [CAKeyframeAnimation animation];
anima.keyPath = @"position";
NSValue *v1 = [NSValue valueWithCGPoint:CGPointZero];
NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(100, 0)];
NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(100, 200)];
NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(0, 200)];
anima.values = @[v1, v2, v3, v4];
// anima.keyTimes = @[@(0.5), @(0.25), @(0.25)];
anima.duration = 2.0;
anima.removedOnCompletion = NO;
anima.fillMode = kCAFillModeForwards;
[self.redView.layer addAnimation:anima forKey:nil];
}
(b)CAKeyframeAnimation 的动画执行节奏变换
- (void)animationWithPosition {
CAKeyframeAnimation *anima = [CAKeyframeAnimation animation];
anima.keyPath = @"position";
anima.removedOnCompletion = NO;
anima.fillMode = kCAFillModeForwards;
anima.duration = 2.0;
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, NULL, CGRectMake(100, 100, 200, 200));
anima.path = path;
CGPathRelease(path);
// 设置动画的执行节奏
// kCAMediaTimingFunctionEaseInEaseOut : 一开始比较慢, 中间会加速, 临近结束的时候, 会变慢
anima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anima.delegate = self;
[self.redView.layer addAnimation:anima forKey:nil];
}
#pragma mark - 动画的代理方法
#pragma mark 动画开始的时候调用
- (void)animationDidStart:(CAAnimation *)anim {
NSLog(@"animationDidStart");
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
NSLog(@"animationDidStop");
}
(c)CAKeyframeAnimation 的抖动效果
首先定义宏如下：
#define Angle2Radian(angle) ((angle) / 180.0 * M_PI)
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
主要代码如下：
- (IBAction)start {
CAKeyframeAnimation *anima = [CAKeyframeAnimation animation];
anima.keyPath = @"transform.rotation";
anima.values = @[@(Angle2Radian(-5)), @(Angle2Radian(5)), @(Angle2Radian(-5))];
anima.duration = 0.25;
// 动画的重复执行次数
anima.repeatCount = MAXFLOAT;
// 保持动画执行完毕后的状态
anima.removedOnCompletion = NO;
anima.fillMode = kCAFillModeForwards;
[self.iconView.layer addAnimation:anima forKey:@"shake"];
}
- (IBAction)stop {
[self.iconView.layer removeAnimationForKey:@"shake"];
}
(3) CATransition
转场动画
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
/// 当前图片的索引
@property (nonatomic, assign) NSInteger currentIndex;
主要代码示例如下：
- (IBAction)pre {
self.currentIndex--;
if (self.currentIndex == -1) {
self.currentIndex = 8;
}
NSString *fileName = [NSString stringWithFormat:@"%ld.jpg", self.currentIndex + 1];
self.iconView.image = [UIImage imageNamed:fileName];
CATransition *anima = [CATransition animation];
// anima.type = @"cube";
// anima.subtype = kCATransitionFromLeft;
anima.type = @"pageUnCurl";
anima.duration = 0.5;
[self.view.layer addAnimation:anima forKey:nil];
}
- (IBAction)next {
self.currentIndex++;
if (self.currentIndex == 9) {
self.currentIndex = 0;
}
NSString *fileName = [NSString stringWithFormat:@"%ld.jpg", self.currentIndex + 1];
self.iconView.image = [UIImage imageNamed:fileName];
// 转场动画
CATransition *anima = [CATransition animation];
anima.type = @"pageCurl";
// anima.subtype = kCATransitionFromRight;
anima.duration = 0.5;
// anima.startProgress = 0.0;
// anima.endProgress = 0.5;
[self.view.layer addAnimation:anima forKey:nil];
}
（4）CAAnimationGroup
可以使用CAAnimationGroup组合多种动画，实现多种复杂的动画效果。
@property (weak, nonatomic) IBOutlet UIView *myView;
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
// 1.创建旋转动画对象
CABasicAnimation *rotate = [CABasicAnimation animation];
rotate.keyPath = @"transform.rotation";
rotate.toValue = @(M_PI);
// 2.创建缩放动画对象
CABasicAnimation *scale = [CABasicAnimation animation];
scale.keyPath = @"transform.scale";
scale.toValue = @(0.0);
// 3.平移动画
CABasicAnimation *move = [CABasicAnimation animation];
move.keyPath = @"transform.translation";
move.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
// 4.将所有的动画添加到动画组中
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[rotate, scale, move];
group.duration = 2.0;
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeForwards;
[self.myView.layer addAnimation:group forKey:nil];
}
网友评论