您的位置:首页 > 产品设计 > UI/UE

动画设置 UIView动画实现 CAAnimation动画实现

2015-11-02 16:00 344 查看
#动画设置 UIView动画实现 CAAnimation动画实现

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIView *myView;

@property (weak, nonatomic) IBOutlet UIView *redView;

@end

#pragma mark - 知识点1 UIView类实现动画

#pragma mark - Animating Views with Block Object

@implementation ViewController

- (IBAction)handleViewOne:(id)sender {

    

#if 0 /* 方法1Block语法的动画
*/


    

        

    [UIView animateWithDuration:3 animations:^{

        

        /* 控件的属性发生改变 */

        self.myView.frame = CGRectMake(0, 100, 375, 200);

        self.myView.backgroundColor = [UIColor greenColor];

    

    }];

    

#endif

   

    

#if 0 /* 方法2 */

    /* */

    [UIView animateWithDuration:3 animations:^{

        /* 动画开始的代码*/

        self.myView.frame = CGRectMake(0, 200, 375, 130);

        self.myView.backgroundColor = [UIColor cyanColor];

            

    } completion:^(BOOL finished) {

        

        /* 动画执行后的代码段 */

        self.myView.frame = CGRectMake(0, 58, 375, 130);

        

        

    }];

    

#endif

    

#if 0 /* 方法3 */

    

    /* options参数:动画相关参数,多个之间用 |
分开*/

    [UIView animateWithDuration:3 delay:1 options:UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse animations:^{

        

        /* 开始动画的View属性值 */

        self.myView.frame = CGRectMake(0, 200, 375, 130);

        self.myView.backgroundColor = [UIColor redColor];

        

        

    } completion:^(BOOL finished) {

        

        

        

        

    }];

    

    

#endif

    

    

#if 0   /* 方法4
过渡动画效果 */

    

    

    [UIView transitionWithView:self.myView duration:3 options:UIViewAnimationOptionTransitionFlipFromLeft | UIViewAnimationOptionRepeat animations:^{

        

        self.myView.frame = CGRectMake(0, 200, 375, 130);

        

        

        

    } completion:^(BOOL finished) {

        

    }];

    

#endif

    

#if 0 /* 方法5:从一个View过渡到另一个View
*/


    

    [UIView transitionFromView:self.myView toView:self.redView duration:3 options:UIViewAnimationOptionTransitionCurlUp completion:^(BOOL finished) {

        

    }];

    

    

#endif

    

#if 1 /* 方法6:设置弹簧(Spring)相关参数
*/


    

    

    [UIView animateWithDuration:3 delay:0.5 usingSpringWithDamping:0.1 initialSpringVelocity:10 options:UIViewAnimationOptionRepeat animations:^{

        

        

        

        /* 开始动画的状态 UIView的属性  */

        self.myView.frame = CGRectMake(0, 200, 375, 130);

        

    } completion:^(BOOL finished) {

        

        /* 结束动画 UIView的属性*/

        

    }];

    

    

#endif

    

    

}

#pragma mark - Animating Views

- (IBAction)handleViewTow:(id)sender {

    

    /* 1,开始动画*/

    [UIView beginAnimations:@"FrameChange" context:nil];

    

    

    

    /* 2.动画设置 */

    

    [UIView setAnimationDuration:3];

    

    /** 重复的次数*/

    [UIView setAnimationRepeatCount:NSIntegerMax];

    

    /* 延迟动画 */

    

    [UIView setAnimationDelay:0.5];

    self.myView.frame = CGRectMake(0, 200, 375, 130);

    

    

    /* 3.提交动画 */

    [UIView commitAnimations];

    

    

    

}

#pragma mark - CAAnimation类、实现动画

#pragma mark ** CABasicAnimation 动画

- (IBAction)handleCABasicAnimation:(id)sender {

    

    /* 创建动画类的对象 */

    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

    /*初始值*/

    basic.fromValue = [NSNumber numberWithInt:0];

    basic.toValue = [NSNumber numberWithInt:3];

    

    /* 动画的相关设置 */

    basic.duration = 3;

    basic.repeatCount = NSIntegerMax;

    

    /* 添加到相关的View的layer属性上 */

    [self.myView.layer addAnimation:basic forKey:@"basic"];

    

    

    

    

}

#pragma mark - **CAAinmationGroup 动画

- (IBAction)handleCAAnimationCroup:(id)sender {

    

    /**创建多个Animation对象*/

    CABasicAnimation *b1 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];

    

    b1.fromValue = [NSNumber numberWithInt:1];

    b1.toValue = [NSNumber numberWithInt:200];

    

    CABasicAnimation *b2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

    b2.fromValue = [NSNumber numberWithInt:0];

    b1.toValue = [NSNumber numberWithInt:100];

    

    CABasicAnimation *b3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

    

    b3.fromValue = [NSNumber numberWithInt:100];

    b3.toValue = [NSNumber numberWithInt:200];

    

    /* 创建动画组对象*/

    CAAnimationGroup *aGroup = [[CAAnimationGroup alloc]init];

    

    /* 设置组对象的动画数组属性 */

    aGroup.animations = @[b1,b2,b3];

    

    /* 动画相关设置 */

    aGroup.duration = 3;

    aGroup.repeatCount = NSIntegerMax;

    

    /* 添加到相关View的layer属性上*/

    

    [self.myView.layer addAnimation:aGroup forKey:@"aGroup"];

    

}

#pragma mark - CAKeyframeAnimation 动画

- (IBAction)handleCAKeyframeAnimation:(id)sender {

    

    

    /* 创建动画对象 */

    //CAKeyframeAnimation *keyA = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation"];

    CAKeyframeAnimation *keyA = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    

    /* 设置动画对象的path属性(对象要沿着path移动)*/

    

    /* 创建CGPathRef结构体*/

    CGMutablePathRef path = CGPathCreateMutable();

   

    /* 指定path的初始的位置 */

    CGAffineTransform t = self.redView.transform;

    

    CGPathMoveToPoint(path, &t, self.redView.center.x, self.redView.center.y);

    

//    /* Path添加点坐标(直线) */

//    CGPathAddLineToPoint (path, &t, 100, 100);

//    CGPathAddLineToPoint(path, &t, 300, 100);

    

    /* 添加贝塞尔曲线 */

   

    CGPathAddCurveToPoint(path, &t, self.redView.center.x, self.redView.center.y, 100, 80, 300, 100);

    

     /* Path设置动画对象的属性 */

    keyA.path = path;

    keyA.duration = 3;

    keyA.repeatCount = 3;

    /* 相应地View的layer属性添加动画 */

    [self.redView.layer addAnimation:keyA forKey:@"keyA"];

  

}

#pragma mark **CATransition 动画

- (IBAction)handleCATranslation:(id)sender {

    

    /* 创建对象 */

    CATransition *transtition = [CATransition animation];

    

    /* 设置相关的属性 */

    //transtition.type =  kCATransitionMoveIn;

    transtition.type = @"cube";

    transtition.repeatCount = NSIntegerMax;

    

    /* View的layer添加动画 */

    transtition.duration = 3;

    [self.myView.layer  addAnimation:transtition forKey:@"transition"];

    

    

}

/** type

 *

 *  各种动画效果 
其中除了'fade', `moveIn', `push' , `reveal' ,其他属于私有的API.

 *  ↑↑↑上面四个可以分别使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用.

 *  @"cube"                     立方体翻滚效果

 *  @"moveIn"                   新视图移到旧视图上面

 *  @"reveal"                   显露效果(将旧视图移开,显示下面的新视图)

 *  @"fade"                     交叉淡化过渡(不支持过渡方向)             (默认为此效果)

 *  @"pageCurl"                 向上翻一页

 *  @"pageUnCurl"               向下翻一页

 *  @"suckEffect"               收缩效果,类似系统最小化窗口时的神奇效果(不支持过渡方向)

 *  @"rippleEffect"             滴水效果,(不支持过渡方向)

 *  @"oglFlip"                  上下左右翻转效果

 *  @"rotate"                   旋转效果

 *  @"push"

 *  @"cameraIrisHollowOpen"     相机镜头打开效果(不支持过渡方向)

 *  @"cameraIrisHollowClose"    相机镜头关上效果(不支持过渡方向)

 */

/** type

 *

 *  kCATransitionFade            交叉淡化过渡

 *  kCATransitionMoveIn          新视图移到旧视图上面

 *  kCATransitionPush            新视图把旧视图推出去

 *  kCATransitionReveal          将旧视图移开,显示下面的新视图

 */
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: