你的位置:首页 > 操作系统

[操作系统]Core Animation 动画的使用:关键帧动画、基础动画、动画组


效果如下:

ViewController.h

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

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; //设置自动倒退,即动画回放;默认值为NO106   107   //以下两句是『动画结束后回到初始状态的现象』的解决方法;这里没用到108   //animationGroup.removedOnCompletion = NO; //设置是否完成后从对应的所属图层移除他,默认为YES109   //animationGroup.fillMode = kCAFillModeForwards; //设置动画填充模式;默认值为 kCAFillModeRemoved,即动画执行完就移除,变回原来的状态,这里设置为 kCAFillModeForwards,即保持向前的状态110   [_imgVAnimation.layer addAnimation:animationGroup forKey:nil];111 }112 113 @end

Main.storyboard

 1 <??> 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>