Animating a character?

You must Login before you can answer or comment on any questions.

Hello all,

So I wanted to create an app in which there is a red square and two arrow keys. When the user holds on either arrow key, the square moves in that direction. I tried to do this using square.animate in which the square is a view, but the animate doesn't seem to be working. What happens is that the square will move in either direction once and then just get stuck at the new position. Does anyone know a different way to approach this problem? Also, which event listener should I be using? (I used touchstart earlier)

Thanks in advance!

— asked 10 months ago by Sahil Khan
2 Comments

  • @sahil do u want the sqaure to be at original position after the button is released ??

    — commented 10 months ago by Sahil Grover

  • no i want it to be at the new position

    — commented 10 months ago by Sahil Khan

2 Answers

Accepted Answer

Try something like this if u want 

left_button.addeventlistener('touchstart', function() {
    square.animate_left()
})
 
left_button.addeventlistener('touchend', function() {
    square.animate__to_original()
})
left_button.addeventlistener('touchcancel', function() {
    square.animate__to_original()
})
right_button.addeventlistener('touchstart', function() {
    square.animate_right()
})
right_button.addeventlistener('touchstart', function() {
    square.animate__to_original()
})
right_button.addeventlistener('touchcancel', function() {
    square.animate__to_original()
})
COmment below if you want something else to happen !!!

— answered 10 months ago by Sahil Grover
answer permalink
13 Comments

  • Thanks, but I need something more specific.... As in there is no animate_right or animate_left method, so what can I use instead?

    — commented 10 months ago by Sahil Khan

  • @sahil 

    left_button.addeventlistener('touchstart', function() {
    square.animate_left()
})
left_button.addeventlistener('touchend', function() {
    square.animate__to_original()
})
left_button.addeventlistener('touchcancel', function() {
    square.animate__to_original()
})
 
right_button.addeventlistener('touchstart', function() {
    square.animate_right()
})
right_button.addeventlistener('touchstart', function() {
    square.animate_to_original()
})
right_button.addeventlistener('touchcancel', function() {
    square.animate_to_original()
})
 
 
// ---------- Function To Animate -------- //
 
function   animate_left(square){
    // ..... write code here to animate the object to the left ....
}
 
function   animate_to_original(square){
    // ..... write code here to animate the object to the original position ....
}
 
function   animate_right(square){
    // ..... write code here to animate the object to the right ....
}

    Is that fine or you want me to write code for animation as well......

    — commented 10 months ago by Sahil Grover

  • OOOPS did a silly mistake

    Do

    animate_right(square);
    instead of 
    square.animate_right();

    Thanks

    — commented 10 months ago by Sahil Grover

  • Show 10 more comments

From here you can get more information about animations

http://cssgallery.info/seven-days-with-titanium-day-6%E2%80%93animations-and-transforms/

Your Answer

This question has been locked and cannot accept new answers.