iOS开发-图片旋转、移动、变小等动画


今天看到一个点击物品添加到购物车的项目,http://www.huangyibiao.com/archives/1294 

效果挺好的,放在项目能够吸引用户眼球,就动手实现一个。

// 创建一个imageView,添加一个点击方法

UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(20, 100, 50, 50)];[imgView setImage:[UIImage imageNamed:@"service_lianxi"]];imgView.userInteractionEnabled = YES;[self.view addSubview:imgView];self.imgView = imgView;UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(imgViewTap:)];[imgView addGestureRecognizer:tap];

// 点击图片,动画开始

- (void)imgViewTap:(UITapGestureRecognizer *)tap{

// 先画出移动路径,起点、中间某一点、终点

UIBezierPath *path = [UIBezierPath bezierPath];

[path moveToPoint:_imgView.center];

[path addQuadCurveToPoint:CGPointMake(self.view.frame.size.width / 2, 600) controlPoint:CGPointMake(200, 0)];

//关键帧动画,将几个点形成移动的动画效果(有点像我们只做GIF图,很精细的那种)

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

pathAnimation.path = path.CGPath;

pathAnimation.removedOnCompletion = YES; // 默认YES,动画结束后一切还原

// 逐渐变小

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

// fromValue:开始值    toValue:结束值

transformAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];

transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 1.0)]; //设置 X 轴和 Y 轴缩放比例都为1.0,而 Z 轴不变

transformAnimation.removedOnCompletion = YES;

//透明;使用基础动画

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

opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];

opacityAnimation.toValue = [NSNumber numberWithFloat:0.5];

opacityAnimation.removedOnCompletion = YES;

// 旋转

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

rotateAnimation.fromValue = [NSNumber numberWithFloat:0];

rotateAnimation.toValue = [NSNumber numberWithFloat:12];

rotateAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

rotateAnimation.removedOnCompletion = YES;

//组合效果;使用动画组

CAAnimationGroup *animationGroup = [CAAnimationGroup animation];

animationGroup.animations = @[ pathAnimation, transformAnimation, opacityAnimation, rotateAnimation];

animationGroup.duration = 1.5; //设置动画执行时间;这里设置为1.0秒

animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; //设置媒体调速运动;默认为 kCAMediaTimingFunctionLinear,即为线型间隔;这里设置为kCAMediaTimingFunctionEaseIn,即先慢后快,相当于有个加速度

//    animationGroup.autoreverses = YES; //设置自动倒退,即动画回放;默认值为NO

// 将整个动画组所有的设置属性赋给某一个View

[_imgView.layer addAnimation:animationGroup forKey:nil];

}

// 如果希望点击后原图不消失,可单设一个layer

CALayer *layer = [CALayer layer];

layer.bounds = _imgView.bounds;}

layer.position = _imgView.center;

layer.contents = (id)(_imgView.image.CGImage);

[self.view.layer addSublayer:layer];

// 我们可以通过animationWithKeyPath键值对的方式来改变动画,animationWithKeyPath的值:

transform.scale = 比例轉換

transform.scale.x = 闊的比例轉換

transform.scale.y = 高的比例轉換

transform.rotation.z = 平面圖的旋轉

opacity = 透明度

margin

zPosition

backgroundColor

cornerRadius

borderWidth

bounds

contents

contentsRect

cornerRadius

frame

hidden

mask

masksToBounds

opacity

position

shadowColor

shadowOffset

shadowOpacity

shadowRadius

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容

  • iOS动画篇之CoreAnimation动画 9月 22, 2016发布在Objective-C App如果想被大...
    白水灬煮一切阅读 1,913评论 0 0
  • IOS动画+转场动画 #import "ViewController.h" #import "secondView...
    iOS小开发阅读 882评论 0 1
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,321评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,001评论 5 13
  • 幼小的你 年复一年的地狱生活 亮司 是你黑夜中的太阳 乱世佳人 小小的你 捧着这么厚厚的一本书 你的心灵 是怎样的...
    爱智慧的石头阅读 253评论 4 1