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

效果如下：

ViewController.h

1 #import <UIKit/UIKit.h>

2 

3 @interface ViewController : UIViewController

4 @property (strong, nonatomic) IBOutlet UIImageView *imgVAnimation;

5 @property (strong, nonatomic) IBOutlet UIButton *btnAnimation1;

6 @property (strong, nonatomic) IBOutlet UIButton *btnAnimation2;

7 

8 @end

ViewController.m

  1 #import "ViewController.h"

  2 

  3 @interface ViewController ()

  4 - (void)modifyLayerForButton:(UIButton *)btn;

  5 - (void)layoutUI;

  6 @end

  7 

  8 @implementation ViewController

  9 #define kCornerRadiusOfImage CGRectGetWidth(_imgVAnimation.frame)/2.0

 10 

 11 - (void)viewDidLoad {

 12     [super viewDidLoad];

 13     

 14     [self layoutUI];

 15 }

 16 

 17 - (void)didReceiveMemoryWarning {

 18     [super didReceiveMemoryWarning];

 19     // Dispose of any resources that can be recreated.

 20 }

 21 

 22 - (void)modifyLayerForButton:(UIButton *)btn {

 23     btn.layer.masksToBounds = YES;

 24     btn.layer.cornerRadius = 5.0;

 25     btn.layer.borderColor = [UIColor grayColor].CGColor;

 26     btn.layer.borderWidth = 1.0;

 27 }

 28 

 29 - (void)layoutUI {

 30     //图片视图

 31     _imgVAnimation.layer.masksToBounds = YES;

 32     _imgVAnimation.layer.cornerRadius = kCornerRadiusOfImage;

 33     _imgVAnimation.layer.borderColor = [UIColor orangeColor].CGColor;

 34     _imgVAnimation.layer.borderWidth = 2.0;

 35     

 36     //按钮

 37     [self modifyLayerForButton:_btnAnimation1];

 38     [self modifyLayerForButton:_btnAnimation2];

 39 }

 40 

 41 - (IBAction)btnAnimation1DidPush:(id)sender {

 42     //移到右下角；使用关键帧动画，移动路径为预定的贝塞尔曲线路径

 43     CGPoint fromPoint = _imgVAnimation.center;

 44     CGFloat toPointX = self.view.frame.size.width - kCornerRadiusOfImage;

 45     CGFloat toPointY = self.view.frame.size.height - kCornerRadiusOfImage;

 46     CGPoint toPoint = CGPointMake(toPointX, toPointY);

 47     CGPoint controlPoint = CGPointMake(toPointX, 0.0);

 48     

 49     UIBezierPath *path = [UIBezierPath bezierPath];

 50     [path moveToPoint:fromPoint];

 51     [path addQuadCurveToPoint:toPoint controlPoint:controlPoint];

 52     

 53     CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

 54     positionAnimation.path = path.CGPath;

 55     positionAnimation.removedOnCompletion = YES;

 56     

 57     //变小；使用基础动画

 58     CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];

 59     transformAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];

 60     transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)]; //设置 X 轴和 Y 轴缩放比例都为1.0，而 Z 轴不变

 61     transformAnimation.removedOnCompletion = YES;

 62     

 63     //透明；使用基础动画

 64     CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];

 65     opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];

 66     opacityAnimation.toValue = [NSNumber numberWithFloat:0.1];

 67     opacityAnimation.removedOnCompletion = YES;

 68     

 69     //组合效果；使用动画组

 70     CAAnimationGroup *animationGroup = [CAAnimationGroup animation];

 71     animationGroup.animations = @[ positionAnimation, transformAnimation, opacityAnimation ];

 72     animationGroup.duration = 1.0; //设置动画执行时间；这里设置为1.0秒

 73     animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; //设置媒体调速运动；默认为 kCAMediaTimingFunctionLinear，即为线型间隔；这里设置为 kCAMediaTimingFunctionEaseIn，即先慢后快，相当于有个加速度

 74     animationGroup.autoreverses = YES; //设置自动倒退，即动画回放；默认值为NO

 75     [_imgVAnimation.layer addAnimation:animationGroup forKey:nil];

 76 }

 77 

 78 - (IBAction)btnAnimation2DidPush:(id)sender {

 79     //向右移动；使用关键帧动画，移动路径为预定的直线路径

 80     CGPoint fromPoint = _imgVAnimation.center;

 81     CGPoint toPoint = CGPointMake(fromPoint.x + 100.0, fromPoint.y);

 82     

 83     UIBezierPath *path = [UIBezierPath bezierPath];

 84     [path moveToPoint:fromPoint];

 85     [path addLineToPoint:toPoint];

 86     

 87     CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

 88     positionAnimation.path = path.CGPath;

 89     positionAnimation.removedOnCompletion = YES;

 90     

 91     //旋转；使用基础动画

 92     CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];

 93     transformAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];

 94     transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 0.0, 0.0, 1.0)]; //设置沿着 Z 轴顺时针旋转90度；注意 CATransform3DMakeRotation 总是按最短路径来选择，当顺时针和逆时针的路径相同时（e.g. M_PI），会使用逆时针

 95     transformAnimation.repeatCount = 8.0; //设置动画播放重复次数；这里设置为8.0次，共720度

 96     transformAnimation.duration = 0.5; //设置动画执行时间；这里设置为0.5秒

 97     transformAnimation.cumulative = YES; //设置是否累积；默认值为NO，这里设置为YES，看起来才动画效果连贯

 98     transformAnimation.removedOnCompletion = YES;

 99     

100     //组合效果；使用动画组

101     CAAnimationGroup *animationGroup = [CAAnimationGroup animation];

102     animationGroup.animations = @[ positionAnimation, transformAnimation ];

103     animationGroup.duration = 4.0; //设置动画执行时间；这里设置为4.0秒

104     animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; //设置媒体调速运动；默认为 kCAMediaTimingFunctionLinear，即为线型间隔；这里设置为 kCAMediaTimingFunctionEaseIn，即先慢后快，相当于有个加速度

105     animationGroup.autoreverses = YES; //设置自动倒退，即动画回放；默认值为NO

106     

107     //以下两句是『动画结束后回到初始状态的现象』的解决方法；这里没用到

108     //animationGroup.removedOnCompletion = NO; //设置是否完成后从对应的所属图层移除他，默认为YES

109     //animationGroup.fillMode = kCAFillModeForwards; //设置动画填充模式；默认值为 kCAFillModeRemoved，即动画执行完就移除，变回原来的状态，这里设置为 kCAFillModeForwards，即保持向前的状态

110     [_imgVAnimation.layer addAnimation:animationGroup forKey:nil];

111 }

112 

113 @end

Main.storyboard

 1 <?xml version="1.0" encoding="UTF-8" standalone="no"?>

 2 <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">

 3     <dependencies>

 4         <deployment identifier="iOS"/>

 5         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7703"/>

 6     </dependencies>

 7     <scenes>

 8         <!--View Controller-->

 9         <scene sceneID="ufC-wZ-h7g">

10             <objects>

11                 <viewController id="vXZ-lx-hvc" customClass="ViewController" sceneMemberID="viewController">

12                     <layoutGuides>

13                         <viewControllerLayoutGuide type="top" id="jyV-Pf-zRb"/>

14                         <viewControllerLayoutGuide type="bottom" id="2fi-mo-0CV"/>

15                     </layoutGuides>

16                     <view key="view" contentMode="scaleToFill" id="kh9-bI-dsS">

17                         <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>

18                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>

19                         <subviews>

20                             <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="Emoticon_tusiji_icon2" translatesAutoresizingMaskIntoConstraints="NO" id="j2r-O5-Hj2">

21                                 <rect key="frame" x="20" y="40" width="150" height="150"/>

22                             </imageView>

23                             <button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="aiO-kP-xCF">

24                                 <rect key="frame" x="20" y="243" width="150" height="50"/>

25                                 <state key="normal" title="移到右下角变小透明">

26                                     <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>

27                                 </state>

28                                 <connections>

29                                     <action selector="btnAnimation1DidPush:" destination="vXZ-lx-hvc" eventType="touchUpInside" id="7Z2-yc-1vS"/>

30                                 </connections>

31                             </button>

32                             <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">

33                                 <rect key="frame" x="20" y="208" width="150" height="21"/>

34                                 <fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>

35                                 <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>

36                                 <nil key="highlightedColor"/>

37                             </label>

38                             <button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="hSL-o5-Ism">

39                                 <rect key="frame" x="20" y="311" width="150" height="50"/>

40                                 <state key="normal" title="旋转并向右移动">

41                                     <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>

42                                 </state>

43                                 <connections>

44                                     <action selector="btnAnimation2DidPush:" destination="vXZ-lx-hvc" eventType="touchUpInside" id="lC4-zx-uIb"/>

45                                 </connections>

46                             </button>

47                         </subviews>

48                         <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>

49                     </view>

50                     <connections>

51                         <outlet property="btnAnimation1" destination="aiO-kP-xCF" id="kSp-82-S2R"/>

52                         <outlet property="btnAnimation2" destination="hSL-o5-Ism" id="6Mz-Wd-xfN"/>

53                         <outlet property="imgVAnimation" destination="j2r-O5-Hj2" id="Gmp-iW-kaX"/>

54                     </connections>

55                 </viewController>

56                 <placeholder placeholderIdentifier="IBFirstResponder" id="x5A-6p-PRh" sceneMemberID="firstResponder"/>

57             </objects>

58         </scene>

59     </scenes>

60     <resources>

61         <image name="Emoticon_tusiji_icon2" width="150" height="150"/>

62     </resources>

63 </document>