• iOS动画实现总结


    在iOS中,动画实现方向有两种,一种是操作UIView的animation方法,另外一种就是核心动画,但到iOS7中,UIView又跟核心动画牵扯在一起。

    方式一(利用核心动画添加动画)

    • 核心动画的层次关系

    •  

    • 转场动画(CATransition)

      • 用于做场景的转换动画,能偶为层提供移出屏幕和一如屏幕的动画效果。
      • UINavigationController就是通过CATransition实现了讲控制器的师徒推入屏幕的动画效果。
      • 常用属性
        • type动画过度类型
        • subtype:动画过度方向
        • startProgress:动画起点(在整体的百分比)(可用的值从0到1,在动画中起点或终点的逗留时间,开始的时间一定要比结束的时间小,下同)
        • endProgress:动画终点(在整体动画的百分比)
       CATransition *animation = [CATransition animation];
        animation.type = @"reveal";
        animation.duration = 1;
        animation.subtype = kCATransitionReveal;
        [self.myView.layer addAnimation:animation forKey:nil];
        CGPoint point = self.myView.center;
        point.y += 150;
        [self.myView setCenter:point];
    • 基本动画(CABasicAnimation),是CAPropertyAnimation的子类,一个动画可控制一个属性的变化,变化值只能是两个值中变化,可以在fromValue和toValue两个值中设置

      CABasicAnimation *baseAnimation = [CABasicAnimation animationWithKeyPath:@"bounds"];
        baseAnimation.fromValue = [NSValue valueWithCGRect:CGRectMake(20, 20, 100, 100)];
        baseAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(100, 100, 200, 200)];
      
        baseAnimation.duration = 2.0;
        baseAnimation.removedOnCompletion = NO;
        baseAnimation.fillMode = kCAFillModeForwards;
        baseAnimation.repeatCount = MAXFLOAT;
      
        [self.myView.layer addAnimation:baseAnimation forKey:nil];
    • 帧动画(CAKeyframeAnimation),帧动画也是CAPropertyAnimation的子类,所以也是控制一个view的属性做动画,与CABaseAnimation不同的是,CAKeyFrameAnimation可以添加多个关键帧,而CABaseAnimation可以看做是两个关键帧的帧动画,我们可以好好利用帧动画的关键帧来做比较有趣的动画,如泡泡效果。

       CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
    //    位移
        CAKeyframeAnimation *positionAnima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        positionAnima.calculationMode = kCAAnimationCubicPaced;
        positionAnima.duration = 5;
        positionAnima.fillMode = kCAFillModeForwards;
        positionAnima.removedOnCompletion = NO;
        positionAnima.repeatCount = MAXFLOAT;
        positionAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    
    //    添加移动路径
        CGMutablePathRef curvedPath = CGPathCreateMutable();
        CGRect circleContainer = CGRectInset(myView.frame, myView.frame.size.width / 2 - 3, myView.frame.size.height / 2 - 3);
        CGPathAddEllipseInRect(curvedPath, NULL, circleContainer);
        positionAnima.path = curvedPath;
        CGPathRelease(curvedPath);
        [myView.layer addAnimation:positionAnima forKey:nil];
    
    //    缩放X
        CAKeyframeAnimation *scaleX = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.x"];
        scaleX.duration = 1.0;
        scaleX.values = @[@1.0,@1.1,@1.0];
        scaleX.keyTimes = @[@0.0,@0.5,@1.0];
        scaleX.repeatCount = MAXFLOAT;
        scaleX.autoreverses = YES;
    
        scaleX.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
        [myView.layer addAnimation:scaleX forKey:nil];
    
    //    缩放Y
        CAKeyframeAnimation *scaleY = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];
        scaleY.duration = 1.5;
        scaleY.values = @[@1.0,@1.1,@1.0];
        scaleY.keyTimes = @[@0.0,@0.5,@1.0];
        scaleY.repeatCount = MAXFLOAT;
        scaleY.autoreverses = YES;
    
        group.animations = @[positionAnima,scaleX,scaleY];
        scaleY.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
        [myView.layer addAnimation:scaleY forKey:nil];

    运行效果

    由于本人的电脑是黑苹果,所以将就一下啦,哈哈,白苹果应该不会这样的。

    • 动画组(CAAnimationGroup)CAAnimation的子类,可以保存一组动画对象,讲CAAnimationGroup对象加入层后,组中所有动画可以同时运行,所以,当我们需要做多个动画并且执行的时间不一样的时候,动画组就不适用。例如上面的泡泡效果。
    group.animations = [里面放动画对象];

    方式二(利用UIView添加动画)

    • UIView动画(手码)
      • 添加单个动画
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:4];
        CGPoint point = self.myView.center;
        point.y += 150;
        [self.myView setCenter:point];
        [UIView commitAnimations];
      • 添加多个动画
      [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:4];
        CGPoint point = self.myView.center;
        point.y += 150;
        [self.myView setCenter:point];
        [UIView commitAnimations];
    
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:4];
        [self.myView setAlpha:0.1];
        [UIView commitAnimations];
    • UIView动画(Block)
    [UIView animateWithDuration:4 animations:^{
            CGPoint point = self.myView.center;
            point.y += 150;
            [self.myView setCenter:point];
        }];
    • UIView动画(Block帧动画),从iOS7开启,苹果提供了比较便捷的方法来调用帧动画,不用新建帧动画实例,直接对layer的属性进行控制。
    [UIView animateKeyframesWithDuration:0.5 delay:1 options:UIViewKeyframeAnimationOptionAutoreverse animations:^{
            self.view.bounds = CGRectMake(30, 30, 30, 30);
        } completion:^(BOOL finished) {
    
        }];
     
    • UIView转场动画。
    + (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

    这个方法应该不好理解,简单来说,这个方法调用完毕后,相当于执行了两句代码,

    // 添加toView到父视图
    [fromView.superview addSubview:toView];
    // 把fromView从父视图中移除
    [fromView.superview removeFromSuperview];
    - duration:动画的持续时间
    - duration:动画的持续时间
    - options:转场动画的类型
    - animations:将改变视图属性的代码放在这个block中
    - completion:动画结束后,会自动调用这个block
     
  • 相关阅读:
    ajax 同步模式与异步模式
    Ajax -get 请求
    Ajax -post 请求
    Ajax 遵循HTTP协议
    Ajax 发送请求
    宽高自适应案例
    伸缩导航案例
    伸缩属性的 grow与 shrink
    伸缩布局
    hdu-5858 Hard problem(数学)
  • 原文地址:https://www.cnblogs.com/superYou/p/4634422.html
Copyright © 2020-2023  润新知