Animate a prefab 180 degrees over time when clicked using JS

Unity Engine
1

I am trying to make a simple game where the player will be flipping tiles over. I have already got the play area to generate all the cloned prefabs at start up, and I can click to toggle whether a tile is flipped over or not. However, right now I can only rotate the tiles 180 degrees instantaneously. To give it more visual appeal I would prefer to see the tile visibly flip from one side to the other when clicked, but I am running into all kinds of problems doing this. I currently have all my click detection on each cloned prefab in the OnMouseDown function, which works great. But when I try and do a Vector3.Lerp, the rotation only happens for the length of the mouse click, so instead of 180 degrees, I get about 2 degrees of rotation. I have also tried moving the rotation part of the script out to its own function on the prefab, in hopes that it would run to fruition free of the MouseDown event, but it still does the same thing. I know the rotation code works because if I put it in the Update function, all the tiles sit and spin endlessly. Here is the code on the prefab so you can see what is happening.

#pragma strict

static var flipped=0;
private var targetRotation: Vector3;
static var smooth =3f;

function Start () {

}

function Update () {

}

function OnMouseDown () {
    var temp: Vector3;
    print (this.name);
        if (flipped == 0) {
        FlipTile();
        flipped=1;
        print("FLiPPED!!!!");
    } else {
        FlipTile();
        flipped=0;
        print("-------------");
    }


}

function FlipTile (){
    targetRotation = transform.eulerAngles +180f * Vector3.up;
    transform.eulerAngles = Vector3.Lerp(transform.eulerAngles, targetRotation, smooth * Time.deltaTime);
    }

I am going to assume that I am putting this code in the wrong place, or my whole thought process is completely off track and I will have to implement this in a different way. But any help I can get would be greatly appreciated.

2

I do still have some code in there to debug that I am detecting the correct tile and what the toggle is set to (flipped or not).

3

I finally figured it out. It was what I thought it was, I just wasn’t sure how to control it. I needed to have the FlipTile function keep executing until the tile flipped all the way over, then stop. So, I modified my script and put the call to FlipTile in the Update() function, and only flips the tile if a variable is toggled on.

New code that works great:

#pragma strict

private var flipped=0;
private var flipping=0;
private var targetRotation: Vector3;
private var smooth =10f;


function Start () {
}

function Update () {
    if (flipping==1){
        FlipTile();
        if (transform.eulerAngles.y > 179){
            flipping=0;
        }
        if (transform.eulerAngles.y < 1){
            flipping=0;
        }
       
    }
}

function OnMouseDown () {
    var temp: Vector3;
    if (flipping==0){
        if (flipped == 0) {
                targetRotation = transform.eulerAngles +180f * Vector3.up;
            FlipTile();
            flipping=1;
            flipped=1;
        } else {
            targetRotation = transform.eulerAngles -180f * Vector3.up;       
            FlipTile();
            flipping=1;
            flipped=0;
            print("-------------");
        }
    }

}

function FlipTile (){
    transform.eulerAngles = Vector3.Lerp(transform.eulerAngles, targetRotation, smooth * Time.deltaTime);
    }