[TIMOB-13762] Mobile Web: Cannot execute animation second time
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Low |
Status | Closed |
Resolution | Won't Fix |
Resolution Date | 2017-06-26T21:54:09.000+0000 |
Affected Version/s | Release 3.1.0, Release 3.2.0 |
Fix Version/s | n/a |
Components | MobileWeb |
Labels | parity |
Reporter | Anatoliy Odukha |
Assignee | Chris Barber |
Created | 2013-04-30T16:55:28.000+0000 |
Updated | 2018-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
File | Date | Size |
---|---|---|
app.js | 2013-04-30T16:55:28.000+0000 | 2945 |
Tested and confirmed on Samsung Galaxy S2 Android 2.3.6 with the Android Browser. Ti SDK 3.1 GA and 3.2 CI.
Resolving as "Won't Fix" as MobileWeb has been deprecated.
Closing as will not fix.