- Home /
How to create "Swipe-Page" or "Slide-Page" effects?
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
could You please to post your script that create this sliding page example ? thank U so mush
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.
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!
Everything works fine, but limit is not effecting at all.
why is it so?
Answer by zombiewalker · Mar 14, 2012 at 08:31 AM
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
}
}