效果如下:
ViewController.h
1#import<UIKit/UIKit.h>23@interfaceViewController : UIViewController4@PRoperty (strong, nonatomic) IBOutlet UIImageView *imgVAnimation;5@property (strong, nonatomic) IBOutlet UIButton *btnAnimation1;6@property (strong, nonatomic) IBOutlet UIButton *btnAnimation2;78@end
ViewController.m
1#import"ViewController.h"23@interfaceViewController ()4- (void)modifyLayerForButton:(UIButton *)btn;5- (void)layoutUI;6@end78@implementationViewController9#definekCornerRadiusOfImage CGRectGetWidth(_imgVAnimation.frame)/2.01011- (void)viewDidLoad {12[super viewDidLoad];1314[self layoutUI];15}1617- (void)didReceiveMemoryWarning {18[super didReceiveMemoryWarning];19//Dispose of any resources that can be recreated.20}2122- (void)modifyLayerForButton:(UIButton *)btn {23btn.layer.masksToBounds =YES;24btn.layer.cornerRadius =5.0;25btn.layer.borderColor =[UIColor grayColor].CGColor;26btn.layer.borderWidth =1.0;27}2829- (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;3536//按钮37[self modifyLayerForButton:_btnAnimation1];38[self modifyLayerForButton:_btnAnimation2];39}4041- (IBAction)btnAnimation1DidPush:(id)sender {42//移到右下角;使用关键帧动画,移动路径为预定的贝塞尔曲线路径43CGPoint fromPoint =_imgVAnimation.center;44CGFloat toPointX = self.view.frame.size.width -kCornerRadiusOfImage;45CGFloat toPointY = self.view.frame.size.height -kCornerRadiusOfImage;46CGPoint toPoint =CGPointMake(toPointX, toPointY);47CGPoint controlPoint = CGPointMake(toPointX,0.0);4849UIBezierPath *path =[UIBezierPath bezierPath];50[path moveToPoint:fromPoint];51[path addQuadCurveToPoint:toPoint controlPoint:controlPoint];5253CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];54positionAnimation.path =path.CGPath;55positionAnimation.removedOnCompletion =YES;5657//变小;使用基础动画58CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];59transformAnimation.fromValue =[NSValue valueWithCATransform3D:CATransform3DIdentity];60transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1,0.1,1.0)];//设置 X 轴和 Y 轴缩放比例都为1.0,而 Z 轴不变61transformAnimation.removedOnCompletion =YES;6263//透明;使用基础动画64CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];65opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];66opacityAnimation.toValue = [NSNumber numberWithFloat:0.1];67opacityAnimation.removedOnCompletion =YES;6869//组合效果;使用动画组70CAAnimationGroup *animationGroup =[CAAnimationGroup animation];71animationGroup.animations =@[ positionAnimation, transformAnimation, opacityAnimation ];72animationGroup.duration =1.0;//设置动画执行时间;这里设置为1.0秒73animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];//设置媒体调速运动;默认为 kCAMediaTimingFunctionLinear,即为线型间隔;这里设置为 kCAMediaTimingFunctionEaseIn,即先慢后快,相当于有个加速度74animationGroup.autoreverses = YES;//设置自动倒退,即动画回放;默认值为NO75[_imgVAnimation.layer addAnimation:animationGroup forKey:nil];76}7778- (IBAction)btnAnimation2DidPush:(id)sender {79//向右移动;使用关键帧动画,移动路径为预定的直线路径80CGPoint fromPoint =_imgVAnimation.center;81CGPoint toPoint = CGPointMake(fromPoint.x +100.0, fromPoint.y);8283UIBezierPath *path =[UIBezierPath bezierPath];84[path moveToPoint:fromPoint];85[path addLineToPoint:toPoint];8687CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];88positionAnimation.path =path.CGPath;89positionAnimation.removedOnCompletion =YES;9091//旋转;使用基础动画92CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];93transformAnimation.fromValue =[NSValue valueWithCATransform3D:CATransform3DIdentity];94transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2,0.0,0.0,1.0)];//设置沿着 Z 轴顺时针旋转90度;注意 CATransform3DMakeRotation 总是按最短路径来选择,当顺时针和逆时针的路径相同时(e.g. M_PI),会使用逆时针95transformAnimation.repeatCount =8.0;//设置动画播放重复次数;这里设置为8.0次,共720度96transformAnimation.duration =0.5;//设置动画执行时间;这里设置为0.5秒97transformAnimation.cumulative = YES;//设置是否累积;默认值为NO,这里设置为YES,看起来才动画效果连贯98transformAnimation.removedOnCompletion =YES;99100//组合效果;使用动画组101CAAnimationGroup *animationGroup =[CAAnimationGroup animation];102animationGroup.animations =@[ positionAnimation, transformAnimation ];103animationGroup.duration =4.0;//设置动画执行时间;这里设置为4.0秒104animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];//设置媒体调速运动;默认为 kCAMediaTimingFunctionLinear,即为线型间隔;这里设置为 kCAMediaTimingFunctionEaseIn,即先慢后快,相当于有个加速度105animationGroup.autoreverses = YES;//设置自动倒退,即动画回放;默认值为NO106107//以下两句是『动画结束后回到初始状态的现象』的解决方法;这里没用到108//animationGroup.removedOnCompletion = NO;//设置是否完成后从对应的所属图层移除他,默认为YES109//animationGroup.fillMode = kCAFillModeForwards;//设置动画填充模式;默认值为 kCAFillModeRemoved,即动画执行完就移除,变回原来的状态,这里设置为 kCAFillModeForwards,即保持向前的状态110[_imgVAnimation.layer addAnimation:animationGroup forKey:nil];111}112113@end
Main.storyboard
1<?xmlversion="1.0" encoding="UTF-8" standalone="no"?>2<documenttype="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<deploymentidentifier="iOS"/>5<plugInidentifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin"version="7703"/>6</dependencies>7<scenes>8<!--View Controller-->9<scenesceneID="ufC-wZ-h7g">10<objects>11<viewControllerid="vXZ-lx-hvc"customClass="ViewController"sceneMemberID="viewController">12<layoutGuides>13<viewControllerLayoutGuidetype="top"id="jyV-Pf-zRb"/>14<viewControllerLayoutGuidetype="bottom"id="2fi-mo-0CV"/>15</layoutGuides>16<viewkey="view"contentMode="scaleToFill"id="kh9-bI-dsS">17<rectkey="frame"x="0.0"y="0.0"width="600"height="600"/>18<autoresizingMaskkey="autoresizingMask"flexibleMaxX="YES"flexibleMaxY="YES"/>19<subviews>20<imageViewuserInteractionEnabled="NO"contentMode="scaleToFill"horizontalHuggingPriority="251"verticalHuggingPriority="251"fixedFrame="YES"image="Emoticon_tusiji_icon2"translatesAutoresizingMaskIntoConstraints="NO"id="j2r-O5-Hj2">21<rectkey="frame"x="20"y="40"width="150"height="150"/>22</imageView>23<buttonopaque="NO"contentMode="scaleToFill"fixedFrame="YES"contentHorizontalAlignment="center"contentVerticalAlignment="center"buttonType="roundedRect"lineBreakMode="middleTruncation"translatesAutoresizingMaskIntoConstraints="NO"id="aiO-kP-xCF">24<rectkey="frame"x="20"y="243"width="150"height="50"/>25<statekey="normal"title="移到右下角变小透明">26<colorkey="titleShadowColor"white="0.5"alpha="1"colorSpace="calibratedWhite"/>27</state>28<connections>29<actionselector="btnAnimation1DidPush:"destination="vXZ-lx-hvc"eventType="touchUpInside"id="7Z2-yc-1vS"/>30</connections>31</button>32<labelopaque="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<rectkey="frame"x="20"y="208"width="150"height="21"/>34<fontDescriptionkey="fontDescription"type="boldSystem"pointSize="17"/>35<colorkey="textColor"cocoaTouchSystemColor="darkTextColor"/>36<nilkey="highlightedColor"/>37</label>38<buttonopaque="NO"contentMode="scaleToFill"fixedFrame="YES"contentHorizontalAlignment="center"contentVerticalAlignment="center"buttonType="roundedRect"lineBreakMode="middleTruncation"translatesAutoresizingMaskIntoConstraints="NO"id="hSL-o5-Ism">39<rectkey="frame"x="20"y="311"width="150"height="50"/>40<statekey="normal"title="旋转并向右移动">41<colorkey="titleShadowColor"white="0.5"alpha="1"colorSpace="calibratedWhite"/>42</state>43<connections>44<actionselector="btnAnimation2DidPush:"destination="vXZ-lx-hvc"eventType="touchUpInside"id="lC4-zx-uIb"/>45</connections>46</button>47</subviews>48<colorkey="backgroundColor"white="1"alpha="1"colorSpace="custom"customColorSpace="calibratedWhite"/>49</view>50<connections>51<outletproperty="btnAnimation1"destination="aiO-kP-xCF"id="kSp-82-S2R"/>52<outletproperty="btnAnimation2"destination="hSL-o5-Ism"id="6Mz-Wd-xfN"/>53<outletproperty="imgVAnimation"destination="j2r-O5-Hj2"id="Gmp-iW-kaX"/>54</connections>55</viewController>56<placeholderplaceholderIdentifier="IBFirstResponder"id="x5A-6p-PRh"sceneMemberID="firstResponder"/>57</objects>58</scene>59</scenes>60<resources>61<imagename="Emoticon_tusiji_icon2"width="150"height="150"/>62</resources>63</document>