Sencha Touch 2 中的动画尺寸 [英] Animating dimensions in Sencha Touch 2

问题描述

我正在尝试为数据视图的高度设置动画，但它目前只是围绕视口滑动面板，而不是将其保持在原位并更改其高度.代码如下:

I'm trying to animate the height of a dataview, but it's currently just sliding the panel around the viewport instead of keeping it in place and changing it's height. The code is as follows:

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

例如，height=200，newHeight=100 将导致数据视图立即下降，使其顶部位于视口下方 200 像素处，然后动画回到视口顶部.

For instance, height=200, newHeight=100 will result in the dataview dropping immediately so that it's top is at 200px below the viewport, and then animating back to the top of the viewport.

我怎样才能让它改变高度?谢谢.

How can I get it to change the height? Thanks.

推荐答案

尝试使用 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()
                    }
                });
            }
        });
    }
});

这篇关于Sencha Touch 2 中的动画尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！