[TIMOB-10429] Android: Animate doesn't redraw label when width is larger than parent window

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2013-03-06T23:19:18.000+0000
Affected Version/s	Release 3.0.0
Fix Version/s	Release 3.1.0, 2013 Sprint 05 Core, 2013 Sprint 05
Components	Android
Labels	core, insight, module_animation, parity, qe-testadded
Reporter	Sam Cleaver
Assignee	Allen Yeung
Created	2012-08-13T08:56:52.000+0000
Updated	2013-07-16T12:09:44.000+0000

Description

In a view there is a label whose string size is more than the view size,the label is animated to left. There is a slag to display the right side of the label. It is only displayed when the animation is over. Its getting chopped off. Sample app.js:


var win = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var view = Ti.UI.createView({
	width:'90%',
});
var label = Titanium.UI.createLabel({
	backgroundColor:'red',
	color:'#999',
	text:'This is a paragraph. This is a paragraph. This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.',
	wordWrap:false,
});

var animation = Titanium.UI.createAnimation({
	left:-100,
    duration:5000
}); 
animation.addEventListener('complete',function() { 
	animation.left = 0;
	label.animate(animation); });
label.animate(animation);
view.add(label);
win.add(view);

win.open();

Steps to Reproduce: 1.Launch the app. 2.Notice the label getting chopped off to the right end. 3.It will displayed at the end of the animation. Please find the four screenshots attached in series.

Attachments

File	Date	Size
AnimateLabelBug.png	2012-08-13T08:56:52.000+0000	5128
first.png	2012-08-13T17:51:53.000+0000	26907
fourth.png	2012-08-13T17:51:53.000+0000	18599
second.png	2012-08-13T17:51:53.000+0000	27368
third.png	2012-08-13T17:51:53.000+0000	18435
wordWrapFalse.png	2012-08-13T14:23:03.000+0000	10693

Comments

Amuktha Akkinepally 2012-08-13

It exhibits this behavior because the wordWrap is explicitly set as false. It works fine if the wordWrap property is set as 'true'. However, wordWrap is by default set as true. In fact it is exhibiting the correct behavior. Please find the attached code.

   var win = Titanium.UI.createWindow({  
       title:'Tab 1',
       backgroundColor:'#fff'
   });
   var view = Ti.UI.createView({
   	width:'90%',
   });
   var label = Titanium.UI.createLabel({
   	backgroundColor:'red',
   	color:'#999',
   	text:'This is a paragraph. This is a paragraph. This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.',
   	wordWrap:true,//this is what you want it to be false. It works if its true and exhibits correct behavior if it false as well.
   });
   label.animate({
   	left:100,
   	duration:500
   })
   view.add(label);
   win.add(view);
   
   win.open();

Sam Cleaver 2012-08-13

Ahh, because I'm trying to create a ticker/marquee style component I had the duration set to a high number (so it went along slowly) and going left (negative left value). The redraw doesn't happen until the end of the animation which isn't really a good user experience. I could use a setInterval method to move it left but that kind of defeats the purpose of having an animate function! You can see what I mean by changing the animate code to the following: label.animate({ left:-100, duration:3000 })

Amuktha Akkinepally 2012-08-13

Sam, Could you please try this code.

   var win = Titanium.UI.createWindow({  
       title:'Tab 1',
       backgroundColor:'#fff'
   });
   var view = Ti.UI.createView({
   	width:'90%',
   });
   var label = Titanium.UI.createLabel({
   	backgroundColor:'red',
   	color:'#999',
   	text:'This is a paragraph. This is a paragraph. This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.',
   	wordWrap:true,//this is what you want it to be false. It works if its true and exhibits correct behavior if it false as well.
   });
   // label.animate({
   	// left:-50,
       // duration:3000
   // })
   var animation = Titanium.UI.createAnimation({
   	left:-100,
       duration:3000
   }); 
   animation.addEventListener('complete',function() { 
   	animation.left = 0;
   	label.animate(animation); });
   label.animate(animation);
   view.add(label);
   win.add(view);
   
   win.open();

Let me know how it goes.

Sam Cleaver 2012-08-13

Okay so I guess with wordWrap set to true that makes sense. (as the width of the label is just the width of the view). However if wordWrap is set to false then the width of the label is more than the width of the view. This means when you move it left it should obviously show the rest of the content. It doesn't do this until the end of the animation. I've attached an image to try and demonstrate what I mean.
Allen Yeung 2013-02-27

PR: https://github.com/appcelerator/titanium_mobile/pull/3911
Shyam Bhadauria 2013-03-12

Environment used for verification - Titanium SDK: 3.1.0.v20130311192922 Titanium Studio:3.0.2.201302151605 Device: Samsung GALAXY Note (2.3.6)

JSON Source