How to create "Swipe-Page" or "Slide-Page" effects?

Question

I am trying to create some functions for an eBook(not flipping animation): 1.User finger-swipe the page to the left 2.Page slides to the left 3.Then the page "snap" to fit the screen (or snap to a specific position) with ease out animation

Here is the example I would like to achieve: sliding page example

Answer 1

Best Answer

Answer by save · Mar 13, 2012 at 09:48 AM

You would use Input.GetTouch to see the deltaPosition and Mathf.Lerp to lerp towards a desired goal.

To move something you can use the deltaPosition:

if (Input.touchCount>0 && Input.GetTouch(0).phase==TouchPhase.Moved) {
    var touchDelta : Vector2 = Input.GetTouch(0).deltaPosition;
    transform.Translate (-touchDelta.x, 0, 0);
}

To see if the user stopped giving input and see if it was a flick:

if (Input.touchCount>0 && Input.GetTouch(0).phase==TouchPhase.Ended) {
    var touchDelta : Vector2 = Input.GetTouch(0).deltaPosition;
    if (touchDelta.x>5) {} //This was a flick to the left with magnitude of 5 or more
    if (touchDelta.x<-5) {} //This was a flick to the right with magnitude of 5 or more
}

To set the goal you'd either use a list of values or something like:

goal = Mathf.Round(transform.position.x/goalGrid)*goalGrid; //Where goalGrid would be an int of steps

Then lerp towards that goal:

transform.position.x = Mathf.Lerp(transform.position.x, goal, speed*Time.deltaTime); //Where speed would be the multiplier to reach into position

You would also want to clamp that goal so it never exceed the limits of the present world.

goal = Mathf.Clamp(goal, minimum, maximum);

You have to implement this into your system and specialize it for your needs, although this should be the only logic you'll need to make it swipe and flick. Preferably you'd create functions where you'd check what phase the touch is in, if Input.touchCount==0 you'd initiate the lerp towards the goal.

Add comment · Show 4 · Share

save · Mar 13, 2012 at 10:17 AM 0

Share

Examples will update soon /$$anonymous$$r Edit..

zombiewalker · Mar 23, 2012 at 11:55 AM 0

Share

This clever line saves me lots of time: goal = $$anonymous$$athf.Round(transform.position.x/goalGrid)*goalGrid; Everything works, except: 1.game always needs to wait about 10 seconds, then the page can "snap" to the goal position. 2.I am using " transform.position = Vector3.Lerp(transform.position, new Vector3(goalPos, 0, 0) , Time.time*smoothSpeed); " But if I put it inside "if(Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Ended)" , the "damp" animation won;t work. Still no ideas what's going on...

But your code really saved my life!

infinitypbr · Mar 02, 2013 at 03:30 AM 0

Share

This is helpful code.

game-dev333 · Feb 15, 2014 at 06:04 AM 0

Share

Everything works fine, but limit is not effecting at all.

why is it so?

Answer 2

Thanks for replying so fast! I am digesting your solution now. But I met a problem when I am getting touchDelta value (to see if an user stopped/lifted his finger). Here are my code, in my idea, it's supposed emit some particles, but it didn't response anything without any errors:

pragma strict

 var fx1: GameObject;
 var fx2: GameObject;
 
 function Start () {
 
 }
 
 function Update () 
 {
     if (Input.touchCount>0 && Input.GetTouch(0).phase==TouchPhase.Ended) 
     {
         var touchDelta : Vector2 = Input.GetTouch(0).deltaPosition;
         if (touchDelta.x >5) 
         {
             Instantiate(fx1, transform.position, Quaternion.identity);
         
         } //This was a flick to the left with magnitude of 5
         if (touchDelta.x <-5) 
         {
             Instantiate(fx2, transform.position, Quaternion.identity);
         } //This was a flick to the right with magnitude of 5
     }
 }

How to create "Swipe-Page" or "Slide-Page" effects?

2 Replies

pragma strict

Your answer

Follow this Question

Related Questions