1 #import <UIKit/UIKit.h>2 3 @interface ViewController : UIViewController4 @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; //設置自動倒退，即動畫回放；默認值為NO106     107     //以下兩句是『動畫結束后回到初始狀態的現象』的解決方法；這里沒用到108     //animationGroup.removedOnCompletion = NO; //設置是否完成后從對應的所屬圖層移除他，默認為YES109     //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>