Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-13762] Mobile Web: Cannot execute animation second time

GitHub Issuen/a
TypeBug
PriorityLow
StatusClosed
ResolutionWon't Fix
Resolution Date2017-06-26T21:54:09.000+0000
Affected Version/sRelease 3.1.0, Release 3.2.0
Fix Version/sn/a
ComponentsMobileWeb
Labelsparity
ReporterAnatoliy Odukha
AssigneeChris Barber
Created2013-04-30T16:55:28.000+0000
Updated2018-04-04T23:20:17.000+0000

Description

*Actual result* On Mobile Web an animation does not repeat. *Expected result* Animation should repeat on each click. On Android native it works as expected. *Steps to reproduce* 1. Run the attached sample on Mobile Web (even standard Firefox browser will reproduce the issue) 2. Tap "Animate X" button and verify the red block moves to the right corner 3. Verify that a second tap of the button has no effect 4. To see expected behavior: Run on native Android and tap the "Animate X" button 5. Verify the animation is repeated every time the "Animate X" button is pressed *Test case* Attachment has a clipping issue, fixed code:
Titanium.UI.setBackgroundColor('#000');

var win = Titanium.UI.createWindow({
	backgroundColor : '#fff',
	layout : "absolute"
});

var container = Ti.UI.createView({
	left : 10,
	right : 10,
	top : 10,
	height : 200,
	layout : "horizontal"
});

var animateX = Ti.UI.createButton({
	title : "Animate X"
});
var animationX = Ti.UI.createAnimation({
	left : 200,
	duration : 3000,
	delay : 1000,
	repeat : 2,
	//	autoreverse: true,
	visible : true
});

var animateXpromise;
animateX.addEventListener("click", function() {
	block.left = 0;
	block.animate({
		left : (win.rect.width - block.rect.width),
		duration : 1000
	});
});
container.add(animateX);

var animateY = Ti.UI.createButton({
	title : "Animate Y"
});
animateY.addEventListener("click", function() {
	block.animate({
		top : 400,
		duration : 5000
	}, function() {
		Ti.API.log("Y animation finished (" + block.left + "," + block.top + ")");
	});
});
container.add(animateY);

var bgbutton = Ti.UI.createButton({
	title : "BG Color"
});
bgbutton.addEventListener("click", function() {
	block.animate({
		backgroundColor : "#0F0",
		duration : 4000
	});
});
container.add(bgbutton);

var opacitybutton = Ti.UI.createButton({
	title : "Fade out"
});
opacitybutton.addEventListener("click", function() {
	block.animate({
		opacity : 0,
		duration : 2000
	});
});
container.add(opacitybutton);

var opacitybutton2 = Ti.UI.createButton({
	title : "Fade in"
});
opacitybutton2.addEventListener("click", function() {
	block.animate({
		opacity : 1,
		duration : 2000
	});
});
container.add(opacitybutton2);

var transform2dbutton = Ti.UI.createButton({
	title : "2D"
});
transform2dbutton.addEventListener("click", function() {
	var m = Ti.UI.create2DMatrix();
	block.animate({
		duration : 4000,
		transform : m.scale(2).rotate(720)
	});
});
container.add(transform2dbutton);

var pause = Ti.UI.createButton({
	title : "Pause X"
});
pause.addEventListener("click", function() {
	animateXpromise.pause();
});
container.add(pause);

var resume = Ti.UI.createButton({
	title : "Resume X"
});
resume.addEventListener("click", function() {
	animateXpromise.resume();
});
container.add(resume);

var cancel = Ti.UI.createButton({
	title : "Cancel X"
});
cancel.addEventListener("click", function() {
	animateXpromise.cancel();
});
container.add(cancel);

var matixAnim = Ti.UI.createButton({
	title : "Matrix Animation"
});
matixAnim.addEventListener("click", function() {
	var matrix = Ti.UI.create2DMatrix()
	matrix = matrix.rotate(90);
	matrix = matrix.scale(2, 2);
	var a = Ti.UI.createAnimation({
		transform : matrix,
		duration : 1000,
		autoreverse : true,
		repeat : 2
	});
	block.animate(a);
});
container.add(matixAnim);

var block = Ti.UI.createView({
	backgroundColor : "red",
	left : 10,
	top : 110,
	width : 20,
	height : 20
});

win.add(container);
win.add(block);
win.open();

Attachments

FileDateSize
app.js2013-04-30T16:55:28.000+00002945

Comments

  1. Daniel Sefton 2013-05-06

    Tested and confirmed on Samsung Galaxy S2 Android 2.3.6 with the Android Browser. Ti SDK 3.1 GA and 3.2 CI.
  2. Yaroslav Pidstryhach 2013-05-08

  3. Lee Morris 2017-06-26

    Resolving as "Won't Fix" as MobileWeb has been deprecated.
  4. Eric Merriman 2018-04-04

    Closing as will not fix.

JSON Source