POP-一个点击带有放大还原的动画效果

原理

监听屏幕的点击事件

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event;

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event;

- (void)touchesCancelled:(nullable NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event;

动画

pop动画,需要pop框架

两个动画一个放大,一个还原

kPOPViewScaleXY:放大宽高

代码

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    POPSpringAnimation *scaleAnimation = [POPSpringAnimation animation];
    scaleAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewScaleXY];//宽高改变
    scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(1.3, 1.3)];//1.3倍
    [self pop_addAnimation:scaleAnimation forKey:@"scaleAnimationKey"];//执行动画
    scaleAnimation.completionBlock = ^(POPAnimation *animation,BOOL finish) { //动画回调
        POPSpringAnimation *scaleAnimation = [POPSpringAnimation animation];
        scaleAnimation.springBounciness = 16;    // value between 0-20
        scaleAnimation.springSpeed = 14;     // value between 0-20
        scaleAnimation.property = [POPAnimatableProperty propertyWithName:kPOPViewScaleXY];
        scaleAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(1.0, 1.0)];
        [self pop_addAnimation:scaleAnimation forKey:@"scaleAnimationKey"];
    };
}

效果图

时间: 2024-11-08 01:56:36

POP-一个点击带有放大还原的动画效果的相关文章

CSS3圆圈动画放大缩小循环动画效果

代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3圆圈动画放大缩小循环动画效果</title> <style> .dot { margin:150px auto; width:200px; height

添加地图滚轮放大缩小的动画效果

ZommAnimation=OpenLayers.Class(OpenLayers.Control.Navigation,{ size:null, offset:null, uricon:null, ulicon:null, bricon:null, blicon:null, imgPath:APIAdress + "/jsapi/theme/img/gis/navi/", // 拖动的滑动效果必须使enableKinetic为true dragPanOptions: {enableK

实现类似于QQ空间相册的点击图片放大,再点后缩小回原来位置

前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看看,讲解的很傻瓜化.    好,下面我们来看看如何实现如上面右图一样的效果. 1.原理分析 (1)我们是否需要在点击后开启一个新的Activity呢?我参考了很多有类似功能的相册应用,发现大家都是在一个Activity中就完成了这个功能.所以我们仅仅需要一个布局文件. (2)在同一个布局文件中我们可

Android浏览图片,点击放大至全屏效果

最近做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果.如下. 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略界面跳转到图片详情页面,应该是从一个Activity跳转到另外一个Activity,应该图片详情页面也有很多操作,用View或者Dialog不是很好.所以现在难点就是,如何使得前一个界面的ImageView在另外一个界面做缩放切割动画. 一般缩略界面的ImageView的是如上图所示的正方形的,并且是CENT

ios点击头像放大并能伸缩拖动

点击头像放大,其实原理就是在头像处创建一个和头像一样大小的scrollview,然后让其放大至屏幕大小,点击屏幕取消时将其frame恢复之前大小,然后让其消失. 1.首先创建头像和用来创建点击手势的视图 AsyncImageView *touxiang=[[AsyncImageView alloc]init];            touxiang.isAcceptTouch=YES;            touxiang.tag=7758521;            touxiang.f

cocos2dx --- 按钮点击居中放大

自定的简单按钮,直接贴代码: MenuItem* MenuItemNode::create( const char* normal,Ref* target,SEL_MenuHandler select ) { auto _normal = Sprite::create(normal); return MenuItemNode::create(_normal,target,select); } MenuItem* MenuItemNode::create( Sprite* normal, Ref*

高仿新浪点击图片放大(可以拖动,动态缩小放大,以及再次点击图片消失和保存图片的功能)

有图有真相: 最近在做项目的时候用到了点击图片放大效果,于是就开始实现,本以为挺简单的,实现起来还是遇到不少的小问题啊: 第一:只实现点击图片放大,再次点击消失,这个好实现: 第二:只实现图片可以拖动,而且可以动态缩小放大,这个也好实现: 第三:第一 和第二同步实现就出现问题了: 具体的问题是: (1)setOnClickListener 和 setOnTouchListener 同时设置的时候,若是setOnTouchListener的返回值为true,则不会再执行setOnClickList

点击图片放大至原始图片大小

有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了: var _w = parseInt($(window).width());//获取浏览器的宽度 $("#abc img").each(function(i){     var img = this;     var realWidth;//真实的宽度     var realHeight;//真实的高度     $("<img

点击图片放大功能

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>点击图片放大</title> <style type="text/css"> a img{border:0px;} .latentzoom { CURSOR: pointer; outline: none } .latentzoom-image { BORDER