效果如下：
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>
时间： 2024-10-19 02:27:01