CODEWITHSUNDEEP
iosobjective-cwebview
tyler
tyler

Reputation: 424

Swipe Transition Animation for Webview

I´m loading new content for a webview after a right to left swipe gesture. After the gesture is performed the webview loads its new content. How can I make an animation for this webview which displays a "swiping-away" of the webview´s content accordingly to the gesture? So while the user is swiping from right to left the webview should also be moved from right to left. And eventually "fly away". I think some music apps have this where you can load a new track by swiping one away. Thanks!

Upvotes: 2

Views: 2514

Answers (3)

Jatin Patel - JP
Jatin Patel - JP

Reputation: 3733

You can applied swipe animation with single UIWebView by following below code.

- (void)viewDidLoad
{
    [super viewDidLoad];

    UISwipeGestureRecognizer *recognizerRight;
    recognizerRight.delegate=self;

    recognizerRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeRight:)];
    [recognizerRight setDirection:UISwipeGestureRecognizerDirectionRight];
    [webView addGestureRecognizer:recognizerRight];


    UISwipeGestureRecognizer *recognizerLeft;
recognizerLeft.delegate=self;
    recognizerLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeleft:)];
    [recognizerLeft setDirection:UISwipeGestureRecognizerDirectionLeft];
    [webView addGestureRecognizer:recognizerLeft];


}

Now applied swipe effect with help of CATransition.

-(void)swipeleft:(UISwipeGestureRecognizer *)swipeGesture
{


        CATransition *animation = [CATransition animation];
        [animation setDelegate:self];
        [animation setType:kCATransitionPush];
        [animation setSubtype:kCATransitionFromRight];
        [animation setDuration:0.50];
        [animation setTimingFunction:
         [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
        [webView.layer addAnimation:animation forKey:kCATransition];



}
-(void)swipeRight:(UISwipeGestureRecognizer *)swipeGesture
{

        CATransition *animation = [CATransition animation];
        [animation setDelegate:self];
        [animation setType:kCATransitionPush];
        [animation setSubtype:kCATransitionFromLeft];
        [animation setDuration:0.40];
        [animation setTimingFunction:
         [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
        [webView.layer addAnimation:animation forKey:kCATransition];


}

Hope this help you.

Upvotes: 8

Mika
Mika

Reputation: 5845

You will need to use two UIWebViews the one that is flying away and one for the new content. To make it fly away you can just use one of the many libraries out there such as ZLSwipeableView.

In parallel, I would use create a new UIWebView on the location of the first. You should probably make it invisible at first and make it's visibility based on the movement of the first view so it gradually appears.

Upvotes: 1

Tanuj
Tanuj

Reputation: 531

For swipe gesture and load a new content, you can use:

UISwipeGestureRecognizer *swipeGR;
    swipeGR = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeLeft)];
    swipeGR.direction = UISwipeGestureRecognizerDirectionLeft;
    swipeGR.delegate = self;
    swipeGR.numberOfTouchesRequired = 1;
    [webview addGestureRecognizer:swipeGR];

Upvotes: 0

Related Questions