【iOS进阶】【核心动画】1-CABasicAnimation
一、CABasicAnimation
CABasicAnimation是CAPropertyAnimation的子类,使用它可以实现一些基本的动画效果,它可以让CALayer的某个属性从某个值渐变到另一个值。下面就用CABasicAnimation实现几个简单的动画。
1>先初始化一个UIView添加到控制器的view中,然后在这个UIView的layer上执行动画,下面的self是指控制器
//定义一个图层 CALayer *layer = [CALayer layer]; //位置 layer.position = CGPointMake(100, 100); //大小 layer.bounds = CGRectMake(0, 0, 150, 150); //背景色 layer.backgroundColor = [UIColor redColor].CGColor; //添加图层 [self.view.layer addSublayer:layer]; //成员变量赋值 self.layer = layer;
2>平移动画
1.修改position属性实现平移
//1.1创建动画对象 CABasicAnimation *basicAnim = [CABasicAnimation animation]; //1.2 keyPath决定了执行怎么样的动画,调整那个属性来调整动画
basicAnim.keyPath = @"position";
//CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];
//2.设置动画对象 //2.1 设置起点,若未设置则为当前点。position从(50, 80)渐变到(300, 300) basicAnim.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, 50)]; //2.2 设置终点 basicAnim.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)]; //2.3 设置动画执行的时间 basicAnim.duration = 3.0; /**让图层保持动画执行完毕后的状态**/ //2.4 当动画完成的时候是否移除动画,NO为不删除 basicAnim.removedOnCompletion = NO; //2.5 保持最新的状态 basicAnim.fillMode = kCAFillModeForwards;
//3.设置动画的代理
anim.delegate = self; //4.添加动画 [self.layer addAnimation:basicAnim forKey:nil];
* 第2行设置的keyPath是@"position",说明要修改的是CALayer的position属性,也就是会执行平移动画
* 注意第7、8行,这里并不是直接使用CGPoint这种结构体类型,而是要先包装成NSValue对象后再使用。
这2行代码表示CALayer从位置(50, 80)移动到位置(300, 350)
* 如果将第8行的toValue换成byValue,代表CALayer从位置(50, 80)开始向右移动300、向下移动350,也就是移动到位置(350, 430)
* 默认情况下,动画执行完毕后,动画会自动从CALayer上移除,CALayer又会回到原来的状态。为了保持动画执行后的状态,可以加入第14、15行代码
* 第18行后面的@"translate"是给动画对象起个名称,以后可以调用CALayer的removeAnimationForKey:方法根据动画名称停止相应的动画
* 第11行是设置动画的代理,可以监听动画的执行过程,这里设置控制器为代理。代理需要实现的方法有:
1 #pragma mark 动画开始 2 - (void)animationDidStart:(CAAnimation *)anim { 3 NSLog(@"动画开始了"); 4 } 5 6 #pragma mark 动画结束 7 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag { 8 // 查看一下动画执行完毕后的position值 9 NSString *string = NSStringFromCGPoint(_myView.layer.position); 10 NSLog(@"动画结束了,position:%@", string); 11 }
打印结果为:
1 2013-04-14 23:44:26.197 CAAnimation[5995:c07] 动画开始了 2 2013-04-14 23:44:27.697 CAAnimation[5995:c07] 动画结束了,position:{100, 100}
从第2行的打印信息可以看出,实际上,动画执行完毕后,并没有真正改变CALayer的position属性的值!
2.修改transform属性实现平移
1 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
2 anim.duration = 1;
3
4 CATransform3D form = CATransform3DMakeTranslation(350, 350, 0);
5 anim.toValue = [NSValue valueWithCATransform3D:form];
6
7 [_myView.layer addAnimation:anim forKey:nil];
3>缩放动画
1.修改bounds属性实现平移
//1.1创建动画对象 CABasicAnimation *basicAnim = [CABasicAnimation animation]; //1.2 keyPath决定了执行怎么样的动画,调整那个属性来调整动画 basicAnim.keyPath = @"bounds"; //2.设置动画对象 //2.1 设置修改后的属性 basicAnim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)]; //2.2 设置动画执行时间 basicAnim.duration = 3.0; /**让图层保持动画执行完毕后的状态**/ //2.3 当动画完成的时候是否移除动画,NO为不删除 basicAnim.removedOnCompletion = NO; //2.4 保持最新的状态 basicAnim.fillMode = kCAFillModeForwards; //3.添加动画 [self.layer addAnimation:basicAnim forKey:nil];
2.修改transform属性实现平移
1 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"]; 2 anim.duration = 1.5; // 动画持续1.5s 3 4 // CALayer的宽度从0.5倍变为2倍 5 // CALayer的高度从0.5倍变为1.5倍 6 anim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 1)]; 7 anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2, 1.5, 1)]; 8 9 [_myView.layer addAnimation:anim forKey:nil];
4>旋转动画,通过修改transform属性
//1.1创建动画对象 CABasicAnimation *basicAnim = [CABasicAnimation animation]; //1.2 keyPath决定了执行怎么样的动画,调整那个属性来调整动画 basicAnim.keyPath = @"transform"; //2.设置动画对象 //2.3 设置修改后的属性 basicAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)]; //2.4 设置动画执行时间 basicAnim.duration = 3.0; /**让图层保持动画执行完毕后的状态**/ //2.5 当动画完成的时候是否移除动画,NO为不删除 basicAnim.removedOnCompletion = NO; //2.6 保持最新的状态 basicAnim.fillMode = kCAFillModeForwards; //3.添加动画 [self.layer addAnimation:basicAnim forKey:nil];

浙公网安备 33010602011771号