Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-9733] iOS: Change the default duration and minimum duration for animation on imageview

GitHub Issuen/a
TypeSub-task
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2012-06-29T14:24:33.000+0000
Affected Version/sRelease 2.1.0
Fix Version/sSprint 2012-13 API
ComponentsiOS
Labelsapi, parity
ReporterSabil Rahim
AssigneeSabil Rahim
Created2012-06-22T15:24:02.000+0000
Updated2013-01-14T03:24:17.000+0000

Description

Change the default duration and minimum animation time for imageviews to be consistent on all platforms. Change it to reflect the following values: *Default Duration: 200ms *Minimum Duration: 30ms

Testing Instruction.

KitchenSink > Base UI > ImageViews > animated. and to verify it sets the correct default and min time

please include campfire images from KitchenSink and update the path in line 6 accordingly.

var win = Ti.UI.createWindow({fullscreen: false});
// load images
var images = [];
for (var i=1;i<18;i++)
{
	images.push('images/campFire' + ((i<10)?'0'+i:i)+'.gif');
}

var imageView = Titanium.UI.createImageView({
	images:images,
	//duration:100, // in milliseconds, the time before next frame is shown
	repeatCount:0,  // 0 means animation repeats indefinitely, use > 1 to control repeat count
	top:0
});


var frame = Ti.UI.createLabel({
	text:'',
	color:'white',
	width:'auto',
	height:'auto',
	font:{fontSize:48,fontFamily:'Helvetica Neue'}
});


//
// IMAGE VIEW EVENTS
//

// listen for load event (when all images are loaded)
imageView.addEventListener('load', function(e)
{
	// hide indicator from app.js
	Titanium.App.fireEvent('hide_indicator');

	// start animation
	imageView.start();
});

// listen for start event (when animation is started)
imageView.addEventListener('start', function()
{
	Titanium.API.info('ImageView animation started');
	l.text = 'Duration = ' + imageView.duration + ' ms (re-start to apply)';
});

// listen for stop event (when animation is stopped)
imageView.addEventListener('stop', function()
{
	Titanium.API.info('ImageView animation stopped');
});

// listen for change event (when animation is changed)
imageView.addEventListener('change', function(e)
{
	Titanium.API.info('ImageView animation frame has changed, index ' + e.index);
	frame.text = e.index;
});

win.add(imageView);

//
// CONTROLS
//

// start animation
var start = Titanium.UI.createButton({
	title:'Start Animation',
	height:30,
	width:120,
	font:{fontSize:13, fontFamily:'Helvetica Neue'},
	top:10,
	left:10
});
start.addEventListener('click', function()
{
	if (imageView.animating === false)
	{
		imageView.start();
	}
});
win.add(start);

// reverse animation
var reverse = Titanium.UI.createButton({
	title:'Reverse',
	height:30,
	width:120,
	font:{fontSize:13, fontFamily:'Helvetica Neue'},
	top:130,
	left:10
});
reverse.addEventListener('click', function()
{
	imageView.reverse = !imageView.reverse;
});
win.add(reverse);

// stop animation
var stop = Titanium.UI.createButton({
	title:'Stop Animation',
	height:30,
	width:120,
	font:{fontSize:13, fontFamily:'Helvetica Neue'},
	top:10,
	right:10
});
stop.addEventListener('click', function()
{
	if (imageView.animating)
	{
		imageView.stop();
	}
});
win.add(stop);

// pause animation
var pause = Titanium.UI.createButton({
	title:'Pause Animation',
	height:30,
	width:120,
	font:{fontSize:13, fontFamily:'Helvetica Neue'},
	top:90,
	left:10
});
pause.addEventListener('click', function()
{
	if (imageView.animating)
	{
		imageView.pause();
	}
});
win.add(pause);

// resume animation
var resume = Titanium.UI.createButton({
	title:'Resume Animation',
	height:30,
	width:120,
	font:{fontSize:13, fontFamily:'Helvetica Neue'},
	top:90,
	right:10
});
resume.addEventListener('click', function()
{
	if (imageView.paused)
	{
		imageView.resume();
	}
});
win.add(resume);

// increase duration
var durationUp = Titanium.UI.createButton({
	title:'Duration++',
	height:30,
	width:120,
	font:{fontSize:13, fontFamily:'Helvetica Neue'},
	top:50,
	left:10
});

// help text
var l = Titanium.UI.createLabel({
	text:'Duration = 110 ms (re-start to apply)',
	bottom:10,
	color:'white',
	width:'auto',
	height:'auto'
});

durationUp.addEventListener('click', function()
{
	imageView.duration += 100;
	l.text = 'Duration = ' + imageView.duration + ' ms (re-start to apply)';

});
win.add(durationUp);

// decrease duration
var durationDown = Titanium.UI.createButton({
	title:'Duration--',
	height:30,
	width:120,
	font:{fontSize:13, fontFamily:'Helvetica Neue'},
	top:50,
	right:10
});


durationDown.addEventListener('click', function()
{
	if (imageView.duration > 100)
	{
		imageView.duration -= 100;
	}
	else if (imageView.duration != 0)
	{
		imageView.duration -= 10;
	}
	l.text = 'Duration = ' + imageView.duration + ' ms (re-start to apply)';

});
win.add(durationDown);

win.add(l);

win.add(frame);


win.open();

Comments

  1. Max Stepanov 2012-06-29

    PR merged https://github.com/appcelerator/titanium_mobile/pull/2469
  2. Shyam Bhadauria 2013-01-14

    Verified with following env. Titanium SDK:3.0.0.GA Titanium  Studio:3.0.1.201212181159 Device: iOS simulator 6.0

JSON Source