[TIMOB-11181] iOS: View sublayer animations are not in sync

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2013-01-14T14:08:10.000+0000
Affected Version/s	Release 2.1.2, Release 2.1.3, Release 3.0.0
Fix Version/s	Release 3.1.0, 2013 Sprint 01 API, 2013 Sprint 01
Components	iOS
Labels	api
Reporter	Martin Guillon
Assignee	Vishal Duggal
Created	2012-09-26T14:57:44.000+0000
Updated	2014-06-19T12:44:05.000+0000

Description

When running the sample below you can see when clicking on the view that the gradient layer is not animating smoothly with the view itself. I discovered that when making that pull request https://github.com/appcelerator/titanium_mobile/pull/2996 I put the backgroundImage in a sublayer and i have the same behavior as with the gradient layer it might also be related to a fix i made: https://github.com/appcelerator/titanium_mobile/pull/2995 I mean when fixing this i realised that the gradient sublayer had its own animation (instead of being resize upon each view animation step)

var win = Ti.UI.createWindow({
backgroundColor:'white'
});

var stringVal = 'This is a string that can occupy multiple lines'
var small = true;
var v1 = Ti.UI.createView({
    width:50,
    top:10,
    right:0,
    height:50,
    backgroundColor:'blue',
    backgroundGradient: {
        type: 'linear',
        startPoint: { x: '50%', y: 0 },
        endPoint: { x: '50%', y:"100%" },
        colors: [ { color: 'green', offset: 0.0}, { color: 'red', offset: 1.0 } ],
        backfillStart:true
    }
});



win.add(v1);

v1.addEventListener('click',function(){
if (small)
{
    small = false;
    v1.animate({
        width:300,
        height:300
    });
}
else
{
    small = true;
    v1.animate({
        width:50,
        height:50
    });
}
});

win.open();

Comments

Daniel Sefton 2012-09-26

Tested and confirmed with iOS 6, TiSDK 2.1.2 GA, 2.1.3 RC and 3.0.0.

Vishal Duggal 2013-01-03

Expanded test case with autoreverse and repeat

   var win = Ti.UI.createWindow({
   backgroundColor:'white'
   });
    
   var stringVal = 'This is a string that can occupy multiple lines'
   var smallv1 = true;
   var smallv3 = true;
   var v1 = Ti.UI.createView({
       width:50,
       top:10,
       left:0,
       height:50,
       backgroundColor:'blue',
       backgroundGradient: {
           type: 'linear',
           startPoint: { x: '50%', y: 0 },
           endPoint: { x: '50%', y:"100%" },
           colors: [ { color: 'green', offset: 0.0}, { color: 'red', offset: 1.0 } ],
           backfillStart:true
       }
   });
    
   var v2 = Ti.UI.createView({
       width:50,
       bottom:10,
       left:0,
       height:50,
       backgroundColor:'blue',
       backgroundGradient: {
           type: 'linear',
           startPoint: { x: '50%', y: 0 },
           endPoint: { x: '50%', y:"100%" },
           colors: [ { color: 'green', offset: 0.0}, { color: 'red', offset: 1.0 } ],
           backfillStart:true
       }
   });
   
   var v3 = Ti.UI.createView({
       width:50,
       top:10,
       right:0,
       height:50,
       backgroundColor:'blue',
       backgroundGradient: {
           type: 'linear',
           startPoint: { x: '50%', y: 0 },
           endPoint: { x: '50%', y:"100%" },
           colors: [ { color: 'green', offset: 0.0}, { color: 'red', offset: 1.0 } ],
           backfillStart:true
       }
   }); 
    
   win.add(v1);
   win.add(v2);
   win.add(v3);
   
    
   v1.addEventListener('click',function(){
       if (smallv1)
       {
           smallv1 = false;
           v1.animate({
               width:300,
               height:300,
               duration:500,
           });
       }
       else
       {
           smallv1 = true;
           v1.animate({
               width:50,
               height:50,
               duration:500
           });
       }
   });
   
   v2.addEventListener('click',function(){
       v2.animate({
           width:233,
           height:322,
           autoreverse:true,
           repeat:5,
           duration:500
       })
   })
   
   v3.addEventListener('click',function(){
       if (smallv3)
       {
           smallv3 = false;
           v3.animate({
               width:233,
               height:322,
               autoreverse:false,
               repeat:3,
               duration:500
           })
       }
       else {
           smallv3 = true;
           v3.animate({
               width:50,
               height:50,
               autoreverse:false,
               repeat:3,
               duration:500
           })
       }
   })
   
   win.open();

Vishal Duggal 2013-01-03

Pull pending https://github.com/appcelerator/titanium_mobile/pull/3655
Martin Guillon 2013-01-16

thanks on this one
Paras Mishra 2013-02-25

View sublayer animations are in sync Verified on : Device : iPhone 5,iOS : 6 SDK version: 3.1.0.v20130223030327 CLI version : 3.0.24 OS : MAC OSX 10.7.5 XCode : 4.5.1 Studio : 3.0.2.201302041757

JSON Source