手势与动画效果

前沿 ：

        最近重新做了一个手势的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)；



-----------------------------------------------------目前几个手势的功能就基本实现了，希望我的笔记可以帮打你们


一下是效果图




 
				


				
时间： 2024-10-09 23:55:23 

		


		


	

	
	

		


		
手势与动画效果的相关文章


								

		

			

                轻松实现Android,iOS的一个手势动画效果
			

		

		

									

				先来看效果 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合效果,还支持声音效果. 下面是主要的代码 //index.ui.js var do_Animator1 = mm("do_Animator"); do_Animator1.append(500, { y: -1334, curve:"Linear&			

		

	

				

		

			

                仿映客客户端、TableView多种动画效果、边缘返回手势等源码
			

		

		

									

				iOS精选源码 相册多选框架 zhPopupController 简单快捷弹出自定义视图 tableView实现多种动画效果 自定义动画的PageControl 展示tableView和collectionView的结构,框架CHD_ListView_Structure RxSwift+Moya+ObjectMapper优雅的网络请求级模型转换 多种指示器文字效果源码SGPagingView react-native低仿映客直播客户端 支持iOS/Android ScreenEdgePanGes			

		

	

				

		

			

                iOS开发 QQ粘性动画效果
			

		

		

									

				QQ(iOS)客户端的粘性动画效果 时间 2016-02-17 16:50:00  博客园精华区 原文  http://www.cnblogs.com/ziyi--caolu/p/5195615.html 主题 iOS开发 qq的app中要是有新的联系人发消息过来,相应联系人的cell右边会有一个红色的圆圈表示消息条数.如果去触碰那个圆圈,可以发现它竟然会跟着手指的移动而移动. 在一定范围内,手指离开屏幕,会发现红色圆圈会自动弹性的回到原来的位置.而如果超出一定距离,这个圆圈会做一个销毁的动画,			

		

	

				

		

			

                android开发教程：android手势翻页效果
			

		

		

									

				听麦子学院android开发老师说要实现手势翻页效果,主要用到ViewFlipper和GestureDetector.  ViewFlipper变化当前显示内容,GestureDetector监听手势.  用于多页的展示非常酷.  现在我就给大家简单说明下,  首先创建工程:TestFlip,创建主Activity:TestFlip.  在res/layout/main.xml中添加flipper信息,如下:  Java代码   1. <?xml version="1.0" en			

		

	

				

		

			

                仿菁优网首页动画效果
			

		

		

									

				原文链接 1.菁优网首页动画效果图 2.动画效果分析 2.1.动画效果一定是UIView动画,因为核心动画是CALayer的动画效果给我们的位移假象,视图的真实位置并没有发生变化.在首页的动画中,按钮的位置是随着转盘的转动在发生变化的.核心动画无法帮我们完成这项任务.在转盘转动的同时,按钮也要进行着和转盘反方向的旋转,并且旋转角度正好相等.转盘在旋转时按钮中的图片和文字相对于我们的视角一直是正向的. 2.2.在转动转盘的时候既可以单手指旋转,也可以两根手指旋转.所以自定义旋转手势,每次旋转转盘的			

		

	

				

		

			

                iOS中关于动画效果的要点
			

		

		

									

				在系统并深入学习iOS动画的过程中,不得不说是个痛苦的过程.没有任何书系统的讲解这方面的知识,网上的文章都讲的支离破碎:很幸运的看到了http://objccn.io这个网站:即使如此,还是花了三天时间:这个是对整体概念模糊到不断清晰,再逐步理顺,最后总结归纳为几个关键点.我想这辈子应该都忘记不了了. iOS上的动画效果绝对赞:最常见的uitable动态效果,当手指在屏幕上下滑动时,列表会跟随其一起上下活动:如果猛的往上一推,还可以看到列表的惯性作用下,还会不断滚动,同时慢慢减速.这个过程根本不			

		

	

				

		

			

                iOS点击查看大图的动画效果
			

		

		

									

				对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了			

		

	

				

		

			

                iOS 之动画效果
			

		

		

									

				/** type *  各种动画效果  其中除了'fade', `moveIn', `push' , `reveal' ,其他属于私有的API. *  ↑↑↑上面四个可以分别使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用. *  @"cube"                     立方体翻滚效果 *  @"moveIn"    			

		

	

				

		

			

                Core Animation 动画效果介绍
			

		

		

									

				在开始之前呢,先了解一下UIView和CALayer大体的区别(重点列举了以下四点): UIView继承自 UIResponder,因此UIView 可以处理响应事件,而CALayer继承自NSObject,所以它只是负责内容的创建,绘制. UIView负责对内容的管理,而CALayer则是对内容的绘制 UIView中有关位置的属性只有frame.bounds.center,而CALayer除了具备这些属性之外还有anchorPoint.position. 通过修改CALayer可以实现UIVi