I have a image which keeps on animating in up- down direction. On clicking the image the image should pause animating and clicking it again should resume animation.
I am using image view's pause() for now but it does nothing. Its mentioned that "This method works if multiple images are specified" but how can I use this for single image.
Please find the code in below link. Thank you
index.xml :
<Alloy>
<Window id="winIos">
<View id="vOne" class='viewSize'>
<ImageView id="one" class='oval' ></ImageView>
<ImageView id="a" image= "/images/img_1.png"></ImageView>
</View>
</Window>
</Alloy>
index.js
var osname = Ti.Platform.osname;
if (osname == 'iphone') {
var ANIMATION = require('/alloy/animation');
var win = $.winIos;
var randomArray=[];
var n = 1;
var rann;
function showAnimations(){
var imgName = "img_1.png";
var ranImg = "/images" + "/" + imgName;
win.getChildren()[0].id2 = imgName;
win.getChildren()[0].touchEnabled = true;
win.getChildren()[0].zIndex = 3;
win.getChildren()[0].getChildren()[1].image = ranImg;
animation = Ti.UI.createAnimation(); //animate image up
animation.top = 20;
animation.delay = 120;
animation.duration = 1200;
win.getChildren()[0].touchEnabled = true;
win.getChildren()[0].getChildren()[1].animate(animation);
animation.addEventListener('complete', function() {
animation1 = Ti.UI.createAnimation(); //animate image down
animation1.top = 159;
animation1.delay = 900;
animation1.duration = 1200;
win.getChildren()[0].getChildren()[1].animate(animation1);
animation1.addEventListener('complete', function() {
win.getChildren()[0].touchEnabled = false;
});
});
}
setInterval(showAnimations, 4300);
win.addEventListener('click', function(e) {
console.log("imgSrc" + JSON.stringify(e.source.getChildren()[1]));
if(e.source.getChildren()[1]){
e.source.getChildren()[1].pause();
}
});
win.addEventListener('close', function() {
clearInterval(showAnimations);
});
win.open();
}
index.tss
"#winIos":{
orientationModes:[Ti.UI.LANDSCAPE_RIGHT],
backgroundColor:'white',
id2:""
}
".viewSize":{
height:150,
width:150,
}
".oval":{
image:'/images/oval.png',
height:"50",
width:"150",
left:"0",
bottom:"-2",
touchEnabled:"false"
}
"#a":{
id2:'',
height:100,
width:70,
top:149,
touchEnabled:false,
}
"#vOne":{
id2:'',
left:"80",
touchEnabled:false,
top:"10",
zIndex:0
}
The ImageView pause() only works for multiple images as you've mentioned. That is a image slideshow, it has nothing to do with Ti.UI.Animation. You actually can't stop an animation on Android but there is an open PR (https://github.com/appcelerator/titanium_mobile/pull/10130) on implementing a stop().
Depending on your animation you could try to create a Lottie animation and use Ti.Animation (https://github.com/m1ga/ti.animation) since that includes pause and resume methods.
Related
the problem with the script I have is it starts out playing and then pauses when button is pressed I need the opposite. Plus I need the sound to be in sync with the length of the images in the array and both the image sequence and the sound file should play in a loop and start out as paused and play when the button is pressed.
HTML
<div>
<button id="bt1" onclick="togglePlay();toggle()"></button>
</div>
<script>
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
let
loop,
index = 0,
images = [
"cat/1.svg", "cat/2.svg", "cat/3.svg", "cat/4.svg", "cat/5.svg", "cat/6.svg", "cat/7.svg", "cat/8.svg",
"cat/9.svg", "cat/10.svg", "cat/11.svg", "cat/12.svg", "cat/13.svg", "cat/14.svg", "cat/15.svg", "cat/16.svg",
"cat/17.svg", "cat/18.svg"
];
function startLoop() {
loop = setInterval(() => {
document.querySelector('img').src = images[index];
index++;
// Loop images array
if (index % images.length === 0) {
index = 0;
}
}, 100);
}
function toggle() {
if (loop) {
clearInterval(loop);
loop = null;
} else {
startLoop();
}
}
startLoop();
function togglePlay() {
isPlaying ? myAudio.pause() : myAudio.play();
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
</script>
At first, my animation seems to work fine. However, after a few seconds, the animations become very jerky and laggy, I'm not sure why.
At first I thought it was due to the animation button I had which allows the user to start and stop the animation at will. However, even after I commented out the button, the animation continued to be laggy.
let camera, scene, renderer;
const loader = new GLTFLoader();
let mixer = null;
let controls;
const clock = new THREE.Clock();
let previousTime = 0;
//start and stop button
let runAnim = false;
let isPlay = true;
//animation
function animation() {
if (!isPlay) return;
const elapsedTime = clock.getElapsedTime();
const deltaTime = elapsedTime - previousTime;
previousTime = elapsedTime;
//Update mixer
if (mixer !== null) {
mixer.update(deltaTime);
}
// Update controls
controls.update();
window.requestAnimationFrame(animation);
render();
}
function render() {
renderer.render(scene, camera);
}
module.exports = function getImage() {
const mountRef = useRef(null);
useEffect(() => {
//Model
loader.load(`/gltf/1.gltf`);
mixer = new THREE.AnimationMixer(gltf.scene);
const action = mixer.clipAction(gltf.animations[0]);
action.play();
animation();
//Camera
camera = new THREE.PerspectiveCamera(
70,
window.innerWidth / window.innerHeight,
0.1,
100
);
camera.position.set(4, 0, 5);
scene = new THREE.Scene();
// Controls
controls = new OrbitControls(camera, renderer.domElement);
controls.update();
controls.enableDamping = true;
// Animation button
const animateButton = document.getElementById('animate-button');
const stopAnimation = (e) => {
if (runAnim) {
runAnim = false;
isPlay = true;
animation();
console.log('animation starts');
} else {
runAnim = true;
isPlay = false;
console.log('animation stops');
}
};
animateButton.addEventListener('click', stopAnimation);
return () => mountRef.removeChild(renderer.domElement);
}, []);
return (
<div>
<div ref={mountRef}>
<AnimationButton />
</div>
</div>
);
};
I am building an app in which I am using scrollView with 'scrollableview'. When scrolling the image, the view size is automatic increasing.
If I am giving the height in px then it is working fine but when I am giving height in % this code is not working fine. but, I need height in % only.
Here is my code:
var imageCollection = [
"/images/offers/oneplusOffer.jpg",
"images/offers/electronicsOffer.jpg",
"images/offers/shoesOffer.jpg",
"images/offers/watchOffer.jpg"
];
var viewCollection = [];
// Vertical ScrollBar
var scrollView = Ti.UI.createScrollView({
top:0,
left:0,
backgroundColor:'#f1f1f1',
layout:'vertical'
});
// offerBanner view
var bannerView=Ti.UI.createView({
height:"10%",
backgroundColor:"pink",
});
for (var i = 0; i < imageCollection.length; i++) {
var view = Ti.UI.createView({
backgroundColor: 'yellow'
});
var img = Ti.UI.createImageView({
image : imageCollection[i]
});
view.add(img);
viewCollection.push(view);
}
var scrollableView = Ti.UI.createScrollableView({
top:0,
views:viewCollection,
showPagingControl:false,
});
bannerView.add(scrollableView);
scrollView.add(bannerView);
//creating view
for(var i=0;i<7;i++){
var view=Ti.UI.createView({
top:"2%",
backgroundColor:"blue",
//height:"120",
height:"15%",
});
//adding view to scrollview
scrollView.add(view);
}
$.homeScreenWindow.add(scrollView);
$.homeScreenWindow.open();
Try below code,
var scrollView = Ti.UI.createScrollView({
top:0,
left:0,
backgroundColor:'#f1f1f1',
width: Ti.UI.FILL,
height: Ti.UI.SIZE,
layout:'vertical'
});
you can also give the above height in % as well. Try this.
I have this in the view index.xml:
<Alloy>
<Window class="container" fullscreen="true">
<View id="accueil">
<ImageView id="button_way"></ImageView>
</View>
</Window>
</Alloy>
and this in the controllers index.js
$.accueil.addEventListener("touchmove", function(e){
Ti.API.info(e.y);
});
My problème are if i start click in the imageview and i move the absolute position are to the image view and not to the view.
I don't no why...
Can you help me, thanks, and sorry for my english.
The touchmove event's coordinates are always relative to the view in which the initial touch occurred.
You need to convert the points in the image, to the points in the containing view, thankfully Titanium provides a helper method for that: convertPointToView
I'm not sure exactly what you are trying to accomplish but here is an example of using this function, apply it to what you need to do:
$.accueil.addEventListener("touchmove", function(e){
// If the points are in the image, convert them to the containing view
if(e.source == $.button_way) {
var imageViewPoint = { x e.x, y : e.y };
// Translate from button_way to accueil point of view
var accueilViewPoint = $.button_way.convertPointToView(imageViewPoint, $.accueil);
Ti.API.info(accueilViewPoint);
} else {
// Otherwise just leave them
var accueilViewPoint = { x e.x, y : e.y };
Ti.API.info(accueilViewPoint);
}
});
Here is perfect solutions for all devices:
var circle = Ti.UI.createView({
height:300,
backgroundColor: 'red',
width:250
});
$.win.add(circle);
var item1 = Ti.UI.createImageView({
top:'0',
id:'item1',
//left:'0',
width:'50',
height:'50',
zIndex:'1',
backgroundColor:'green',
image:'/burger_menu.png'
});
circle.add(item1);
var wth = item1.getWidth()/2;
var hgt = item1.getHeight()/2;
item1.addEventListener('touchmove', function(e) {
touchMove(item1 , e);
});
function touchMove(obj , e)
{
var convertedPoint = obj.convertPointToView({x: e.x, y: e.y}, circle);
if(convertedPoint != null)
{
item1.animate({
left: Math.round(convertedPoint.x/Ti.Platform.displayCaps.logicalDensityFactor) - wth,
top: Math.round(convertedPoint.y/Ti.Platform.displayCaps.logicalDensityFactor) - hgt ,
duration: 1
});
}
}
$.win.open();
Im working in Titanium Alloy and creating a popup window as a widget. I want to have the close - image up over the right top corner, so it stick abit out of the popup window.
So I created 2 separate window in the widget xml-file. One to just hold the close - image and one who is the popup - window.
Everythings look as I want, but I cant get the popup - window to close?!
I have tried:
$.myWindow.close();
Amd I have tried:
var win = Widget.createController('myWindow', 'myWindowID').getView();
win.close();
But nothing happens
Here is my xml - code:
<Alloy>
<Window id="popup">
<View id="myImagesViewIn" class="myImagesViewIn" onClick="closeWin">
<ImageView id="myImageIn" class="myImageIN" />
</View>
</Window>
<Window id="winImageOut" onClick="closeWindow">
<View id="myImagesViewOut" class="myImagesViewOut" >
<ImageView id="myImageOut" class="myImageOut" />
</View>
</Window>
</Alloy>
And here is my JS-code:
var args = arguments[0] || {};
$.popup.transform = args.transform || '';
/*
exports.setDataModalWindow = function(data) {
$.lblModalWinHead.text = data.title;
$.lblModalWinBody.text = data.text;
};
*/
function fnCloseClick() {
$.viewModal.close();
}
/*
$.myImagesViewOut.addEventListener('click', function(e) {
$.popup.close();
});
*/
function closeWin(e) {
$.myImagesViewOut.setVisible(false);
$.popup.close();
}
function closeWindow(e) {
//$.popup.close();
var wins = Widget.createController('widget', 'popup').getView();
wins.setVisible(false);
alert('hejsan');
//Ti.API.info('close');
}
exports.openModalWindow = function(arg) {
//$.lblModalTitle.text = arg.title || 'foo';
//$.lblModalText.text = arg.text || 'ff';
var t = Titanium.UI.create2DMatrix().scale(0);
var args = {
transform : t
};
var controller = Widget.createController('widget', args).getView();
controller.open();
// controller.animate(a2);
var t1 = Titanium.UI.create2DMatrix();
t1 = t1.scale(1.2);
var a1 = Titanium.UI.createAnimation();
a1.transform = t1;
a1.duration = 400;
controller.animate(a1);
var b1 = Titanium.UI.create2DMatrix();
var a2;
a1.addEventListener('complete', function() {
b1 = b1.scale(1.5);
a2 = Titanium.UI.createAnimation();
a2.transform = b1;
a2.duration = 400;
controller.animate(a2);
});
// create the controller a keep the reference
/*
controller.setDetails({
label: 'Are you sure you wish to log out?\n\nIf you do so you will no longer be able to take part in any challenges until you login again.',
ok: 'Log me out',
cancel: 'Cancel'
});
*/
// now get a reference to the UI inside the controller
//var win = controller.getView();
a1.addEventListener('complete', function() {
// simple reset animation
var t2 = Ti.UI.create2DMatrix();
var a3 = Titanium.UI.createAnimation();
a3.transform = t2;
a3.duration = 400;
controller.animate(a3);
$.winImageOut.open();
});
};
first thing is you are opening popup window so you should open that window...
then you should close bot the window in closeWindow function.
function closeWindow(e) {
$.popup.close();
$.winImageOut.close();
alert('hejsan');
//Ti.API.info('close');
}
I do not know your requirement but you should use only one window to show popup then its easy for you to handle open,close event of window.