UIView transitionWithView animating property change: slide in from right?

Question

I have a readonly UITextView, and I'm updating the text. When the new text appears, I want it to animate as follows: New text slides in from the right, as the old text slides offscreen toward the left side.

Is it possible to do this with transitionWithView? If not, what's the best way to do it? I can make it do a CrossDissolve, but that's not the animation I'm looking for:

    [UIView transitionWithView:self.storyTextView
                  duration:0.5
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    [self.storyTextView setText:withStory.storyText];
                }
                completion:nil];

The reason for insisting on the right to left animation is because eventually I want the user to be able to trigger it by swiping toward the left on the UITextView.

Answer 1

CATransition will allow you to do this, with a transition type of 'push' and a subtype of 'from right'. It's very straightforward to use:

CATransition *transition = [CATransition new];
transition.type = kCATransitionPush;
transition.subtype = kCATransitionFromRight;

// Make any view changes
self.textView.text = newText;

// Add the transition
[self.textView.layer addAnimation:transition forKey:@"transition"];

Note that this, while it's what you've asked for, won't fit nicely with a gesture without some extra tinkering - to tie it to a gesture you'd need to do something like set the layer speed to 0 and the manually update the progress of the animation to match your gesture.

Answer 2

What about just using UIView animateWithDuration and slide the one textView to the right while sliding a new textView from the left. Here is an example just have to work out the positions. Let me know if this is what you were looking to do.

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    self.textView2.frame = CGRectMake(1000.0,self.textView1.frame.origin.y,self.textView2.frame.size.width,self.textView2.frame.size.height);

}
- (IBAction)animate:(id)sender {
    [UIView animateWithDuration:0.5 animations:^{
        self.textView1.frame = CGRectMake(-200.0,self.textView1.frame.origin.y,self.textView1.frame.size.width,self.textView1.frame.size.height);

        [UIView animateWithDuration:0.5 animations:^{
            self.textView2.center = (CGPointMake(200, 200));
        }];
    }];

}

Answer 3

You can also try something like this.

You can create a containerView for your text view and then change the coordinates using UIView animations to give it a slide from right to left.

Please see code below.

First declare a container view and the make the required text view its subview.

In .h

@property (strong, nonatomic)IBOutlet UIView *containerView;
@property (strong, nonatomic)IBOutlet UITextView *childTextView; //I have set it as subview in xib

In .m make sure to set the following in viewDidLoad or in Xib

self.containerView.clipsToBounds = YES;

Gestures

UISwipeGestureRecognizer *recog = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(changeText)];
recog.direction = UISwipeGestureRecognizerDirectionLeft;
[self.containerView addGestureRecognizer:recog];

Beautification (for this you would need QuartzCore/QuartzCore.h)

self.containerView.layer.borderWidth = 1.0f;
self.containerView.layer.borderColor = [UIColor lightGrayColor].CGColor;
self.containerView.layer.cornerRadius = 5.0f;

To the Point

- (void)changeText
{
    [UIView animateWithDuration:0.3f animations:^(void){
        CGRect endPos = self.childTextView.frame;
        endPos.origin.x -= endPos.size.width; //Move it out of the view's frame to the left
        self.childTextView.frame = endPos;
    } completion:^(BOOL done){
        CGRect startPos  = self.childTextView.frame;
        startPos.origin.x += (2*startPos.size.width);// this will take it to the right.
        self.childTextView.frame = startPos;
        self.childTextView.text = @"Changed text";

        [UIView animateWithDuration:0.2f animations:^(void){
            CGRect displayPos = self.childTextView.frame;
            displayPos.origin.x -= displayPos.size.width; // To compensate for the double +ve on top
            self.childTextView.frame = displayPos;
        }];
    }];
}