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

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

  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

 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>