2016-03-20 8 views
0

AppceleratorのメーカーSDK 5.2.0.GAでテストし、次のコードスニペットをご覧ください。チタンアニメーションのラベルの色

// 
// create base UI tab and root window 
// 
var win0 = Titanium.UI.createWindow({ 
    title:'Tab 1', 
    backgroundColor:'#fff' 
}); 

var label0 = Titanium.UI.createLabel({ 
    color:'red', 
    text:'I am Window 1', 
    font:{fontSize:20,fontFamily:'Helvetica Neue'}, 
    textAlign:'center', 
    width:'auto' 
}); 

view0 = Titanium.UI.createView({ 
borderRadius:10 
,width: 350 
,height:40 
,opacity:1 
,color:"blue" 
}); 

view0.add(label0); 

win0.add(view0); 

win0.open(); 

// Working 
//win0.animate({backgroundColor:"blue", duration: 1000}); 

// Working 
//view0.animate({backgroundColor:"blue", duration: 1000}); 

// Working 
//label0.animate({backgroundColor:"blue", duration: 1000}); 

// "Working", but there is no duration (animation takes place right away) 
label0.animate({color:"blue", duration: 1000}); 

// "Working", but there is no duration (animation takes place right away after the timer 5 sec timeout) 
//setTimeout(function(){ 
// label0.animate({color:"blue", duration: 1000}); 
//},5000); 

// If win0.open is placed before the code below, there is no animation at all. 
// If win0.open is placed after the code below, there is animation, but it takes place right away. 
//win0.addEventListener('postlayout', function(e){ 
// label0.animate({color:"blue", duration: 1000}); 
//}); 

コードビュー内の1つのビューと1つのラベルを持つウィンドウを作成します。

アニメーションのある4つの行は、一度に1つずつテストされます(テストするには、一度に1つずつコメントを外します)。最初のものは、1秒間にウィンドウの背景色をアニメートします。うまく動作します。 2番目のビューは、ビューの背景色をアニメートします。 3番目のラベルは、ラベルの背景色をアニメートします。そして4番目のものは、ラベルテキストの色をアニメートすることを意図しています。これは期待通りに機能しません。アニメーションは実行されますが、1秒間ではなく直ちに実行されます。

コードなどで間違っている可能性のあることはありますか?

答えて

2

アニメーションが表示されないのは、ウィンドウを開いた直後ですからです。 setTimeoutメソッドを追加しよう:

setTimeout(function(){ 
    label0.animate({color:"blue", duration: 1000}); 
},5000); 

や、ポストレイアウトイベントウィンドウの後、あなたのアニメーションを実行します。https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Window-event-postlayout

win0.addEventListener('postlayout', function(e){ 
    label0.animate({color:"blue", duration: 1000}); 
}); 
+0

私はコメントから二つの新しいコード例を試してみましたが、それらのどれもの間、時間を与えませんでしたアニメーション、それはまだすぐに起こった...これらの例がうまくいけば、背景色をアニメーション化することはアニメーションの持続時間で動作したと考えて、少し混乱させるのではないでしょうか? – blaffen

関連する問題