Animate a draggable view?

[Brian-McBride]

So, I want to animate my view onto the stage, upon which it is then draggable. I did a 2DTransform and got a strange result. The view animated just fine, but when I dragged it the view snapped back to it's pre-transformation position and then dragged.

In my case, I just want my draggable view to slide in from the bottom with a bounce stop. Basically indicating that a drawer is there to be pulled open.

Thanks for the aid!

[animecyc]

Are you animating using my Animator module or the stock Titanium animation component?

[animecyc]

Hi @Anatidae-Project, I had a free moment, take a look at the below sample code. You can see it in action here: http://cl.ly/1r0B32122L0T

This is using a still-in-development version of my Animator module (you can compile it yourself) here:

(function() {
    'use strict';

    var Draggable = require('ti.draggable'),
        Animator = require('com.animecyc.animator');

    var mainWindow = Ti.UI.createWindow({
            backgroundColor : '#FFF'
        }),
        testChild = Ti.UI.createView({
            width : 200,
            height : 200,
            backgroundColor : 'green'
        }),
        shelfView = Draggable.createView({
            width : Ti.UI.FILL,
            height : Ti.UI.FILL,
            top : Ti.Platform.displayCaps.platformHeight,
            bottom : -Ti.Platform.displayCaps.platformHeight,
            backgroundColor : 'red',
            draggableConfig : {
                enabled : false,
                axis : 'y',
                ensureBottom : true
            }
        });

    mainWindow.addEventListener('open', function openHandler() {
        mainWindow.removeEventListener('open', openHandler);

        var animationDuration = 1000,
            dur1 = animationDuration * .5,
            dur2 = animationDuration * .15,
            dur3 = animationDuration * .35;

        Animator.animate(shelfView, {
            top : 0,
            bottom : 0,
            delay : 500,
            duration : dur1,
            easing : Animator.EXPO_IN_OUT
        });

        shelfView.addEventListener('animated', function animated() {
            shelfView.removeEventListener('animated', animated);

            Animator.animate(shelfView, {
                top : 30,
                bottom : -30,
                duration : dur2,
                easing : Animator.CIRC_OUT
            });

            shelfView.addEventListener('animated', function animated() {
                shelfView.removeEventListener('animated', animated);

                Animator.animate(shelfView, {
                    top : 0,
                    bottom : 0,
                    duration : dur3,
                    easing : Animator.BOUNCE_OUT
                });

                shelfView.draggable.setConfig({
                    enabled : true,
                    minTop : 0,
                    maxTop : 100
                });
            });
        });
    });

    shelfView.add(testChild);
    mainWindow.add(shelfView);
    mainWindow.open();
}());

[Brian-McBride]

I was using the titanium animation call. I'll look at your module. Do you happen to have a dist (just for speed?)

[Brian-McBride]

I have a unique case that animation might help, but I might get odd results.

What I have is the draggable view holding a scrollView. The inner view is locked (scrollingEnabled=false) until the draggable view reaches the minTop. At that time, I set the draggable to enabled=false and the scrollView to scrollingEnabled=true.

That's the basics. Over all, working pretty good. Currently I am lacking kinetic momentum on the draggable view, but I'm guessing that can be created with your animation module just fine.

Here is the issue: When locking and unlocking the views while in a drag state, the touch events just cease to work. Meaning, one drags the draggable view, it hits the drop, unlocks the nested container and nothing. If you lift your finger and drag again, it works. I am seeking a smooth transition between the two.

Assuming I can get the touch position somehow (touchMove stops getting fired after a drag starts unfortunately) would calling an animation over and over work well? I know if you try that on iOS using 2DTransform it gives pretty good results. Each new transform kills the last one and the movement is smooth. On Android, each new 2DTransform causes flickering as I think the view bounces back to it's start and then quickly to the new finger position.

In an ideal world, I could just tell a view to start paying attention to the touch events again and start dragging.

[animecyc]

@Anatidae-Project You can download it here: https://github.com/animecyc/TitaniumAnimator/releases/tag/1.2.0-dev

[animecyc]

Also, I am currently in the Titanium IRC channel (my handle is AnimeCYC) if you need assistance.