免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 1220 | 回复: 1
打印 上一主题 下一主题

iPhoto的删除动画(转) [复制链接]

论坛徽章:
0
跳转到指定楼层
1 [收藏(0)] [报告]
发表于 2012-03-04 16:54 |只看该作者 |倒序浏览
iPhoto的删除动画(转)







iPhoto 中想删除某张照片时,点击删除键,就能看到照片被回收到垃圾箱的动画。

今天就来模拟一下这个动画(据说有个私有API可以实现,不过私有的嘛,忽略之)。

首先仔细观察下这个动画,包含了位置,大小还有可见三个主要动画。

为了清楚的说明,先上核心代码:
  1. UIBezierPath *movePath = [UIBezierPath bezierPath];
  2.              [movePath moveToPoint:fromPoint];

  3.              [movePath addQuadCurveToPoint:toPoint
  4.                               controlPoint:CGPointMake(toPoint.x,fromPoint.y)];

  5.             
  6.              CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
  7.              moveAnim.path = movePath.CGPath;
  8.              moveAnim.removedOnCompletion = YES;
  9.             
  10.              CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
  11.              scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
  12.              scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
  13.              scaleAnim.removedOnCompletion = YES;
  14.             
  15.              CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];
  16.              opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
  17.              opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
  18.              opacityAnim.removedOnCompletion = YES;
  19.             
  20.              CAAnimationGroup *animGroup = [CAAnimationGroup animation];
  21.              animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim,opacityAnim, nil];
  22.              animGroup.duration = 1;
  23.              [imageView.layer addAnimation:animGroup forKey:nil];
  24. 复制代码
复制代码
UIBezierPath是用来创建各种曲线的类,这个类很强大,各种你能想到的都可以用它来完成。

这里我们建立的二次曲线实际上就是从照片的中心点位置到垃圾箱终点的一条曲线。

至于函数中controlPoint的选取,自己查阅API吧,这里就不多说




接着我们建立了一个CAKeyframeAnimation的动画,这个主要用于实现动画的轨迹变化,我们将动画的path值设为之前定义的曲线值。

这样动画就会按我们设定的轨迹移动了。

接下来是大小变化的动画,设定了最初和最终的画面大小。CATransform3DMakeScale是用于生成变换矩阵的东东,对于二维的,z值始终为1.

紧接着是生成透明度的动画,很好理解。




由于我们用到了三种动画,所以需要用CAAnimationGroup,这样一次性的使用它们。

论坛徽章:
0
2 [报告]
发表于 2012-03-04 16:55 |只看该作者
谢谢分享呢
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP