I wanted to move an image on button click. Like when i click on button , image should move from left to right . I was finding the x and y of image but failed to achieve goal. I have also tried with sliderfiled but suckes to change the default image of sliderfiled via sencha touch css. Can anybody help me?
You can use Ext.Anim make an image move. Just define you animation like so
anim = Ext.create('Ext.Anim',{
autoClear: false,
from:{'left':'0px'}, // You can use CSS3 transforms for better performance
to: {'left':'100px'},
delay: 1000,
duration: 1000
});
Then you can run this animation on any component. For example, if you have a reference to you image in a controller.
anim.run(this.getImage().element);
Hope this helps
Related
Asume there is an image on the screen and when a user presses another image (say right arrow) the first image goes right and when the user presses a third image (say left arrow) the first image goes left.
Briefly something like this, the left arrow should move the stickman to the left and the right should move to the right:
According to the documentation, an image can have multiple animations (transforms, scales, opacity changes etc) but it seems all those animations need to be run parallel (simultaneously).
My question is about doing this with a function call freely from unrelated objects.
You can just have an animation value for how much you want to move the stick man. Just give the stick man a
style={{transform:[{translateX: this.stickManTranslateX}]}} then you can just have the arrows use the moveStickManLeft function for it to move in different directions.
stickManTranslateX = new Animated.value(0);
moveStickManLeft = toValue => {
this.stickManTranslateX.setValue(toValue);
}
I am using this function and it is not working properly. Coding is using three.js
function rotate(){
camera.rotation.x+=0.1;
}
. If I add this at the render function it works just once and not correct meaning that the rotate function event on mouse movement I have, rotates wrong or maybe at an other centre.
What I need is to rotate the camera on the x,y,z axes when the button is clicked.
Any ideas?
You defined controls. They decide the camera rotation instead of the line you added. You have to set controls.enabled=false when you want the camera to rotate.
Yo can’t rotate the camera if you later call controls.update(), OrbitControls will overwrite anything what you have applied.
So one simple solution is to not update the controls if you are transforming the camera by yourself.
As the previous answers said the OrbitControls overwrite anything
But it looks like three.js now doesn't need to call controls.update() as long as you instantiated it const controls = new OrbitControls(camera, renderer.domElement); it will work fine and won't interfere with the camera.
source
I have a window with two pop up menus along the x and y axis of a custom view as seen in Figure 1.
When I rotate the Y-axis popup view with the following code:
[YPopUp setFrameCenterRotation: -90.0];
I get the desired result shown in Figure 2.
However, after a window resize, the popup disappears as seen in Figure 3. What can I do to fix this? My guess is constraints?
Thanks in advance.
Update
As a desperate attempt to fix it I added the following lines of code but still disappears after resize
- (void)windowDidResize:(NSNotification *)notification
{
YPopUp.frame = CGRectMake(20.0, plot.frame.origin.y + plot.frame.size.height, plot.frame.size.height, YPopUp.frame.size.height);
}
Not the best solution but I added constraints to the vertical NSPopUpButton to be 20px from the left and up against the top window. When resizing it doesn't disappear and works, however sometimes I see it move slightly down during resizing.
I put magnific popup to my site, to display Images in gallery. I love this tool, except one thing. The arrows for changing of images are displayed on the sides of screen, what is little bit inpractical when you have big screen with big resolution. So I want to ask if it is possible to move the arrows inside the image, as it is common for many other image viewiers such as lightbox and so on.
Thank you in advance.
You may just re-append the arrows inside container, here is example http://codepen.io/dimsemenov/pen/JGjHK
I had an issue when building multiple gallery from database. One gallery contained an unique picture and with callback : this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
this picture just won't display (you get an error on this.arrowLeft undefined or Null)
(try it on the codepen example, just erase the second picture from the DOM.You'll see the remaining image can't be opened)
To fix this, i used the following callback instead :
this.contentContainer.append(this.arrowLeft,this.arrowRight);
#raison, this should work with type inline/iframe:
callbacks: {
buildControls: function() {
// re-appends controls inside the main container
this.arrowLeft.appendTo(this.contentContainer);
this.arrowRight.appendTo(this.contentContainer);
}
}
I'm trying to load a large version of an image in the centre of the user's screen when then tap on a smaller version of the image that's already on my view.
Ideally I want to do this using an animation to get to the new image like a vertical flip.
Also if there's a way to make the background look greyed out like it's not the foreground then that would be even better.
Here's an image of what I'm after, I'm at work at the moment so haven't got access to the actual code / images.
I'm a new user so can't add pictures. Click here if you want to see what I'm thinking.
Image
There is an KGmodal Example Exist in GitHUB hope that Might Help you.
You have to Change the content view and Add an Imageview Programatically (with required size ) in the content View.
Follow the below link: https://github.com/kgn/KGModal
For Fliping the image see the tutorial iphone Flip Image.
In the end I added the larger image on to begin with and set its alpha to 0, then added a gesture recognizer on the smaller image that animated the larger one and gradually changed its alpha to 1. The did the reverse on the large image. Don't know why I didn't think of that in the first place!