CODEWITHSUNDEEP
titanium
whitebear
whitebear

Reputation: 12461

View slide animation from bottom of the screen to top

I would like to animate a view.

I want the view to slide from the bottom to the top of the screen.

I wrote this code, but the view doesn't show up.

myWin.add(myView);
myView.height = '0%';
var expand= Ti.UI.createAnimation({
    height: '100%',
    duration: 300
});
myView.animate(expandView);

Reference is this document

Upvotes: 0

Views: 596

Answers (3)

frank jorsn
frank jorsn

Reputation: 499

@whitebear. In your problem, you want make the view slide to top from the bottom, but you had taken a wrong way. The way you had taken is a Shape Change Animation, which want to change the height of the view to make it. However it's will never get the sliding action you want, if your code work, what you will see is the view will get more and more bigger until fill the window, not a sliding action.

What you want is a Position Change Animation for the view. Just change the top value of the view can make it. Example:

var view = Ti.UI.createView({
    top: '-100%',             //the view can't be see at the bottom
    width: '100%',
    height: '100%',
    backgroundColor: 'red'
});

var ani = Ti.UI.createAnimation({
    top: 0,                   //show the view from the bottom to top
    duration: 3000
});

view.animate(ani);

Just have a try, I hope this can help you. If you really want to change the height of the view to get the effect, maybe you can define a method to set the view height with the time. Good luck!

Upvotes: 2

Swanand
Swanand

Reputation: 1138

For you requirement try this

var win = Ti.UI.createWindow({ backgroundColor : '#fff'});
var myView = Ti.UI.createView({backgroundColor : 'red'});
win.add(myView);
myView.height = '0%';
myView.bottom = '0'; // basically the view has been added at bottom of window

var expand= Ti.UI.createAnimation({
    height: '100%',
    duration: 1300
});
myView.animate(expand);// and you are only increasing the view's height in animate

Upvotes: 0

Mushood Munir
Mushood Munir

Reputation: 64

You should call animate method of view passing it reference of animation object you created.

myView.animate(expand);

Upvotes: 0

Related Questions