想给UIVIew上控件添加一些动画效果

如果你还不知道怎样让一张图片缓缓滑动，渐渐消失，或者是在原地翻滚，不知道怎样让一个窗口弹出的时候有一点抖动的效果不那么僵硬，那正好，今儿在下总结的内容可能刚好能帮你实现你想要的效果(⊙o⊙)哦。

首先说一下什么是动画效果，动画效果有哪些好处吧；

这里所说的动画绝对不是你在电视上看到的，有剧情的那种（当然这句可能是废话），而是为了增加用户的体验感，通过对控件的属性或者layer进行一些处理达到美化界面的效果，主要是让界面看起来更加的生动，不会太枯燥。想象一下，你在用读书软件时候的翻页效果，就能被称为一种简单的动画，好了，题外话就说到这儿了。至于怎样去做出一些动画，这里有两个方法可供你使用，一个UIView 的animation方法，一个是使用CAAnimation的几个子类来达到目的，首先先来看一下UIView是怎样实现动画效果的。

在iOS 4之前，可以通过UIView调用以下方法来达到动画效果

 

    [UIView beginAnimations:nil context:nil];//此方法为动画开始的方法，当然有开始就要有结束，不要忘了哈

    [UIView setAnimationDuration:2.0];    //设置动画的持续时间--在此时间内，对象到达你重新设定的位置，或者渐变为你重新赋予的颜色

    [UIView setAnimationDelay:0.0];    //设置动画是否需要延迟--触发动画时间后，延迟多少面开始实现动画

    [UIView setAnimationRepeatCount:5];    //设置动画重复的次数--同一个过程重复的次数

    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];    //设置动画变化曲线--此处为一枚举值，提供了几个样式可供选择

    [UIView setAnimationBeginsFromCurrentState:YES];   //是否从当前状态开始

    [UIView setAnimationRepeatAutoreverses:YES];    //是否反转--如果是重复播放动画效果的情况下，此处为YES可以使动画倒放

    [UIView setAnimationDelegate:self];    //设置代理-- 此处代理并不需要服从协议而是为了能够添加下面两个方法

    [UIView setAnimationWillStartSelector:@selector(handleStart)];//动画将要开始时 添加方法（具体添加什么随自己高兴）

    [UIView setAnimationDidStopSelector:@selector(handleStop)];    //结束动画时 添加方法（同上）

    *********

    此间可以写要实现动画效果的控件的，改变后的属性。比alpha 从1.0（系统默认）--》0.5；

    *********

    [UIView commitAnimations];//动画结束。与第一句动画开始对应

 

下面来说一下其改进版的方法，也就是iOS加入Block后：

[UIView animateWithDuration:4 animations:^{

        self.changeView.backgroundColor = [UIColor magentaColor];

        self.changeView.center = CGPointMake(self.changeView.center.x, self.changeView.center.y + 200);

        self.changeView.bounds = CGRectMake(0, 0, 50, 50);

    } completion:^(BOOL finished) {

        [self.changeView removeFromSuperview];

    }];-----Duration后面填的是动画持续时间----animations后面内填入上一段***号间相同内容即可。。completion后面填动画结束时的方法，你是要删除动画页面，还是让其隐藏，就随自己高兴了。

[UIView animateWithDuration:5 delay:0.5 options:UIViewAnimationOptionBeginFromCurrentState animations:^{

        self.changeView.transform = CGAffineTransformRotate(self.changeView.transform, 1.0);

    } completion:^(BOOL finished) {

        

    }];----这一部分中比上一个多了一个delay，后面跟的参数是延迟时间。

如果想要实现弹簧效果，请往下看：

[UIView animateWithDuration:3 delay:0.0 usingSpringWithDamping:0.2 initialSpringVelocity:10.0 options:UIViewAnimationOptionTransitionCurlUp animations:^{

        CGPoint center = self.textLabel.center;

        center.y += 50;

       self.textLabel.center = center;

    } completion:^(BOOL finished) {

    }];-----如果前面的两个方法你已经试过了，那这个弹簧效果就不难做了，Damping后面跟的是弹簧的强度参数，Velocity后面跟的是初始速度，options后面跟的是动画效果参数，为一个枚举值。在触发方法里调用就好了。大括号内为你想改变的属性效果，可以拉伸，旋转，缩放等等。

 

以上为两种调用UIView方法，通过改变控件的位置，大小，透明度，角度来实现动画的方法，现在插播一种过渡动画，即前言里说的翻页时的效果。

过渡效果也是可以由UIView的两个方法去实现：

UIView *view = [[UIView alloc] initWithFrame:self.view.bounds];

    view.backgroundColor = [UIColor cyanColor];

   [UIView transitionFromView:self.view toView:view duration:2.0 options:UIViewAnimationOptionTransitionCrossDissolve completion:^(BOOL finished) {      

   }];----此方法需要添加两个视图，即从A到B.

    [UIView transitionWithView:self.changeView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{    

    } completion:^(BOOL finished) { 

    }];----此方法为直接添加到对应视图上得效果，Options后面依然是枚举值，系统提供了几种样式可供选择。

说完了UIView属性动画，发挥你的想象力，应该已经能实现很多效果了，下面在来介绍一种通过对UILayer属性进行操作以达到动画效果的方式。

主要用到的是：

CABasicAnimation

CAKeyframeAnimation

CAAnimationGroup

CATransition

废话不多说了直接上代码：（以下这四个方法是为了方便理解写的）

#pragma mark - UILayer Animation -

- (void)handleAnimationBasic{

    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position.x"];//position为位置，此处举例是通过改变横坐标来实现云在天上瓢的效果。

    basicAnimation.fromValue = @(0);//此处设置初始值（即横坐标值）

    basicAnimation.toValue = @(500);//结束值

    basicAnimation.duration = 6.0;//动画时长，即图形跑完这段距离用的时间

    basicAnimation.repeatCount = 1000;//重复次数

    [self.cloud.layer addAnimation:basicAnimation forKey:nil];    //此处一定不要忘记添加到你想实现动画效果的视图上，forKey是添加标记

}

 

- (void)handleAnimationKeyFrame{//上一个是直线，此处为曲线运动。

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

    CGPoint point1 = self.cloud.center;

    CGPoint point2 = CGPointMake(200, 100);

    CGPoint point3 = CGPointMake(375, 180);

    NSValue *value1 = [NSValue valueWithCGPoint:point1];//如果没有使用过NSValue可以查看API

    NSValue *value2 = [NSValue valueWithCGPoint:point2];

    NSValue *value3 = [NSValue valueWithCGPoint:point3];

    keyFrame.values = @[value1,value2,value3,value1];

    keyFrame.duration = 4.0;

    keyFrame.repeatCount = 10000;

    [self.cloud.layer addAnimation:keyFrame forKey:nil];

}

 

- (void)handleAnimationGroup{此处例子是设定一个气球的运动轨迹。

    CAKeyframeAnimation *keyFrame1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];    //沿圆形轨迹移动

    CGPoint point1 = CGPointMake(self.ballon.center.x, self.ballon.center.y - self.view.frame.size.height / 4);

    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:point1 radius:self.view.frame.size.height / 4 startAngle:M_PI_2 endAngle:-M_PI_2 * 4 / 3 clockwise:NO];    //贝塞尔曲线

    keyFrame1.path = bezierPath.CGPath; //以贝塞尔曲线为移动的路径，path即为路径

    keyFrame1.repeatCount = 5;

    CAKeyframeAnimation *keyFrame2 = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];

    keyFrame2.values = @[@(1.0),@(1.2),@(1.4),@(1.6),@(1.8),@(1.6),@(1.4),@(1.2),@(1.0)];//这里是改变缩放值，可实现简单的远景效果

    keyFrame2.repeatCount = 5;

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];

    animationGroup.animations = @[keyFrame1,keyFrame2];//不要忘了添加进CAAnimationGroup的对象中

    animationGroup.duration = 10;

    animationGroup.repeatCount = 20;

    [self.ballon.layer addAnimation:animationGroup forKey:nil];

}

- (void)handleAnimationCATransition{//类似过度效果。

    CATransition *transition = [CATransition animation];

    transition.type = @"oglFlip";type的样式，可以用系统提供的枚举值，也可以使用如下几种样式。

    *******

    

*  类型：这些类型可供选择。

     kCATransitionMoveIn

     kCATransitionPush

     kCATransitionFade

     kCATransitionReveal

     @"cube"

     @"suckEffect"

     @"pageCurl"

     @"oglFlip"

     @"rippleEffect"

     @"pageUnCurl"

     @"cameraIrisHollowOpen"

     @"cameraIrisHollowClose"

    *******

    transition.subtype = kCATransitionFromLeft;

    transition.duration = 1.0;

    transition.repeatCount = 1000;

    //将动画添加到layer上

    [self.ballon.layer addAnimation:transition forKey:nil];

}

以上即为今天分享全部内容，个人总结，仅供参考交流，如果疑问或意见可随时联系。

分享不是为了教会别人什么，而是，让有需要的人花最少的时间看到自己想看的东西。如果你看到了这里说明，这里面可能有你想了解的内容，我会为此倍感荣幸。

 

转载于:https://www.cnblogs.com/SE-section/p/4862127.html