Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15776] Android: Animation: Drag animation does not work on the view

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2014-06-20T18:31:27.000+0000
Affected Version/sRelease 3.2.0, Release 3.3.0
Fix Version/s2014 Sprint 05, 2014 Sprint 05 API, 2014 Sprint 10, 2014 Sprint 10 SDK, Release 3.3.0
ComponentsAndroid
Labelsmodule_animation, qe-3.2.0, qe-closed-3.3.0, qe-testadded, triage
ReporterParas Mishra
AssigneeHieu Pham
Created2013-11-21T09:54:23.000+0000
Updated2014-07-01T19:29:41.000+0000

Description

Android: Animation: Drag animation does not work on the view. This issue is reproducible on SDK: 3.1.3.GA and app crashes on SDK:3.1.2.GA Steps to reproduce: 1. Run the below app.
    var _window = Ti.UI.createWindow({
    backgroundColor : "#fff"
});
var annoViewPosition;
var view = Ti.UI.createView({
    borderWidth : 1,
    borderColor : "#000000",
    left : 0,
    top : 0,
    height: 100,
    width: 100
});
_window.add(view);
  
var lbltop;
var lblleft;
view.addEventListener('touchstart', function(e) {
        annoLblPosition = {
            top : e.source.top,
            left : e.source.left
        };
        pt = view.convertPointToView({ x:e.x, y:e.y }, _window);
        lbltop = pt.y;
        lblleft = pt.x;
});
  
view.addEventListener('touchmove', function(e) {
    pt = view.convertPointToView({ x:e.x, y:e.y }, _window);
    annoLblPosition.top += pt.y - lbltop;
    annoLblPosition.left += pt.x - lblleft;
     
    lbltop = pt.y;
    lblleft = pt.x;
     
    // This will also work
    //e.source.top = annoLblPosition.top;
    //e.source.left = annoLblPosition.left;
 
    e.source.animate({
        top : annoLblPosition.top,
        left : annoLblPosition.left,
        duration : 5,
    });
     
});
_window.open();
2. Drag Square on screen. Expected: Square can be moved to any position on the screen. Actual: Square does not move.

Comments

  1. Sunila 2014-02-18

    Added code to update the layout properties after the animation is done. https://github.com/appcelerator/titanium_mobile/pull/5357
  2. Sunila 2014-02-18

    Sample code
               var _window = Ti.UI.createWindow({
       	    backgroundColor : "#fff"
       	});
       	var annoViewPosition;
       	var view = Ti.UI.createView({
       	    borderWidth : 1,
       	    borderColor : "#000000",
       	    left : 0,
       	    top : 0,
       	    height: 100,
       	    width: 100
       	});
       	_window.add(view);
       	 
       	var lbltop;
       	var lblleft;
       	view.addEventListener('touchstart', function(e) {
       	        annoLblPosition = {
       	            top : e.source.top,
       	            left : e.source.left
       	        };
       	        pt = view.convertPointToView({ x:e.x, y:e.y }, _window);
       	        lbltop = pt.y;
       	        lblleft = pt.x;
       	});
       	 
       	view.addEventListener('touchmove', function(e) {
       		pt = view.convertPointToView({ x:e.x, y:e.y }, _window);
       	    annoLblPosition.top += pt.y - lbltop;
       	    annoLblPosition.left += pt.x - lblleft;
       	    
       	    lbltop = pt.y;
       	    lblleft = pt.x;
       	    
       	    // This will also work
       	    //e.source.top = annoLblPosition.top;
       	    //e.source.left = annoLblPosition.left;
       
       	    e.source.animate({
       	        top : annoLblPosition.top,
       	        left : annoLblPosition.left,
       	        duration : 5,
       	    });
       	    
       	});
       	_window.open();
       
  3. Sabil Rahim 2014-03-24

    3_2_X Backport : https://github.com/appcelerator/titanium_mobile/pull/5514
  4. Paras Mishra 2014-03-25

    Issue is reproducible using SDK:3.2.3 where as its working fine on Master's SDK:3.3.0 Environment used: Device : Google Nexus 5, Android Version: 4.4.2 Device: LG-P970, Android version: 4.0.4 SDK: 3.2.3.v20140324164913, 3.3.0.v20140324160921 CLI version : 3.2.1 OS : MAC OSX 10.9.2 Alloy: 1.3.1 ACS: 1.0.14 npm:1.3.2 Appcelerator Studio, build: 3.2.3.201403190645 titanium-code-processor: 1.1.0 XCode : 5.1
  5. Sabil Rahim 2014-03-25

    This issue seems fixed on master. Placing the merge-3.2.3 label to track the existence of the bug on 3_2_X branch.
  6. Priya Agarwal 2014-04-18

    Verified the issue with test environment: Appc-Studio:3.2.3.201404162038 sdk:3.3.0.v20140417173316 acs:1.0.14 alloy:1.3.1 npm:1.3.2 titanium:3.2.3-beta titanium-code-processor:1.1.1-beta1 xCODE:5.1.1 Device:Nexus5(v4.4.2),Iphone5(v7.1),Nexu7(v4.4.2) Drag Animation works but it is not as smooth as in iOS. After dragging a little the box starts fluctuating and disappears. Hence Reopening the issue.
  7. Sunila 2014-05-02

    Which code was run? Was it the one from my comment or the one in the ticket. The code in the ticket doesn't convert the location relative to the view and won't work.
  8. Hieu Pham 2014-05-02

    Updated test case. It works fine for me. Resolving it.
  9. Pragya Rastogi 2014-05-06

    Verified the fix on: OSX: 10.9.2 Xcode: 5.1.1 Studio - 3.3.0.201405011408 SDK -3.3.0.v20140505115416 acs-1.0.14 alloy-1.4.0-dev npm-1.3.2 titanium-3.3.0-dev titanium-code-processor-1.1.1 Device: HTC Desire V( 4.0.3) & iPhone 5 (7.1), LG-P970 (v4.0.4), Nexus 4 (v4.1.2), Nexus 5 (v4.4.2) Animation works smoothly on HTC Desire V( 4.0.3), iPhone 5 (7.1) and LG-P970 (v4.0.4) devices but does not work smoothly (After dragging a little the box starts fluctuating and disappears) on Nexus 4 (v4.1.2), Nexus 5 (v4.4.2) and Nexus 7(v4.3) device. Hence reopening this issue.
  10. Sunila 2014-05-08

    Tried on Galaxy note (Android 4.3), I can't reproduce the issue. I possibility I can think of is the ti.ui.defaultunit not being pixel as the values returned from touchmove and touchstart are pixels and top and left of the view will be in default units. Try setting ti.ui.defaultunit to pixel in app property file
  11. Pragya Rastogi 2014-05-15

    Verified the fix using: OSX: 10.9.2 Xcode: 5.1.1 Studio - 3.3.0.201405121247 SDK -3.3.0.v20140514163013 acs-1.0.14 alloy-1.4.0-alpha npm-1.3.2 titanium-3.3.0-dev titanium-code-processor-1.1.1 Device: Nexus 5 (4.4.2) View drag animation works as expected using px in "ti.ui.defaultunit" property
  12. Pragya Rastogi 2014-06-06

    Drag animation again fails on SDK: 3.3.0.v20140605150555 but works fine on previous sdk: 3.3.0.v20140514163013 Hence reopening for the build: OSX: 10.9.3 Xcode: 5.1.1 Appcelerator Studio: 3.3.0.201405271647 SDK -3.3.0.v20140605150555 acs-1.0.14 alloy-1.4.0-beta npm-1.3.2 titanium-3.3.0-beta2 titanium-code-processor-1.1.1 Device: Nexus 7 (4.3)
  13. Lokesh Choudhary 2014-06-09

    My observations with environment below with ti.ui.default unit set to "px" in tiapp.xml are: 1. On android 4.0.4 & 2.3.7: Animation is smooth, works as expected. 2. On android 4.1.1, 4.2.2, 4.3, 4.4.2: Animation is laggy, does not move with the touch as expected & lags behind. But, the view does not disappear or anything. Environment: Appc Studio : 3.3.0.201406061445 Ti SDK : 3.3.0.v20140609115713 Mac OSX : 10.8.5 Alloy : 1.4.0-beta2 CLI - 3.3.0-beta3 Code Processor: 1.1.1
  14. Samuel Dowse 2014-07-01

    Tested on: Mac OSX 10.9.3 Appcelerator Studio, build: 3.3.0.201406271159 Titanium SDK, build: 3.3.0.v20140627202512 Titanium CLI, build: 3.3.0-rc4 Alloy: 1.4.0-rc3 Android Device: Nexus 7 (4.2) Drag animation on Android 4.0.X and below is smooth and works as expected. Drag animation on Android 4.1.X and above is laggy, but works as expected. While the view does animate, it trails behind my finger significantly and occasionally jumps from one point to another.
  15. Samuel Dowse 2014-07-01

JSON Source