iOS 圖片的同時旋轉(zhuǎn)縮放

最近項目中的一個小需求，要求圖片同時進行旋轉(zhuǎn)和縮放兩種操作，做一個簡單的總結(jié)，先看下效果圖：

創(chuàng)新互聯(lián)專注于固鎮(zhèn)企業(yè)網(wǎng)站建設,響應式網(wǎng)站開發(fā),商城建設。固鎮(zhèn)網(wǎng)站建設公司,為固鎮(zhèn)等地區(qū)提供建站服務。全流程按需求定制開發(fā)，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

originalPoint 為旋轉(zhuǎn)縮放的參考點比例，默認是按視圖中心旋轉(zhuǎn)，即

self.originalPoint = CGPointMake(0.5, 0.5)

然后就是正常的操作，注意，在縮放的時候，四個角的控制按鈕要相反的放縮，保證大小不變，如果有其他元素，同理。

在控制按鈕上添加平移手勢，記錄每一次平移的點 ctrlPoint ，以及上一個平移點，就是 self.lastCtrlPoint

旋轉(zhuǎn)的角度，根據(jù)上一個平移點和視圖中心點的角度，與當前平移點和視圖中心點的角度偏差，進行transform處理。

縮放也是類似，計算上一個平移點與中心點的距離 preDistance ，以及當前平移點和中心點的距離 newDistance ，那么兩次平移距離的比例，就是視圖縮放的比例。這里做了一個判斷，在縮小到一半時停止繼續(xù)變小。

GitHub：

ios圖片旋轉(zhuǎn)

根據(jù)Orientation判斷圖片的方向，在把圖片旋轉(zhuǎn)回來

1:0°,

3:180°

6:順時針90°,

8:逆時針90°

也可以利用 exif.js快速處理

iOS核心動畫之圖片旋轉(zhuǎn)、脈沖動畫、水波紋動畫

下邊有整體效果，希望能幫助到你！

定義一個視圖

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

一、圖片旋轉(zhuǎn)三種方式：

第一種：根據(jù)CGPathAddArc 繪畫圖片旋轉(zhuǎn)路線：

/*

1、#CGMutablePathRef? _Nullable path# 路線

2、確定圓心#CGFloat x# #CGFloat y#

3、半徑#CGFloat radius#

4、起點 #CGFloat startAngle# 結(jié)束 #CGFloat endAngle#

*/

CGPathAddArc(path, NULL, self.view.center.x, self.view.center.y, 0.1, 0, M_PI *2, 1);

CAKeyframeAnimation * frameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

frameAnimation.path= path;

CGPathRelease(path);

frameAnimation.delegate=self;

frameAnimation.duration=10;// 持續(xù)時間

frameAnimation.repeatCount = -1;// 重復次數(shù) 如果為0表示不執(zhí)行,-1表示不限制次數(shù),默認為0

frameAnimation.autoreverses=NO;

frameAnimation.rotationMode = kCAAnimationRotateAuto;// 樣式

frameAnimation.fillMode = kCAFillModeForwards;

[self.imageView.layeraddAnimation:frameAnimationforKey:nil];

第二種：

[UIView animateWithDuration:20.0f animations:^{

? ? if (self.imageView) {

? ? ? ?self.imageView.transform = CGAffineTransformMakeRotation(M_PI*5);

?}

}];

第三種：

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

//默認是順時針效果，若將fromValue和toValue的值互換，則為逆時針效果

animation.fromValue = [NSNumber numberWithFloat:0.f];

animation.toValue = [NSNumber numberWithFloat: M_PI *2];

animation.duration=30;

animation.autoreverses=NO;

animation.fillMode = kCAFillModeForwards;

animation.repeatCount = MAXFLOAT; //如果這里想設置成一直自旋轉(zhuǎn)，可以設置為MAXFLOAT，否則設置具體的數(shù)值則代表執(zhí)行多少次

[self.imageView.layer addAnimation:animation forKey:nil];

持續(xù)旋轉(zhuǎn)：

@property(nonatomic,assign) double angle;

CGAffineTransform endAngle = CGAffineTransformMakeRotation(self.angle * (M_PI / 180.0f));

[UIView animateWithDuration:0.01 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{

? ? self.imageView.transform= endAngle;

}completion:^(BOOLfinished) {

? ? self.angle+=10;

? ? [self startAnimation2];// 上邊任意一種方法回調(diào)

}];

// 當視圖停止轉(zhuǎn)動時調(diào)用此方法重新轉(zhuǎn)動

-(void)endAnimation {

self.angle+=4;

[self startAnimation2];

}

二、水波紋動畫

屬性定義：幾個波紋定義幾個X 寬度可以用一個 也可以分開定義

@property (weak, nonatomic) IBOutlet UIView *backView;

@property(nonatomic,strong) CAShapeLayer * waterLayer1;

@property(nonatomic,strong) CAShapeLayer * waterLayer2;

@property(nonatomic,assign) CGFloat x;

@property(nonatomic,assign) CGFloat y;

@property(nonatomic,assign) CGFloat waveHeight;

@property(nonatomic,assign) CGFloat waveWidth;

@property(nonatomic,assign) int speedWave;

@property(nonatomic,assign) CGFloat waveAmplitude;

@property(nonatomic,assign) int speed;

@property(nonatomic,assign) CGFloat speed_H;

@property(nonatomic,assign) CGFloat offsetXT;

-（instancetype）init {// 給個初始值，下邊被除數(shù)不能為0

if （self == [super init]） {

self.speedWave = 3;

self.waveAmplitude = 3;

self.speed=3;

self.waveWidth = self.backView.frame.size.width;

self.waveHeight = self.backView.frame.size.height;

self.speed_H = self.backView.frame.size.height-20;

}

return self;

}

-(void)waterAnimation {

//? ? CGFloat y = _waveHeight*sinf(2.5*M_PI*i/_waveWidth + 3*_offset*M_PI/_waveWidth + M_PI/4) + _h;

self.waterLayer1 = [CAShapeLayer layer];

self.waterLayer1.fillColor = [UIColor yellowColor].CGColor;

[self.backView.layer addSublayer:self.waterLayer1];

self.waterLayer2 = [CAShapeLayer layer];

self.waterLayer2.fillColor = [UIColor redColor].CGColor;

[self.backView.layer addSublayer: self.waterLayer2];

//創(chuàng)建一個新的 CADisplayLink 對象，把它添加到一個runloop中，并給它提供一個 target 和selector 在屏幕刷新的時候調(diào)用

//CADispayLink相當于一個定時器 會一直繪制曲線波紋 看似在運動，其實是一直在繪畫不同位置點的余弦函數(shù)曲線

CADisplayLink * waveDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(getCurrentWave)];

[waveDisplayLinkaddToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

}

-(void)getCurrentWave {

// x位置

self.x+=self.speed;

//聲明第一條波曲線的路徑

CGMutablePathRef path = CGPathCreateMutable();

//設置起始點

CGPathMoveToPoint(path,nil,0,self.waveHeight);

CGFloaty =0.f;

//第一個波紋的公式

for(floatx =0.f; x =self.waveWidth; x++) {

? ? y =self.waveAmplitude*sin((200/self.waveWidth) * (x *M_PI/70) -self.x*M_PI/170) +self.speed_H*1;

? ? CGPathAddLineToPoint(path,nil, x, y);

? ? x++;

}

//把繪圖信息添加到路徑里

CGPathAddLineToPoint(path, nil, self.waveWidth, self.backView.frame.size.height);

CGPathAddLineToPoint(path, nil, 0, self.backView.frame.size.height);

//結(jié)束繪圖信息

CGPathCloseSubpath(path);

self.waterLayer1.path= path;

//釋放繪圖路徑

CGPathRelease(path);

[self? ? X2];

}

/// 第二條水波

-(void)X2 {

self.offsetXT += self.speedWave;

CGMutablePathRef pathT = CGPathCreateMutable();

CGPathMoveToPoint(pathT,nil,0,self.waveHeight+50);

CGFloatyT =0.f;

for(floatx =0.f; x =self.waveWidth; x++) {

? ? yT =self.waveAmplitude*1.6*sin((200/self.waveWidth) * (x *M_PI/100) -self.offsetXT*M_PI/170) +self.waveHeight;

? ? CGPathAddLineToPoint(pathT,nil, x, yT-10);

}

CGPathAddLineToPoint(pathT, nil, self.waveWidth, self.backView.frame.size.height);

CGPathAddLineToPoint(pathT, nil, 0, self.backView.frame.size.height);

CGPathCloseSubpath(pathT);

self.waterLayer2.path= pathT;

CGPathRelease(pathT);

}

三、脈沖效果動畫

@property (weak, nonatomic) IBOutlet UIView *pulseView;

@property(nonatomic,strong) CAShapeLayer * pulseLayer;

-(void)pulseAnimation {

CGFloat width = self.pulseView.bounds.size.width;

self.pulseLayer = [CAShapeLayer layer];

self.pulseLayer.bounds=CGRectMake(0,0, width, width);

self.pulseLayer.position=CGPointMake(width/2, width/2);

self.pulseLayer.backgroundColor = [UIColor clearColor].CGColor;

self.pulseLayer.path = [UIBezierPath bezierPathWithOvalInRect:self.pulseLayer.bounds].CGPath;

self.pulseLayer.fillColor = [UIColor colorWithRed: 0.3490196078 green:0.737254902 blue:0.8039215686 alpha:1].CGColor;

self.pulseLayer.opacity = 0.0;

CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];

replicatorLayer.bounds=CGRectMake(0,0, width, width);

replicatorLayer.position=CGPointMake(width/2, width/2);

replicatorLayer.instanceCount=4;// 復制層

replicatorLayer.instanceDelay=1;/// 頻率

[replicatorLayeraddSublayer:self.pulseLayer];

[self.pulseView.layeraddSublayer:replicatorLayer];

[self.pulseView.layerinsertSublayer:replicatorLayeratIndex:0];

}

-(void)startPulseAnimation {

CABasicAnimation * opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];

opacityAnimation.fromValue=@20;// 起始值 （strong 修飾的id值）

opacityAnimation.toValue=@30;// 結(jié)束值（strong 修飾的id值）

CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];

scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 0.0, 0.0, 0.0)];

scaleAnimation.toValue =[NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 1.0)];

CAAnimationGroup * groupAnimation = [CAAnimationGroup animation];

groupAnimation.animations=@[opacityAnimation, scaleAnimation];

groupAnimation.duration=20;

groupAnimation.autoreverses=NO;

groupAnimation.repeatCount=HUGE;

[self.pulseLayeraddAnimation:groupAnimationforKey:nil];

}

在此附上效果：

聽說有好得三方庫，我還沒有去找過，歡迎各位大佬推薦一個優(yōu)質(zhì)的三方。。。。。

喜歡的朋友點個贊唄！