Core Animation 动画的使用：关键帧动画、基础动画、动画组

首先让我们了解下什么是 Core Animation，Core Animation 为核心动画，他为图形渲染和动画提供了基础。使用核心动画，我们只需要设置起点、终点、关键帧等一些参数，剩下的工作核心动画会自动帮我们处理。（学过 Flash 的朋友会有种似曾相识的感觉）

核心动画开发动画的本质是将 CALayer 中的内容转换为位图从而供硬件操作，他不用消耗 CPU 资源，合理使用他能提高 App 性能。

核心动画的几大核心类：

CAAnimation「核心动画基类」：不能直接使用，他遵循并实现了 CAMediaTiming 协议，负责动画运行时间和速度的控制。

CAPropertyAnimation「属性动画基类」：不能直接使用，他通过可动画属性进行动画设置。

CAAnimationGroup「动画组」：他是一种组合模式，可以组合多个动画进行动画行为的统一控制。

CATransition「转场动画」：主要通过滤镜进行动画效果设置。

CABasicAnimation「基础动画」：通过起点和终点状态属性参数进行动画控制。

CAKeyframeAnimation「关键帧动画」：同 CABasicAnimation 一样通过属性参数进行动画控制，但不同的是他可以有多个状态控制，不单单只有起点和终点。

CABasicAnimation 和 CAKeyframeAnimation 都属于 CAPropertyAnimation，他们通过修改属性参数产生动画效果。在两个状态点中间过程的动画，可以称为「补间动画」，他由系统自动计算产生。CABasicAnimation 只有起点和终点状态，从某种角度来说，他相当于有两个关键帧的 CAKeyframeAnimation。

下面让我们通过例子，了解如何使用 CAKeyframeAnimation「关键帧动画」、CABasicAnimation「基础动画」、CAAnimationGroup「动画组」吧。

效果如下：

ViewController.h

 #import <UIKit/UIKit.h>

 @interface ViewController : UIViewController
 @property (strong, nonatomic) IBOutlet UIImageView *imgVAnimation;
 @property (strong, nonatomic) IBOutlet UIButton *btnAnimation1;
 @property (strong, nonatomic) IBOutlet UIButton *btnAnimation2;

 @end

ViewController.m

 #import "ViewController.h"

 @interface ViewController ()
 - (void)modifyLayerForButton:(UIButton *)btn;
 - (void)layoutUI;
 @end

 @implementation ViewController
 #define kCornerRadiusOfImage CGRectGetWidth(_imgVAnimation.frame)/2.0

 - (void)viewDidLoad {
     [super viewDidLoad];

     [self layoutUI];
 }

 - (void)didReceiveMemoryWarning {
     [super didReceiveMemoryWarning];
     // Dispose of any resources that can be recreated.
 }

 - (void)modifyLayerForButton:(UIButton *)btn {
     btn.layer.masksToBounds = YES;
     btn.layer.cornerRadius = 5.0;
     btn.layer.borderColor = [UIColor grayColor].CGColor;
     btn.layer.borderWidth = 1.0;
 }

 - (void)layoutUI {
     //图片视图
     _imgVAnimation.layer.masksToBounds = YES;
     _imgVAnimation.layer.cornerRadius = kCornerRadiusOfImage;
     _imgVAnimation.layer.borderColor = [UIColor orangeColor].CGColor;
     _imgVAnimation.layer.borderWidth = 2.0;

     //按钮
     [self modifyLayerForButton:_btnAnimation1];
     [self modifyLayerForButton:_btnAnimation2];
 }

 - (IBAction)btnAnimation1DidPush:(id)sender {
     //移到右下角；使用关键帧动画，移动路径为预定的贝塞尔曲线路径
     CGPoint fromPoint = _imgVAnimation.center;
     CGFloat toPointX = self.view.frame.size.width - kCornerRadiusOfImage;
     CGFloat toPointY = self.view.frame.size.height - kCornerRadiusOfImage;
     CGPoint toPoint = CGPointMake(toPointX, toPointY);
     CGPoint controlPoint = CGPointMake(toPointX, 0.0);

     UIBezierPath *path = [UIBezierPath bezierPath];
     [path moveToPoint:fromPoint];
     [path addQuadCurveToPoint:toPoint controlPoint:controlPoint];

     CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
     positionAnimation.path = path.CGPath;
     positionAnimation.removedOnCompletion = YES;

     //变小；使用基础动画
     CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
     transformAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
     transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)]; //设置 X 轴和 Y 轴缩放比例都为1.0，而 Z 轴不变
     transformAnimation.removedOnCompletion = YES;

     //透明；使用基础动画
     CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
     opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];
     opacityAnimation.toValue = [NSNumber numberWithFloat:0.1];
     opacityAnimation.removedOnCompletion = YES;

     //组合效果；使用动画组
     CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
     animationGroup.animations = @[ positionAnimation, transformAnimation, opacityAnimation ];
     animationGroup.duration = 1.0; //设置动画执行时间；这里设置为1.0秒
     animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; //设置媒体调速运动；默认为 kCAMediaTimingFunctionLinear，即为线型间隔；这里设置为 kCAMediaTimingFunctionEaseIn，即先慢后快，相当于有个加速度
     animationGroup.autoreverses = YES; //设置自动倒退，即动画回放；默认值为NO
     [_imgVAnimation.layer addAnimation:animationGroup forKey:nil];
 }

 - (IBAction)btnAnimation2DidPush:(id)sender {
     //向右移动；使用关键帧动画，移动路径为预定的直线路径
     CGPoint fromPoint = _imgVAnimation.center;
     CGPoint toPoint = CGPointMake(fromPoint.x + 100.0, fromPoint.y);

     UIBezierPath *path = [UIBezierPath bezierPath];
     [path moveToPoint:fromPoint];
     [path addLineToPoint:toPoint];

     CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
     positionAnimation.path = path.CGPath;
     positionAnimation.removedOnCompletion = YES;

     //旋转；使用基础动画
     CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
     transformAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
     transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 0.0, 0.0, 1.0)]; //设置沿着 Z 轴顺时针旋转90度；注意 CATransform3DMakeRotation 总是按最短路径来选择，当顺时针和逆时针的路径相同时（e.g. M_PI），会使用逆时针
     transformAnimation.repeatCount = 8.0; //设置动画播放重复次数；这里设置为8.0次，共720度
     transformAnimation.duration = 0.5; //设置动画执行时间；这里设置为0.5秒
     transformAnimation.cumulative = YES; //设置是否累积；默认值为NO，这里设置为YES，看起来才动画效果连贯
     transformAnimation.removedOnCompletion = YES;

     //组合效果；使用动画组
     CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
     animationGroup.animations = @[ positionAnimation, transformAnimation ];
     animationGroup.duration = 4.0; //设置动画执行时间；这里设置为4.0秒
     animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; //设置媒体调速运动；默认为 kCAMediaTimingFunctionLinear，即为线型间隔；这里设置为 kCAMediaTimingFunctionEaseIn，即先慢后快，相当于有个加速度
     animationGroup.autoreverses = YES; //设置自动倒退，即动画回放；默认值为NO

     //以下两句是『动画结束后回到初始状态的现象』的解决方法；这里没用到
     //animationGroup.removedOnCompletion = NO; //设置是否完成后从对应的所属图层移除他，默认为YES
     //animationGroup.fillMode = kCAFillModeForwards; //设置动画填充模式；默认值为 kCAFillModeRemoved，即动画执行完就移除，变回原来的状态，这里设置为 kCAFillModeForwards，即保持向前的状态
     [_imgVAnimation.layer addAnimation:animationGroup forKey:nil];
 }

 @end

Main.storyboard

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="7706" systemVersion="14E46" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="vXZ-lx-hvc">
     <dependencies>
         <deployment identifier="iOS"/>
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7703"/>
     </dependencies>
     <scenes>
         <!--View Controller-->
         <scene sceneID="ufC-wZ-h7g">
             <objects>
                 <viewController id="vXZ-lx-hvc" customClass="ViewController" sceneMemberID="viewController">
                     <layoutGuides>
                         <viewControllerLayoutGuide type="top" id="jyV-Pf-zRb"/>
                         <viewControllerLayoutGuide type="bottom" id="2fi-mo-0CV"/>
                     </layoutGuides>
                     <view key="view" contentMode="scaleToFill" id="kh9-bI-dsS">
                         <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                         <subviews>
                             <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="Emoticon_tusiji_icon2" translatesAutoresizingMaskIntoConstraints="NO" id="j2r-O5-Hj2">
                                 <rect key="frame" x="20" y="40" width="150" height="150"/>
                             </imageView>
                             <button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="aiO-kP-xCF">
                                 <rect key="frame" x="20" y="243" width="150" height="50"/>
                                 <state key="normal" title="移到右下角变小透明">
                                     <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
                                 </state>
                                 <connections>
                                     <action selector="btnAnimation1DidPush:" destination="vXZ-lx-hvc" eventType="touchUpInside" id="7Z2-yc-1vS"/>
                                 </connections>
                             </button>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="图片操作：" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="YH5-Oi-KEH">
                                 <rect key="frame" x="20" y="208" width="150" height="21"/>
                                 <fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
                                 <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                                 <nil key="highlightedColor"/>
                             </label>
                             <button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="hSL-o5-Ism">
                                 <rect key="frame" x="20" y="311" width="150" height="50"/>
                                 <state key="normal" title="旋转并向右移动">
                                     <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
                                 </state>
                                 <connections>
                                     <action selector="btnAnimation2DidPush:" destination="vXZ-lx-hvc" eventType="touchUpInside" id="lC4-zx-uIb"/>
                                 </connections>
                             </button>
                         </subviews>
                         <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
                     </view>
                     <connections>
                         <outlet property="btnAnimation1" destination="aiO-kP-xCF" id="kSp-82-S2R"/>
                         <outlet property="btnAnimation2" destination="hSL-o5-Ism" id="6Mz-Wd-xfN"/>
                         <outlet property="imgVAnimation" destination="j2r-O5-Hj2" id="Gmp-iW-kaX"/>
                     </connections>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="x5A-6p-PRh" sceneMemberID="firstResponder"/>
             </objects>
         </scene>
     </scenes>
     <resources>
         <image name="Emoticon_tusiji_icon2" width="150" height="150"/>
     </resources>
 </document>