西海岸より

つらつらざつざつと

ゴミ箱アニメーションサンプル

ゴミ箱アニメーション(Viewがゴミ箱に消えていくイメージのアニメーション)に関するメモ。

ゴミ箱のアニメーションを実装する必要があって、色々調べていたところ、iPhoneアプリのメモアプリで利用されている"SuckEffect"というものが使えそう。

[UIView beginAnimations:@"suck" context:NULL];
[UIView setAnimationDuration:0.5f];
[UIView setAnimationTransition:103 forView:self.view cache:YES];
[UIView setAnimationPosition:CGPointMake(204, 460)]; 
[UIView commitAnimations];

ただし、これの難点は、このsuckアニメーションとsetAnimationPosition:CGPointMakeというメソッドがundocumented(非公開)という点で、審査上はグレー。

そこで、ごまかしでCABasicAnimationを利用し、ゴミ箱アニメーションを実装してみた。中身は回転->縮小->移動->透過のアニメーションを組み合わせたもの。

- (void)addTrashAnimationTo:(UIView *)aView
                    toPoint:(CGPoint)point
                   duration:(CGFloat)duration
                   delegate:(id)delegate {

  //// 1st Animation - Transform
  CABasicAnimation* transform_animation = [CABasicAnimation animationWithKeyPath:@"transform"];
  transform_animation.duration = duration;
  transform_animation.autoreverses = NO;
  [transform_animation setDelegate:delegate];
  [transform_animation setTimingFunction:[CAMediaTimingFunction 
                                          functionWithName:kCAMediaTimingFunctionEaseIn]];
  CATransform3D transform = CATransform3DIdentity;

  // from 
  transform_animation.fromValue = [NSValue valueWithCATransform3D:transform];	
    
  // to
  // - rotate
  {
    CATransform3D ntransform = CATransform3DMakeRotation(-0.5, 0, 0, 1.0f);
    transform = ntransform;
  }
  // - scale
  CGFloat scale = 0.1f;
  {
    CATransform3D ntransform = CATransform3DMakeScale(scale, scale, scale);
    transform = CATransform3DConcat(transform, ntransform);
  }
  // - transition
  {
    CGRect rect = aView.frame;
    CATransform3D ntransform =
    CATransform3DMakeTranslation(point.x - rect.size.width/2 + (rect.size.width/2 * 0.1), 
                                 point.y - rect.size.height/2 + (rect.size.height/2 * 0.1),
                                 0.0f);
    transform = CATransform3DConcat(transform, ntransform);
  }
  
  transform_animation.toValue = [NSValue valueWithCATransform3D:transform];
  [aView.layer removeAllAnimations];
  [aView.layer addAnimation:transform_animation forKey:@"trashingAnimation"];

  //// 2nd Animation - Opacity
  {
    CABasicAnimation* opacity_animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacity_animation.duration = duration; 
    opacity_animation.autoreverses = NO;
    [opacity_animation setTimingFunction:[CAMediaTimingFunction 
                                          functionWithName:kCAMediaTimingFunctionEaseIn]];
    opacity_animation.fromValue = [NSNumber numberWithFloat:0.7f];
    opacity_animation.toValue = [NSNumber numberWithFloat:0.0f];	
    [aView.layer addAnimation:opacity_animation forKey:@"trashingAnimation_opaque"];
  }
}

実行可能なソースはgithubにあげてます。

  • イメージ


iPhone/iPad/iPod touchプログラミングバイブル―iOS 5/Xcode 4対応 (smart phone programming bible)

iPhone/iPad/iPod touchプログラミングバイブル―iOS 5/Xcode 4対応 (smart phone programming bible)

iOSプログラミング逆引きリファレンス108 ?知りたいことがすぐわかるiPhoneプログラミングテクニック?

iOSプログラミング逆引きリファレンス108 ?知りたいことがすぐわかるiPhoneプログラミングテクニック?