美文网首页iOS Developer
iOS - 动画(一)

iOS - 动画(一)

作者: Bruce_XHG | 来源:发表于2017-04-22 16:43 被阅读0次

动画在开发过程中能给我们的项目带来不少的亮点和用户体验,下面就 iOS 动画从以下几点说一说。

  • CABasicAnimation动画
  • CAKeyframeAnimation动画
  • CATransition动画
  • CAAnimationGroup动画
  • blockAnimation动画
  • SpringAnimation 动画
  • 3D 动画

一、CABasicAnimation动画

我们常见的 UI 控件沿着 X、Y 轴的移动动画。最终还会停止在动画开始的位置。该动画在执行的过程中,在移动到设定的位置以后会一下回到控件的原始位置,比较生硬。

CABasicAnimation.gif
    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.gif
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.gif
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.gif
    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 动画的执行次数可以根据自己的需求进行设置。递归的使用

blockAnimation.gif
-(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 动画,它模拟的更像真实世界的动画。弹性的使用。

Untitled.gif
    //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 动画使动画执行起来有立体感,感觉上有没有更炫酷

3D.gif
//添加每个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];
}

总结:这里大致简单的介绍一下,每个动画的实现都可以自己动手去实现,去扩展到更酷炫的动画。希望每个看到这个引子的人都能深入实现不同的动画效果。以及实现的过程中注意一下性能。

相关文章

网友评论

    本文标题:iOS - 动画(一)

    本文链接:https://www.haomeiwen.com/subject/rwyrzttx.html