Databases
StackOverflow2013
Postsdbo
POHow do I animate CATransform3Ds with a CAKeyframeAnimation?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I animate CATransform3Ds with a CAKeyframeAnimation?
    primarykey
    data
    text
    <p>I've used CAKeyframeAnimations to animate a layer's <code>transform.rotation</code> and <code>transform.translation.x</code> properties, but I'm having trouble animating the <code>transform</code> property implicitly. I have a layer that must animate between two states and CABasicAnimation's default interpolation is totally incorrect and doesn't follow the path I want. CAKeyframeAnimation to the rescue, or so I thought. Any attempt to animate <code>transform</code> using a CAKeyframeAnimation results in the view immediately snapping to the final transform while the other animations run. If I remove the first half of the following function and let my "transform" events use the CABasicAnimation on the bottom, it animates just fine - albeit with incorrectly interpolated transforms along the way. </p> <p>My layer delegate has implemented the following:</p> <pre><code>- (id &lt;CAAction&gt;) actionForLayer:(CALayer *)layer forKey:(NSString *)event { if ([event isEqualToString:@"transform"]) { CGSize startSize = ((CALayer *)self.layer.presentationLayer).bounds.size; CGSize endSize = self.layer.bounds.size; CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:event]; animation.duration = 0.25; NSMutableArray *values = [NSMutableArray array]; int stepCount = 10; for (int i = 0; i &lt; stepCount; i++) { CGFloat p = i / (float)(stepCount - 1); CGSize size = [self interpolateBetweenSize:startSize andSize:endSize percentage:p]; CATransform3D transform = [self transformForSize:size]; [values addObject:[NSValue valueWithCATransform3D:transform]]; } animation.values = values; return animation; } // All other animations use this basic animation CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:event]; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; animation.removedOnCompletion = YES; animation.fillMode = kCAFillModeForwards; animation.duration = 0.25; return animation; } </code></pre> <p>My transform is a translation followed by a rotate, but I think a group animation with separate keyframe animations animating through a translation AND a rotate would result in crazy town. I've confirmed that size &amp; transform are correct for all values of p that I pass though, and p strictly ranges from 0 to 1.</p> <p>I've tried setting a non-default timing function, I've tried setting an array of timing functions, I've omitted the keyTImes, I've set a repeatCount of 0, removedOnCompletion=YES, and a fillMode of forwards and that had no effect. Am I not creating the transform keyframe animation correctly?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USyipe
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow do I animate CATransform3Ds with a CAKeyframeAnimation?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow do I animate CATransform3Ds with a CAKeyframeAnimation?
      1. USyipe
      1. VTFavorite
    3. VO
      singulars
      1. POHow do I animate CATransform3Ds with a CAKeyframeAnimation?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCould you perhaps clarify the exact effect you are trying to achieve? You describe it as a translation followed by a rotation, but from your code it looks like the bounds are also animating - is that correct? You want the layer to move, then rotate, with the bounds growing or shrinking continuously throughout both phases of the move/rotate animation?
      singulars
      1. POHow do I animate CATransform3Ds with a CAKeyframeAnimation?
      1. USGSnyder
    2. COWhy does it need to be implicit? This code looks hacky. If you want fine grained control why not just create the animation and add it directly to the layer, which you say you have working already? Also just return `nil` from that delegate method if you want things to use their default animation.
      singulars
      1. POHow do I animate CATransform3Ds with a CAKeyframeAnimation?
      1. USPaul.s
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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