Skip to content

Motion effect occasionally matching glyphs don't animate to final position #3

Open

Description

@MrBendel

I found occasionally in the motion change effect, that the matching characters would animate and then snap into their final positions. I found if I animate the matching character instead of the old character, it works better:

-(void)animateOutWithCompletion:(void(^)(BOOL finished))completionBlock
{
    CATransform3D scaleTransform = CATransform3DMakeScale(0.2, 0.2, 1);

    NSInteger index = 0;
    for (CATextLayer *textLayer in self.oldCharacterTextLayers) {

        NSNumber *possibleIndex = self.oldMatchingCharacters[[NSNumber numberWithInteger:index]];
        if (possibleIndex) {            
            NSInteger newMatchingIndex = [possibleIndex integerValue];

            NSInteger glyphIndex = [self.layoutManager glyphIndexForCharacterAtIndex:newMatchingIndex];
            CATextLayer *matchingLayer = self.characterTextLayers[glyphIndex];
            CGPoint position = matchingLayer.position;

            [CATransaction begin];
            [CATransaction setDisableActions:YES];
            matchingLayer.position = textLayer.position;
            matchingLayer.opacity = 1.0;
            [textLayer removeFromSuperlayer];
            [CATransaction commit];

            [RBDLayerAnimation animationForLayer:matchingLayer duration:0.2 delay:0 options:rbd_CALayerAnimationOptionCurveEaseOut animations:^{
                matchingLayer.position = position;
            } completionBlock:^(BOOL finished) {
                if (index == [self.oldCharacterTextLayers count]-1) {
                    if (completionBlock) {
                        completionBlock(finished);
                    }
                }
            }];

        }else{
            textLayer.transform = CATransform3DIdentity;

            [RBDLayerAnimation animationForLayer:textLayer duration:0.2 delay:0 options:rbd_CALayerAnimationOptionCurveEaseOut animations:^{
                textLayer.transform = scaleTransform;
                textLayer.opacity = 0;
            } completionBlock:^(BOOL finished) {

                [textLayer removeFromSuperlayer];

                if (index == [self.oldCharacterTextLayers count]-1) {
                    if (completionBlock) {
                        completionBlock(finished);
                    }
                }
            }];
        }

        ++index;
    }
}

Activity

  1. hulsizer commented on May 12, 2015

    @hulsizer
    Owner

    Hey there! I tested out some of this code to reproduce the animation movement like you described, but it looks like you have created some other tweaks to the animations.

    There are definitely some issues with the timing of animations causing some characters not to end up in the correct spots, do you have some example words that were giving you trouble?

    Sorry it took so long for the response!

  2. MrBendel commented on May 13, 2015

    @MrBendel
    Author

    Thanks for getting back. It's been a while since I played around with this. I'll dig through my code samples and see if I can track it down.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions