在Sencha Touch 2中实现尺寸动画效果

Question

我正在尝试动画化数据视图的高度，但目前只是在视口中滑动面板，而不是保持在原地并改变其高度。 代码如下：

Ext.Anim.run(el, 'slide', {
  from: { height: height },
  to: { height: newHeight },
  out: false,
  direction: 'up',
  easing: 'ease-out',
  duration: 1000
});

例如，height=200，newHeight=100会导致数据视图立即下降，使其顶部在视口以下200px，并动画返回到视口顶部。

我该如何更改高度？谢谢。

- kmc

Answer 1

尝试使用Ext.Animator.run替代：

Ext.Animator.run({
    element: dataview.element,
    duration: 500,
    easing: 'ease-in',
    preserveEndState: true,
    from: {
        height: dataview.element.getHeight()
    },
    to: {
        height: 100
    }
});

以下是完整示例：

Ext.application({
    name: 'Sencha',

    launch: function() {
        var dataview = Ext.create('Ext.DataView', {
            fullscreen: true,
            style: 'background:red',
            store: {
                fields: ['text'],
                data: [
                    { text: 'one' },
                    { text: 'two' },
                    { text: 'three' }
                ]
            },
            itemTpl: '{text}'
        });

        Ext.Viewport.add({
            xtype: 'button',
            docked: 'top',
            handler: function() {
                Ext.Animator.run({
                    element: dataview.element,
                    duration: 500,
                    easing: 'ease-in',
                    preserveEndState: true,
                    to: {
                        height: 100
                    },
                    from: {
                        height: dataview.element.getHeight()
                    }
                });
            }
        });
    }
});

- rdougan

---

谢谢，那个有效。是我自己的问题还是Animator没有文档？ - kmc

目前来看不行。原因是我们（Sencha）想在2.1版本中更详细地研究它，可能会改变它的工作方式。我们不想在2.1更新中破坏人们的应用程序，因此我们决定保留现有的动画系统（Ext.Anim），即使它存在缺陷（正如您所遇到的）。在我们修复Ext.Animator之前，您最好查看源代码并查看可用属性。您最好从“src/fx/animation/Abstract.js”开始。 - rdougan

再次感谢。我认为Animator在Sencha 2.1中是最好的选择！这将使我的应用程序更加流畅。 - kmc

Answer 2

由于我无法添加评论，所以我必须将其作为单独的答案。我只是想补充一下rdougan所说的，并展示如何捕获动画结束事件。在上述情况下，我发现这是必要的，因为Sencha Touch的component.getTop/Left/Height/Width()函数在像所示的动画之后返回不正确的值。

dataview.setHeight(dataview.element.getHeight()); // you may or may not need this

console.log('height before\t', dataview.getHeight());

var a = new Ext.fx.Animation({
    element: dataview.element,
    duration: 500,
    easing: 'ease-in',
    preserveEndState: true,
    from: {
        height: dataview.element.getHeight()
    },
    to: {
        height: 100
    }
});

a.on('animationend', function (animation, element, isInterrupted) {
    console.log('height before\t', dataview.getHeight());
    dataview.setHeight(dataview.element.getHeight());
    console.log('height set\t', dataview.getHeight());
});

Ext.Animator.run(a);

我留下了一些日志，这样你就可以看到我的意思了。这个例子是针对ST 2.1 RC2编写的。

- jep

Answer 3

这里有一个干净的实用函数，您可以使用它来完成此操作

function animatron (target, prop, duration, to, from, easing) {
    // return if no target or prop
    if (target == null || prop == null) { return; }

    // defaults
    if (duration == null) { duration = 250; }
    if (to == null) { to = 0; }
    if (from == null) { from = target.getHeight(); }
    if (easing == null) { easing = 'ease-out'; }

    // to property
    var t = {};
    t[prop] = to;

    // from property
    var f = {};
    f[prop] = from;

    // Animation Options
    var opts = {
        duration: duration,
        easing: easing,
        element: target.element,
        from: f,
        preserveEndState: true,
        to: t
    };

    // Animation Object
    var anime = new Ext.fx.Animation(opts);

    // On animationend Event
    anime.on('animationend', function (animation, element, isInterrupted) {
        // Hide the target if the to is 0
        if (to == 0 && (prop == 'height' || prop == 'width')) {
            if (!isInterrupted) { target.hide(); }
        }

        // Update property if width or height
        if (prop == 'height') { target.setHeight(to); }
        if (prop == 'width') { target.setWidth(to); }

        // Dispatch 'animated' event to target
        target.fireEvent('animated', animation, element, to, from, isInterrupted);
    });

    // Show the target if it's hidden and to isn't 0
    if (target.getHidden() == true && to != 0) { target.show(); }

    // Run the animation
    Ext.Animator.run(anime);
}

您可以在目标元素上监听“animated”事件。

animatron(dataview, 'height', 500, 0);
dataview.addListener('animated', function (animation, element, to, from, isInterrupted) {
    console.log('animation ended');
    console.log('interrupted: '+ isInterrupted);
});

- Cam Tullos