手勢與動畫效果


前沿 :

        最近重新做了一個手勢的demo,其中有“點擊”,“長按”,“旋轉”,“拉升”等等在這里就不過多說明了,這些手勢都是我們手機上經常會用到的功能,所這部分內容還是比較重要的廢話也不多說了-上代碼。有些同樣的代碼小編只會寫一遍注釋。

等等---我忘記說了,在上代碼之前我們先看看小編的Assets.xcassets中的內容,這個里面放的都是圖片

    

 現在如上面2張圖片可以看出在Assets.xcassets中 有23張圖片,有人會問要這么多圖片有什么用,其是也沒什么用處,小編在這里只是想實現一個動畫效果而已,那么在這里可以為大家普及一下知識。在我們所看到的動畫效果中,其實就是一張張圖片在不停切換,只不過速度太快了,我們的肉眼識別不出來而已,所以感覺就是在動。小編早這里就是想實現一個人在不停地奔跑的動畫效果,所以有23張圖片,當然你只要一張圖片也行。------咱們的標貼叫“手勢與動畫效果”,總得帶點動畫吧😁。

----感覺說的有點多了,下面正式上代碼。

在viewcontroller.m中

 

@interface ViewController ()<UIGestureRecognizerDelegate>
@property (nonatomic,strong) UIImageView *imageview;


@end

創建一個UIImageView對象,作用是放圖片。

首先我們要添加一個UIGestureRecognizerDelegate這個委托協議,我們要用到它的一個委托方法,

-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer

這個委托方法的作用就是檢測你的手勢,打個比方來說:有個拖動的手勢和一個滑動的手勢,那么怎么區分開來我是拖動還是滑動呢,這時就需要這個檢測方法來進行判斷了。

//遵守UIGestureRecognizerDelegate協議,作用是檢測手勢
-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
    
    if ([gestureRecognizer isKindOfClass:[UIPinchGestureRecognizer class]] && [otherGestureRecognizer isKindOfClass:[UIRotationGestureRecognizer class]]) {
        return YES;
    }
    
    return NO;
    
}

以上是這個檢測方法的實現代碼。

- (void)viewDidLoad {
    [super viewDidLoad];
    //定義view的背景顏色
    self.view.backgroundColor=[UIColor redColor];
    //創建一個數組來放圖片
    NSMutableArray *imageArray=[NSMutableArray arrayWithCapacity:0];
    //把Assets.xcassets的圖片全部放入這個數字中
    imageArray=[NSMutableArray arrayWithObjects:
                [UIImage imageNamed:@"timg-1"],[UIImage imageNamed:@"timg-2"],
                [UIImage imageNamed:@"timg-3"],[UIImage imageNamed:@"timg-4"],
                [UIImage imageNamed:@"timg-5"],[UIImage imageNamed:@"timg-6"],
                [UIImage imageNamed:@"timg-7"],[UIImage imageNamed:@"timg-8"],
                [UIImage imageNamed:@"timg-9"],[UIImage imageNamed:@"timg-10"],
                [UIImage imageNamed:@"timg-11"],[UIImage imageNamed:@"timg-12"],
                [UIImage imageNamed:@"timg-13"],[UIImage imageNamed:@"timg-14"],
                [UIImage imageNamed:@"timg-15"],[UIImage imageNamed:@"timg-16"],
                [UIImage imageNamed:@"timg-17"],[UIImage imageNamed:@"timg-18"],
                [UIImage imageNamed:@"timg-19"],[UIImage imageNamed:@"timg-20"],
                [UIImage imageNamed:@"timg-21"],[UIImage imageNamed:@"timg-22"],
                [UIImage imageNamed:@"timg-23"], nil ];
    //設置UIimageView的坐標與大小(寬高)
    imageview=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    //設置在UIimageView中第一張圖片是數組的第一個對象
    imageview.image=[imageArray firstObject];
    //設置動畫效果
    imageview.animationImages=imageArray;
    //設置播放速度0.0f-1.0f    1為正常速度,越小速度越快
    imageview.animationDuration=0.2f;
    //設置圖片可以編輯(在下面的一些手勢需要)
    imageview.userInteractionEnabled=YES;
    //開始播放
    [imageview startAnimating];
    //在view中添加一個UIimageVIew
    [self.view addSubview:imageview];
    
    //手勢
    [self Gesture];
    
    // Do any additional setup after loading the view, typically from a nib.
}

在這小編先解釋一下,我們設置的view背景顏色為紅色,但是根本沒有紅色,那是因為view被UIImageView給擋了,

imageview=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

這里小編把 UIImageView的寬高設置為和view的寬高一樣大小。別急等下面我們講解手勢的時候,比如拖動,縮放等,就可以看到view了

這串代碼小編就不多說了,每一行都有注視說明,到了這一步小編的動畫效果就出來了:

 

怎么說呢,小編其實是想做一個GIF圖的,可是在其他電腦上加載不出來,不知道是不是太大的緣故,哎!!沒辦法小編就發3張圖片給大家湊合湊合吧。

手勢小知識:

UIGestureRecognizer將一些和手勢操作相關的方法抽象了出來,但它本身並不實現什么手勢我們也不會用到他,所以在開發中過程中,我們一般不會直接使用UIGestureRecognizer的對象,而是通過其子類進行實例化並實現手勢的功能。以下是幾種手勢

UITapGestureRecognizer     點擊手勢
UIPinchGestureRecognizer   縮放手勢
UIRotationGestureRecognizer  旋轉手勢
UISwipeGestureRecognizer   滑動手勢
UIPanGestureRecognizer     拖動手勢
UILongPressGestureRecognizer  長按手勢

一下是手勢的代碼:

 1)點擊一下

    UITapGestureRecognizer *TapGestureRecognizer=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(TapGesture:)];
    //設置手指的個數為1個
    TapGestureRecognizer.numberOfTouchesRequired=1;
    //遵守UIGestureRecognizerDelegate協議
    TapGestureRecognizer.delegate=self;
    //添加這個手勢到UIimageView中
    [imageview addGestureRecognizer:TapGestureRecognizer];
-(void)TapGesture:(UITapGestureRecognizer *)Tap{
    NSLog(@"Tap------>%@",Tap);
    //判斷UIimageView是否在動畫中
    if (imageview.isAnimating) {
        [imageview stopAnimating];
    }else{
        [imageview startAnimating];
    }
//    if (Tap.state==UIGestureRecognizerStateEnded) {
//        [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
//            CGPoint point=self.view.center;
//            
//            Tap.view.center =CGPointMake(point.x, point.y-100) ;
//    
//                    } completion:nil];
//        
//        
//        [UIView animateWithDuration:1 delay:1 options:UIViewAnimationOptionCurveEaseOut animations:^{
//            CGPoint point=self.view.center;
//            
//            Tap.view.center =CGPointMake(point.x, point.y+100);
//            CGPoint oo=CGPointMake(point.x, point.y+100);
//            }
//            
//        } completion:nil];

//  }
    
}
numberOfTouchesRequired // 手指數量個數;
numberOfTapsRequired // 連續輕拍次數;
-(void)TapGesture:(UITapGestureRecognizer *)Tap這個方法是自定義的,主要實現點擊后的效果,在這方中有一大串注釋過的代碼,其實就是實現一個動作效果而已,可以忽略,當然有興趣的可以去掉注釋,看看效果。這串代碼很少,其實就是一個判斷是否在動畫而已。

2)拖動效果
    UIPanGestureRecognizer *PanGestureRecognizer=[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(PanGesture:)];
    PanGestureRecognizer.delegate=self;
    [imageview addGestureRecognizer:PanGestureRecognizer];
 
        
-(void)PanGesture:(UIPanGestureRecognizer *)Pan{
    NSLog(@"Pan------>%@",Pan);
    //view上可以放控件,那么這個view就是這些控件的superView.而UIWindow上可以疊一層又一層的view,UIWindow就是這些view的superView.先放上去的index為0,然后依次累加
    CGPoint point=[Pan translationInView:Pan.view.superview];
    //中心點
    CGPoint center=imageview.center;
    //設置中心坐標(x,y)
    center.x=center.x+point.x;
    center.y=center.y+point.y;
    imageview.center=center;

    [Pan setTranslation:CGPointZero inView:Pan.view];
    //拖動結束后執行
    if(Pan.state==UIGestureRecognizerStateEnded){
        
       // imageview.center=self.view.center;
//        CGPoint velocity = [Pan velocityInView:self.view];
//        CGFloat magnitude = sqrtf((velocity.x * velocity.x) + (velocity.y * velocity.y));
//        CGFloat slideMult = magnitude / 200;
//        NSLog(@"magnitude: %f, slideMult: %f", magnitude, slideMult);
//        
//        float slideFactor = 0.1 * slideMult; // Increase for more of a slide
//        CGPoint finalPoint = CGPointMake(Pan.view.center.x + (velocity.x * slideFactor),
//                                         Pan.view.center.y + (velocity.y * slideFactor));
//        finalPoint.x = MIN(MAX(finalPoint.x, 0), self.view.bounds.size.width);
//        finalPoint.y = MIN(MAX(finalPoint.y, 0), self.view.bounds.size.height);
//        
        [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
            
            Pan.view.center = self.view.center;
            
        } completion:nil];
    }
}

 [Pan setTranslation:CGPointZero inView:Pan.view];這個方法網上介紹的很少,我總結了一下大概意思就是:清空(把Translation置零)移動的距離,有的解釋為“復位”,復位的意思就是歸零, 也可以叫初始化

UIGestureRecognizerStateEnded 拖動手勢結束后

        [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
            
            Pan.view.center = self.view.center; } completion:nil]; 

 以動畫的效果回到view 的終點。

 

 

3)上下滑效果
//向上滑動
    UISwipeGestureRecognizer *SwipeGestureRecognizerUP=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(SwipeGestureUP:)];
    SwipeGestureRecognizerUP.delegate=self;
    //上滑動
    SwipeGestureRecognizerUP.direction=UISwipeGestureRecognizerDirectionUp;
    [imageview addGestureRecognizer:SwipeGestureRecognizerUP];
    
    //向下滑動
    UISwipeGestureRecognizer *SwipeGestureRecognizerDOWN=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(SwipeGestureDOWN:)];
    SwipeGestureRecognizerDOWN.delegate=self;
    //下滑動
    SwipeGestureRecognizerDOWN.direction=UISwipeGestureRecognizerDirectionDown;
    [imageview addGestureRecognizer:SwipeGestureRecognizerDOWN];
滑動分上滑動和下滑動,這里為了好看,我一起發了出來
 typedef enum {
    UISwipeGestureRecognizerDirectionRight = 1 << 0,
    UISwipeGestureRecognizerDirectionLeft  = 1 << 1,
    UISwipeGestureRecognizerDirectionUp    = 1 << 2,
  } UISwipeGestureRecognizerDirection;
這是一個枚舉類型,滑動可以上下左右,這里我只區分了上下滑動
//向上滑動的效果
-(void)SwipeGestureUP:(UISwipeGestureRecognizer *)UP{
    NSLog(@"UP------>%@",UP);
    //動畫的速度
    float Duration=imageview.animationDuration;
    Duration=Duration-0.1;
    //判斷是否小於0
    if (Duration<0) {
        Duration=0.1;
    }
    
    if (imageview.isAnimating) {
        //把新的動畫速度給UIimageView
        imageview.animationDuration=Duration;
        [imageview startAnimating];
    }else{
        imageview.animationDuration=Duration;
    }

}

//向下滑動的效果
-(void)SwipeGestureDOWN:(UISwipeGestureRecognizer *)DOWN{
    NSLog(@"DOWN------>%@",DOWN);
    float Duration=imageview.animationDuration;
    Duration=Duration+0.1;
    if (Duration>1.0) {
        Duration=1.0;
    }
    
    if (imageview.isAnimating) {
        imageview.animationDuration=Duration;
        [imageview startAnimating];
    }else{
        imageview.animationDuration=Duration;
    }

}
imageview.animationDuration設置動畫速度,上滑動就是加速度,下滑動就是減速度。然后重新復制給imageview.animationDuration來改變動畫的速度。


4)長按效果
 
        
UILongPressGestureRecognizer *LongPressGestureRecognizer=[[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(LongPressGesture:)];
    //長安時間為0.5秒
    LongPressGestureRecognizer.minimumPressDuration=0.5f;
    LongPressGestureRecognizer.delegate=self;
    [imageview addGestureRecognizer:LongPressGestureRecognizer];
 
        
//長按的效果
-(void)LongPressGesture:(UILongPressGestureRecognizer *)LongPress{
    NSLog(@"LongPress------>%@",LongPress);
    //LongPress.allowableMovement = 10;
}

 

minimumPressDuration: 長按生效時間

allowableMovement: 長按有效移動范圍(從點擊開始,長按移動的允許范圍)

5)放大縮小效果

    UIPinchGestureRecognizer *PinchGestureRecognizer=[[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(PinchGesture:)];
    PinchGestureRecognizer.delegate=self;
    [imageview addGestureRecognizer:PinchGestureRecognizer];
//放大縮小的效果
-(void)PinchGesture:(UIPinchGestureRecognizer *)Pinch{
    NSLog(@"Pinch------>%@",Pinch);
    imageview.transform=CGAffineTransformScale(imageview.transform, Pinch.scale, Pinch.scale);
    Pinch.scale=1;
}

 

CGAffineTransformScale縮放:設置縮放比例 

scale縮放比例(手指距離增大,scale增大) // scale = 1.0

以下是效果圖

 

6)旋轉效果

 
        
    UIRotationGestureRecognizer *RotationGestureRecognizer=[[UIRotationGestureRecognizer alloc]initWithTarget:self action:@selector(RotationGesture:)];
    RotationGestureRecognizer.delegate=self;
    [imageview addGestureRecognizer:RotationGestureRecognizer];
 
        
-(void)RotationGesture:(UIRotationGestureRecognizer *)Rotation{
    NSLog(@"Rotation------>%@",Rotation);
    imageview.transform=CGAffineTransformRotate(imageview.transform, Rotation.rotation);
    Rotation.rotation=0;
}

CGAffineTransformMakeRotation 旋轉:設置旋轉角度

velocity :速度

rotation  旋轉的弧度

Rotation.rotation = 0;

 將旋轉的弧度清0(將當前手勢旋轉的弧度清0);


-----------------------------------------------------目前幾個手勢的功能就基本實現了,希望我的筆記可以幫打你們

一下是效果圖

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM