zoukankan      html  css  js  c++  java
  • iOS中的动画

    #import "ViewController.h"
    #import "UITextField+Shake.h"
    @interface ViewController ()
    @property (retain, nonatomic) IBOutlet UIImageView *balloonImage;
    @property (retain, nonatomic) IBOutlet UIButton *springBtn;
    
    @property (retain, nonatomic) IBOutlet UITextField *shuruTF;
    @property (retain, nonatomic) IBOutlet UIView *redVC;
    @property (retain, nonatomic) IBOutlet UIImageView *cloudImage;
    
    
    @property (retain, nonatomic) UIView *yellowView;
    
    
    @end
    
    @implementation ViewController
    
    
    
    - (IBAction)StartBtn:(id)sender {
        //[self handlePropertyAnimation]; //UIView 属性动画
        //[self handlePropertyAnimationBlock]; // Block形式
        //[self handleTransition]; //过度动画
        //[self handleUIViewAndCALayer];
        //[self handleBasicAnimation];
        //[self handleKeyFrameAnimation];
        //输入输入框
        //[self.shuruTF shake];
        
        //[self handleCATransition];
        
        [self handleCAgroup];
        
    }
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
    //    self.yellowView = [[[UIView alloc] initWithFrame:self.redVC.frame] autorelease];
    //    self.yellowView.backgroundColor = [UIColor yellowColor];
    //    self.yellowView.tag = 100;
    
    }
    
    
    #pragma mark -- UIView动画
    //UIView 属性动画
    //能够做动画的属性:frame,center,bounds,alpha,transform,backgroundColor
    - (void)handlePropertyAnimation{
      //iOS4.0 之前如果想做动画,必须放在开始可提交之间才有效
        //对属性更改值是有效值,最终会对视图做出修改
        //开始动画
        [UIView beginAnimations:nil context:nil];
        //1.设置动画持续时间 - s
        [UIView setAnimationDuration:3];
        //2.设置动画代理 --- 但是,不需要服从代理
        [UIView setAnimationDelegate:self];
        //3.设置代理结束之后执行的方法
        [UIView setAnimationDidStopSelector:@selector(handleDidStop)];
        //4.试着动画的延迟的时间 - s
        //[UIView setAnimationDelay:2];
        //5.设置动画从当前状态发生变化
        [UIView setAnimationBeginsFromCurrentState:YES];
        //6.设置动画是否反转
        [UIView setAnimationRepeatAutoreverses:YES];
        //7.设置动画重复次数
        [UIView setAnimationRepeatCount:10];
        //8.设置变化的变化曲线
        [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
        
        
        
        
        
        
        
        
        //center --视图位置
        CGPoint center = self.redVC.center;
        center.y += 10;
        self.redVC.center = center;
        //alpha -- 透明度
        self.redVC.alpha = 0.2;
        //transform -- 旋转和缩放
        
        self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI_4);
        
        self.redVC.transform = CGAffineTransformScale(self.redVC.transform, 0.5, 0.5);
        
        //提交
        [UIView commitAnimations];
    }
    //动画结束后实现的方法,让视图恢复原状
    - (void)handleDidStop{
        //center 回到原来的位置
        
        self.redVC.center = self.view.center;
        //alpha 恢复为1.0
        self.redVC.alpha = 1.0;
        //transform 回到原来的位置
        self.redVC.transform = CGAffineTransformIdentity;
        
    }
    
    
    //iOS4.0之后 基于Block的动画 -- (推荐)
    - (void)handlePropertyAnimationBlock{
        
        
    //    [UIView animateWithDuration:4 animations:^{
    //        //1.最简单的block动画
    //        /*
    //         //对属性更改,做动画效果
    //         //center --视图位置
    //         CGPoint center = self.redVC.center;
    //         center.y += 10;
    //         self.redVC.center = center;
    //         //alpha -- 透明度
    //         self.redVC.alpha = 0.2;
    //         //transform -- 旋转和缩放
    //         
    //         self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI_4);
    //         
    //         self.redVC.transform = CGAffineTransformScale(self.redVC.transform, 0.5, 0.5);
    //
    //         */
    //        //.Block 版本升级 -- 可检测动画结束时间
    //        //对属性更改,做动画效果
    //        //center --视图位置
    //        CGPoint center = self.redVC.center;
    //        center.y += 10;
    //        self.redVC.center = center;
    //        //alpha -- 透明度
    //        self.redVC.alpha = 0.2;
    //        //transform -- 旋转和缩放
    //        
    //        self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI_4);
    //        
    //        self.redVC.transform = CGAffineTransformScale(self.redVC.transform, 0.5, 0.5);
    //
    //        
    //   } completion:^(BOOL finished) {
    //       [self handleDidStop];
    //   }];
        
        //Block 形式 加强版 -- 不光可以捕获动画结束时间,而且可以配置多个参数
    //    [UIView animateWithDuration:4 delay:2 options:UIViewAnimationOptionAutoreverse animations:^{
    //        CGPoint center = self.redVC.center;
    //        center.y += 10;
    //        self.redVC.center = center;
    //        //alpha -- 透明度
    //        self.redVC.alpha = 0.2;
    //        //transform -- 旋转和缩放
    //        
    //        self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI_4);
    //        
    //        self.redVC.transform = CGAffineTransformScale(self.redVC.transform, 0.5, 0.5);
    //        
    //
    //    } completion:^(BOOL finished) {
    //        [self handleDidStop];
    //    }];
        //4.弹簧效果
        //1:持续时间,2.延迟时间,3.弹簧强度,4.开始变化速度,5.动画效果参数6.动画代码,7.结束动画
        [UIView animateWithDuration:8 delay:0 usingSpringWithDamping:0.001 initialSpringVelocity:3 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            CGPoint center = self.redVC.center;
            center.y += 10;
            self.redVC.center = center;
            //alpha -- 透明度
            self.redVC.alpha = 0.8;
            //transform -- 旋转和缩放
            
           // self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI);
            
            self.redVC.transform = CGAffineTransformScale(self.redVC.transform, 1.5, 1.5);
    
        } completion:^(BOOL finished) {
            [self handleDidStop];
        }];
        
    }
    
    
    
    
    
    
    //过渡动画 -- 界面间的过渡
    - (void)handleTransition{
        //1.只产生变化效果,但是界面没有切换
        /*
        [UIView transitionWithView:self.redVC duration:3 options:UIViewAnimationOptionCurveEaseInOut animations:^{
            //旋转
            self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI_4); // M_PI_4 旋转45 M_PI_2 旋转90 M_PI 旋转180度
        } completion:^(BOOL finished) {
            //[self handleDidStop];
        }];
        */
        //2.从一个视图,切换到另一个视图
        [UIView transitionFromView:self.redVC toView:self.yellowView duration:3 options:UIViewAnimationOptionTransitionCurlDown completion:^(BOOL finished) {
            UIView *tempView= [self.redVC retain];
            self.redVC = self.yellowView;
            self.yellowView = tempView;
            [tempView release];
            
            
        }];
        
        
        
    }
    
    
    
    #pragma mark -- UIView与 CALayer
    //UIView 与CALayer 的区别
    //UIView 其实是CALayer 层的简单封装,真正来绘制显示内容的还是CALayer,每一个视图对象都有一个Layer属性可以访问到自己的layer层.UIView只是封装了常用属性,不常用的属性还是要设置CALayer.
    - (void)handleUIViewAndCALayer{
        //1.设置视图边框的宽度
        self.redVC.layer.borderWidth = 2;
        //2.设置视图边框的颜色
        self.redVC.layer.borderColor = [UIColor whiteColor].CGColor;
        //3.设置视图的圆角
        self.redVC.layer.cornerRadius = 10;
        //4.超出
        self.redVC.layer.masksToBounds = YES;
        //5.设置视图的锚点 -- 旋转的基准点  (锚点和旋转的基准点相同是,才会按设定的点转)
        self.redVC.layer.anchorPoint = CGPointMake(1, 1);
       // CGRect frame = self.redVC.frame;
        //CGRectGetMinX  --- 获取一个视图的最小x
        //CGRectGetMinY --- 获取一个视图最小的y
        //CGRectGetMaxX -- 获取一个视图最大的x
        //CGRectGetMaxY -- 获取一个视图最大的y
        //self.redVC.layer.position = CGPointMake(CGRectGetMaxX(frame), CGRectGetMaxY(frame));
        self.redVC.layer.position = CGPointMake((89+142), (215+138));
        self.redVC.transform = CGAffineTransformRotate(self.redVC.transform, M_PI_4);
        
    }
    
    
    
    #pragma mark -- CALayer 动画
    
    
    //CA属性动画 -- 基本属性动画
    //CA动画修改属性值,最终不会作用到视图
    //CAAnimation 基类
    - (void)handleBasicAnimation{
        /*
        CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"opacity"];
        //变化开始值
        basic.fromValue = @(1.0);
        //变化结束值
        basic.toValue = @(0.2);
        //添加到视图的 layer 层
        [self.redVC.layer addAnimation:basic forKey:nil];
         */
        
        //让云动起来
        CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"position.x"];
        //变化的开始值
        basic.fromValue = @(self.cloudImage.center.x);
        //变化的结束值
        basic.toValue = @([UIScreen mainScreen].bounds.size.width + CGRectGetWidth(self.cloudImage.frame) / 2);
        basic.duration = 10;
        basic.repeatCount = 100;
        
        //添加的视图的layer层
        [self.cloudImage.layer addAnimation:basic forKey:nil];
    //    NSLog(@"%f",self.cloudImage.frame.size.width);
    //    if (self.cloudImage.frame.size.width > ((89+142) / 2)) {
    //        [self handlePropertyAnimationBlock];
    //    }
    }
    
    
    
    
    //CA属性动画 -- 关键帧动画
    -(void)handleKeyFrameAnimation{
        CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        
        CGPoint point1 = self.cloudImage.center;
        CGPoint point2 = CGPointMake([UIScreen mainScreen].bounds.size.width /2, 60);
        CGPoint point3 = CGPointMake([UIScreen mainScreen].bounds.size.width, self.cloudImage.center.y);
        
        NSValue *value1 = [NSValue valueWithCGPoint:point1];
        NSValue *value2 = [NSValue valueWithCGPoint:point2];
        NSValue *value3 = [NSValue valueWithCGPoint:point3];
        
        keyFrame.values = @[value1,value2,value3,value1];
        //添加到视图layer层
        keyFrame.duration = 10;
        keyFrame.repeatCount = 100;
        [self.cloudImage.layer addAnimation:keyFrame forKey:nil];
    }
    
    
    /* 过渡效果
     fade     //交叉淡化过渡(不支持过渡方向) kCATransitionFade
     push     //新视图把旧视图推出去  kCATransitionPush
     moveIn   //新视图移到旧视图上面   kCATransitionMoveIn
     reveal   //将旧视图移开,显示下面的新视图  kCATransitionReveal
     cube     //立方体翻滚效果
     oglFlip  //上下左右翻转效果
     suckEffect   //收缩效果,如一块布被抽走(不支持过渡方向)
     rippleEffect //滴水效果(不支持过渡方向)
     pageCurl     //向上翻页效果
     pageUnCurl   //向下翻页效果
     cameraIrisHollowOpen  //相机镜头打开效果(不支持过渡方向)
     cameraIrisHollowClose //相机镜头关上效果(不支持过渡方向)
     */
    
    /* 过渡方向
     kCATransitionFromRight
     kCATransitionFromLeft
     kCATransitionFromBottom
     */
    //CA过渡动画
    - (void)handleCATransition{
        CATransition *transition = [CATransition animation];
        //配置过度动画类型
        transition.type = @"cube";
        //transition.duration = 100;
        //配置过度动画方向
        //transition.subtype = kCATransitionFromLeft;
        //添加视图layer层
        [self.redVC.layer addAnimation:transition forKey:nil];
    }
    
    
    //CA 分组动画
    
    - (void)handleCAgroup{
        
        //1.关键帧动画 -- 沿圆形轨迹移动
        CAKeyframeAnimation *keyFrame1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        CGFloat y = [UIScreen mainScreen].bounds.size.width;
        
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, y) radius:y startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
        
        //关键帧动画给上圆形轨迹
        keyFrame1.path = path.CGPath; //让贝塞尔曲线作为移动轨迹
        keyFrame1.duration = 10;
        
        
        
        
        //2.关键帧动画 -- 气球放大缩小
      
        CAKeyframeAnimation *keyFrame2 = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
        keyFrame2.values = @[@(1.0),@(1.2),@(1.4),@(1.6),@(1.8),@(2.0),@(1.8),@(1.6),@(1.4),@(1.2),@(1.0)];
        keyFrame2.duration = 10;
        
        //3.创建分组
        CAAnimationGroup *group= [CAAnimationGroup animation];
        group.animations = @[keyFrame2,keyFrame1];
        group.duration = 1000;
        [self.balloonImage.layer addAnimation:group forKey:nil];
        
        
        
    }
    
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    - (void)dealloc {
        self.yellowView = nil;
        [_shuruTF release];
        [_redVC release];
        [_cloudImage release];
        [_balloonImage release];
        [_springBtn release];
        [super dealloc];
    }
    @end
    UITextField+Shake.h
    
    #import <UIKit/UIKit.h>
    
    @interface UITextField (Shake)
    //抖动
    - (void)shake;
    @end
    
    
    #import "UITextField+Shake.h"
    
    @implementation UITextField (Shake)
    //抖动
    - (void)shake{
        CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
        keyFrame.values = @[@(self.layer.position.x - 10), @(self.layer.position.x),@(self.layer.position.x + 10),@(self.layer.position.x)];
        //设置重复次数
        keyFrame.repeatCount = 7;
        //持续时间
        keyFrame.duration = 0.1;
        //添加到视图的layer层
        [self.layer addAnimation:keyFrame forKey:nil];
    }
    @end

  • 相关阅读:
    [翻译]windows下 连接到 bitnami的phpmyadmin
    Redmine 和GitBlit仓库服务器整合
    Xshell出现要继续使用此程序必须应用到最新的更新或使用新版本
    Codeigniter 列出所有控制器和控制器的方法(类似路由列表)
    FastStone Capture 文件名设置小记录
    [转]sourceforge文件下载过慢
    Cacti 添加 CPU 监听
    Cacti 发送警告邮件
    尝试让Virtualbox的Ubuntu可以调整分辨率
    Html5+离线打包创建本地消息
  • 原文地址:https://www.cnblogs.com/wohaoxue/p/4817416.html
Copyright © 2011-2022 走看看