如何在钛iphone动画行高度



我在钛iphone表视图工作。我尝试为每一行添加动画样式。

也就是说,当用户单击每一行时,行高需要增加,这样才能显示行中隐藏的内容。当用户再次点击时,行高需要降低。

我的代码是对于折叠视图,

var animation = Ti.UI.createAnimation({height: 1, duration: 500});
row.animate(animation);

,对于展开视图,

row.animate(Ti.UI.createAnimation({ height:200, duration:300 });

但上面两个代码都不起作用,

如果我设置行高而不使用动画,那么它的工作很好。如何应用动画样式的表视图行…

你可以试试这个

http://developer.appcelerator.com/question/119198/animating-row-height-changes

TableViewRow不能动画化。这是文档错误。你需要创建自己的动画函数(比如setTimeout)

当你改变行高时,行高默认是动画的,所以:

row.height = '40dp';

如果你直接将行高设置为数值,它将在iOS上默认为动画。默认动画将覆盖任何自定义动画,例如使用标准setTimeout javascript函数。

难点在于使行内容也显示为动画。假设row.details指向一个容器视图,其中包含要在展开时显示的隐藏行详细信息。它的高度最初设为0。下面的代码段将以平滑的方式使整行动画化:

var total_height_increase = 260;
var height_step = 5;
var duration = 200;
var time_step = duration * height_step / total_height_increase;
var num_steps = duration / time_step;
var i=0;
var increase_height = function(){
    setTimeout(function(){
        row.details.height += height_step;
        i += 1;
        if (i > num_steps) return;
        increase_height();
    }, time_step);          
};
increase_height();
row.height += total_height_increase;

最新更新