动画在开发过程中能给我们的项目带来不少的亮点和用户体验,下面就 iOS 动画从以下几点说一说。
- CABasicAnimation动画
- CAKeyframeAnimation动画
- CATransition动画
- CAAnimationGroup动画
- blockAnimation动画
- SpringAnimation 动画
- 3D 动画
一、CABasicAnimation动画
我们常见的 UI 控件沿着 X、Y 轴的移动动画。最终还会停止在动画开始的位置。该动画在执行的过程中,在移动到设定的位置以后会一下回到控件的原始位置,比较生硬。
CABasicAnimation *baseAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
baseAnimation.duration = 2.0;
baseAnimation.fromValue = [NSNumber numberWithFloat:self.animationView.layer.position.y];
baseAnimation.toValue = [NSNumber numberWithFloat:500];
baseAnimation.repeatCount = 2;
[self.animationView.layer addAnimation:baseAnimation forKey:@"position.y"];
二、CAKeyframeAnimation动画
帧动画可以更好的设置动画的的运行轨迹,停留位置。动画执行过程中也比较流程
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGPoint p = self.animationView.layer.position;
CGPoint p1 = CGPointMake(50, 50);
CGPoint p2 = CGPointMake(300, 500);
NSValue *pp = [NSValue valueWithCGPoint:p];
NSValue *pp1 = [NSValue valueWithCGPoint:p1];
NSValue *pp2 = [NSValue valueWithCGPoint:p2];
animation.values = @[pp,pp1,pp2,pp];
animation.duration = 2.0;
animation.repeatCount = 2;
[self.animationView.layer addAnimation:animation forKey:@"11"];
三、CATransition动画
常用于界面间的跳转动画,根据不同的subtype实现不同的跳转动画,让界面跳转间更酷炫。注意跳转之后其实把跳转的控制器的 view 加在了当前的 view 上。所以在返回的时候注意还在在当前控制器中进行判断
CATransition *animation = [CATransition animation];
animation.type = @"cube";
animation.subtype = kCATransitionFromBottom;
animation.duration = 0.5;
[self.view.superview.layer addAnimation:animation forKey:@"catransition"];
vc = [[JumpViewController alloc] init];
[self.view addSubview:vc.view];
四、CAAnimationGroup动画
动画组能把几种动画结合起来,可以让 UI 控件同时进行几种动画的执行
CAAnimationGroup *group = [CAAnimationGroup animation];
group.duration = 3;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.fromValue = [NSValue valueWithCGPoint:self.animationView.layer.position];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 500)];
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
animation1.toValue = (__bridge id)([[UIColor grayColor]CGColor]);
group.animations = @[animation,animation1];
group.repeatCount = 2;
[self.animationView.layer addAnimation:group forKey:@"1"];
五、blockAnimation动画
直接在 block 体内执行相关的动画,使代码更紧凑,代码量也比较少。下面执行的是animationView的缩放,iOS 默认的锚点是(0.5,0.5)也就是中心点。锚点的位置可以手动设置,根据需求可以进行相应的设置。block 动画的执行次数可以根据自己的需求进行设置。递归的使用
-(void)blockAnimation{
[UIView animateWithDuration:2.0 animations:^{
self.animationView.transform = CGAffineTransformMakeScale(2.0, 2.0);
} completion:^(BOOL finished) {
[UIView animateWithDuration:2.0 animations:^{
self.animationView.transform = CGAffineTransformMakeScale(1.0, 1.0);
} completion:^(BOOL finished) {
if (salceCount > 0) {
salceCount--;
[self blockAnimation];
}
}];
}];
}
六、SpringAnimation 动画
我们常见的弹簧效果就是用SpringAnimation 动画,它模拟的更像真实世界的动画。弹性的使用。
//dampingRatio:阻尼系数,范围为 0.0 ~ 1.0,数值越小,弹簧振动的越厉害,Spring 的效果越明显
//velocity:表示速度,数值越大移动的越快。值为 1.0 时,这个速度为 1 秒钟之内走完整个动画距离的速度。更大或更小的值会让 view 刚到达终点时的速度更大或更小。
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.3 initialSpringVelocity:0.5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.animationView.transform = CGAffineTransformMakeScale(0.5, 0.5);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.3 initialSpringVelocity:0.5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.animationView.transform = CGAffineTransformMakeScale(1.5, 1.5);
} completion:^(BOOL finished) {
}];
}];
七、3D 动画
3D 动画使动画执行起来有立体感,感觉上有没有更炫酷
//添加每个cell出现时的3D动画
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
CATransform3D rotation;//3D旋转
rotation = CATransform3DMakeRotation( (180.0*M_PI)/180, 0.0, 0.7, 0.4);
//逆时针旋转
rotation.m34 = 1.0/ 600;
cell.layer.shadowColor = [[UIColor blackColor]CGColor];
cell.layer.shadowOffset = CGSizeMake(10, 10);
cell.alpha = 0;
cell.layer.transform = rotation;
[UIView beginAnimations:@"rotation" context:NULL];
//旋转时间
[UIView setAnimationDuration:0.5];
cell.layer.transform = CATransform3DIdentity;
cell.alpha = 1;
cell.layer.shadowOffset = CGSizeMake(0, 0);
[UIView commitAnimations];
}
总结:这里大致简单的介绍一下,每个动画的实现都可以自己动手去实现,去扩展到更酷炫的动画。希望每个看到这个引子的人都能深入实现不同的动画效果。以及实现的过程中注意一下性能。