我正在使用Titanium并在iOS7上运行模拟器。我想要一张像翻动画一样的卡片。我有一半的工作。目前它会从front
翻转到back
,但只要我再次点击它,应用就崩溃了,我的控制台也没有显示任何内容。
文档说:
The new view being transitioned to should NOT be a child of another view or of the animating view.
也许我理解错了,因为我似乎无法做到这一点。到目前为止我的代码是:
var win = Ti.UI.currentWindow;
var noThumbColors = ['#555555','#cccccc'];
var noThumbColors2 = ['#ff0000','#000'];
var views = [];
var fronts = [];
var backs = [];
for (var i = 0; i < 1; i++)
{
fronts[i] = Ti.UI.createView({
id:i,
name:"front",
width:150,
height:150,
backgroundGradient:{
type: 'linear',
startPoint: { x: '0%', y: '0%' },
endPoint: { x: '0%', y: '100%' },
colors: [ { color: noThumbColors[0], offset: 0.0}, { color: noThumbColors[1], offset: 1.0 } ],
},
currentAngle: 10
});
backs[i] = Ti.UI.createView({
id:i,
name:"back",
width:150,
height:150,
backgroundGradient:{
type: 'linear',
startPoint: { x: '0%', y: '0%' },
endPoint: { x: '0%', y: '100%' },
colors: [ { color: noThumbColors2[1], offset: 0.0}, { color: noThumbColors2[0], offset: 1.0 } ],
},
currentAngle: 10
});
win.add(backs[i]);
win.add(fronts[i]);
fronts[i].addEventListener('click', function(e)
{
log(e.source.name);
t = Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT;
e.source.animate({view:backs[e.source.id],transition:t});
});
backs[i].addEventListener('click', function(e)
{
log(e.source.name);
t = Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT;
e.source.animate({view:fronts[e.source.id],transition:t});
});
}
function log(msg)
{
Ti.API.info(msg);
}
var win = Ti.UI.currentWindow;
var noThumbColors = ['#555555','#cccccc'];
var noThumbColors2 = ['#ff0000','#000'];
var containers = [];
var fronts = [];
var backs = [];
for (var i = 0; i < 3; i++)
{
containers[i] = Ti.UI.createView({
top:50 + (i * 155),
width:150,
height:150
});
fronts[i] = Ti.UI.createView({
id:i,
name:"front",
width:150,
height:150,
backgroundGradient:{
type: 'linear',
startPoint: { x: '0%', y: '0%' },
endPoint: { x: '0%', y: '100%' },
colors: [ { color: noThumbColors[0], offset: 0.0}, { color: noThumbColors[1], offset: 1.0 } ],
},
currentAngle: 10
});
backs[i] = Ti.UI.createView({
id:i,
name:"back",
width:150,
height:150,
backgroundGradient:{
type: 'linear',
startPoint: { x: '0%', y: '0%' },
endPoint: { x: '0%', y: '100%' },
colors: [ { color: noThumbColors2[1], offset: 0.0}, { color: noThumbColors2[0], offset: 1.0 } ],
},
currentAngle: 10
});
containers[i].add(backs[i]);
containers[i].add(fronts[i]);
win.add(containers[i]);
}
win.addEventListener('click', function(e)
{
if (e.source.name === "front")
{
containers[e.source.id].animate({view:backs[e.source.id],transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT});
}
else if (e.source.name === "back")
{
containers[e.source.id].animate({view:fronts[e.source.id],transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT});
}
});
function log(msg)
{
Ti.API.info(msg);
}
答案 0 :(得分:2)
基于KitchenSink example app,您应该在要设置动画的父视图对象上调用动画。我还进行了小型重构,只创建了一个附加到窗口的eventListener,而不是为您创建的每个对象创建许多函数。使用JSHint是很好的,它会告诉你在for循环中创建函数不是最好的做法。
for (var i = 0; i < 1; i++) {
/* your code */
win.add(backs[i]);
win.add(fronts[i]);
/* both addEventListener() are removed from here */
}
win.addEventListener('click', function(e) {
var t;
if (e.source.name === 'front') {
t = Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT;
win.animate({view:backs[e.source.id],transition:t});
} else {
t = Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT;
win.animate({view:fronts[e.source.id],transition:t});
}
});
答案 1 :(得分:1)
这是翻转像卡片一样的窗口的简单方法
您必须按如下方式设置窗口的属性:
var win = Ti.UI.currentWindow({
height:'auto',
width:'auto,'
modal:true
});
win.open({
modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL,
modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
});
希望它会有所帮助。