zoukankan      html  css  js  c++  java
  • iPhoto的删除动画(转)

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

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

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

    为了清楚的说明,先上核心代码:

    UIBezierPath *movePath = [UIBezierPath bezierPath];
                 [movePath moveToPoint:fromPoint];
     
                 [movePath addQuadCurveToPoint:toPoint
                                  controlPoint:CGPointMake(toPoint.x,fromPoint.y)];
     
                 
                 CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
                 moveAnim.path = movePath.CGPath;
                 moveAnim.removedOnCompletion = YES;
                 
                 CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
                 scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
                 scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.10.11.0)];
                 scaleAnim.removedOnCompletion = YES;
                 
                 CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];
                 opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
                 opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
                 opacityAnim.removedOnCompletion = YES;
                 
                 CAAnimationGroup *animGroup = [CAAnimationGroup animation];
                 animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim,opacityAnim, nil];
                 animGroup.duration = 1;
                 [imageView.layer addAnimation:animGroup forKey:nil];

    UIBezierPath是用来创建各种曲线的类,这个类很强大,各种你能想到的都可以用它来完成。

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

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


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

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

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

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


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


    这样我们就完成了这样的动画,试试吧。


    有写的不清楚的地方,欢迎指正。

    http://www.cnblogs.com/scorpiozj

    添加了项目文件 项目文件下载

  • 相关阅读:
    jfreeChart柱状图各属性详细设置
    eclipse 常用快捷键及调试方法
    Java利用Preferences设置个人偏好
    图说设计模式(UML和设计模式)
    JFreeChart 使用一 饼图之高级特性
    使用批处理创建永久生效的环境变量
    tnsnames.ora 监听配置文件详解
    oracle本机登录不上dba的权限不足错误
    Oracle自动备份脚本(网上找到的资料)
    初探Docker
  • 原文地址:https://www.cnblogs.com/likwo/p/2377644.html
Copyright © 2011-2022 走看看