Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>OK, I figured it out. Here's what I did:</p> <pre><code>CGFloat duration = 0.8; /* //Detail View Animations */ CATransform3D initialDetailScale = CATransform3DMakeScale(view.frame.size.width/vc.view.frame.size.width, view.frame.size.height/vc.view.frame.size.height, 1.0); CATransform3D initialDetailTransform = CATransform3DRotate(initialDetailScale, -M_PI, 0.0, -1.0, 0.0); CATransform3D finalDetailScale = CATransform3DMakeScale(1.0, 1.0, 1.0); CATransform3D finalDetailTransform = CATransform3DRotate(finalDetailScale, 0.0, 0.0, -1.0, 0.0); NSMutableArray *detailAnimations = [NSMutableArray array]; CABasicAnimation *detailTransform = [CABasicAnimation animationWithKeyPath:@"transform"]; detailTransform.fromValue = [NSValue valueWithCATransform3D:initialDetailTransform]; detailTransform.toValue = [NSValue valueWithCATransform3D:finalDetailTransform]; detailTransform.duration = duration; [detailAnimations addObject:detailTransform]; CABasicAnimation *detailFadeIn = [CABasicAnimation animationWithKeyPath:@"opacity"]; detailFadeIn.fromValue = [NSNumber numberWithFloat:1.0]; detailFadeIn.toValue = [NSNumber numberWithFloat:1.0]; detailFadeIn.duration = duration/2; detailFadeIn.beginTime = duration/2; [detailAnimations addObject:detailFadeIn]; CABasicAnimation *detailMove = [CABasicAnimation animationWithKeyPath:@"position"]; detailMove.fromValue = [NSValue valueWithCGPoint:vc.view.layer.position]; detailMove.toValue = [NSValue valueWithCGPoint:self.view.layer.position]; detailMove.duration = duration; [detailAnimations addObject:detailMove]; CAAnimationGroup *detailGroup = [CAAnimationGroup animation]; [detailGroup setAnimations:detailAnimations]; [detailGroup setDuration:duration]; detailGroup.removedOnCompletion = NO; detailGroup.fillMode = kCAFillModeForwards; detailGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [vc.view.layer addAnimation:detailGroup forKey:@"anim"]; /* //Grid Item View Animations */ CATransform3D initialGridScale = CATransform3DMakeScale(1.0, 1.0, 1.0); CATransform3D initialGridTransform = CATransform3DRotate(initialGridScale, 0.0, 0.0, 1.0, 0.0); CATransform3D finalGridScale = CATransform3DMakeScale(vc.view.frame.size.width/view.frame.size.width, vc.view.frame.size.height/view.frame.size.height, 1.0); CATransform3D finalGridTransform = CATransform3DRotate(finalGridScale, M_PI, 0.0, 1.0, 0.0); NSMutableArray *gridAnimations = [NSMutableArray array]; CABasicAnimation *gridTransform = [CABasicAnimation animationWithKeyPath:@"transform"]; gridTransform.fromValue = [NSValue valueWithCATransform3D:initialGridTransform]; gridTransform.toValue = [NSValue valueWithCATransform3D:finalGridTransform]; gridTransform.duration = duration; [gridAnimations addObject:gridTransform]; CABasicAnimation *gridFadeOut = [CABasicAnimation animationWithKeyPath:@"opacity"]; gridFadeOut.fromValue = [NSNumber numberWithFloat:0.0]; gridFadeOut.toValue = [NSNumber numberWithFloat:0.0]; gridFadeOut.duration = duration/2; gridFadeOut.beginTime = duration/2; [gridAnimations addObject:gridFadeOut]; CABasicAnimation *gridMove = [CABasicAnimation animationWithKeyPath:@"position"]; gridMove.fromValue = [NSValue valueWithCGPoint:view.layer.position]; gridMove.toValue = [NSValue valueWithCGPoint:[self.view.layer convertPoint:self.view.layer.position toLayer:gridView.layer]]; gridMove.duration = duration; [gridAnimations addObject:gridMove]; CAAnimationGroup *gridGroup = [CAAnimationGroup animation]; [gridGroup setAnimations:gridAnimations]; gridGroup.duration = duration; gridGroup.fillMode = kCAFillModeForwards; gridGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; gridGroup.removedOnCompletion = NO; [view.layer addAnimation:gridGroup forKey:@"anim"]; </code></pre> <p>I'm doing this with an item in an <code>AQGridView</code>. In my code sample <code>view</code> is the instance of <code>AQGridViewCell</code> that I am animating. And <code>vc.view</code> is my detail <code>UIViewController</code>/<code>UIView</code> that I'm displaying.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload