Handling screen resolution changes for QML Animations - javascript

I am a creating a fully scalable application on QML, what I need to know is how do I handle screen changes, for example this elements animation works for 1920x1080:
EventLog{
id: eventlog
x: 0
y: 1000
z: 10
NumberAnimation{id: showeventPanel; target: eventlog; properties: "y"; to: 710; duration: 500}
}
But I cannot anchor this element otherwise the animation will not take place, so for other resolutions this element will not be correctly placed, I realise that I can set the the anchor to anchors: undefined but how can I accurately set the x and y to move too the correct position on the screen?

The solution I found, though not elegant, works to a certain degree. I anchored the element as so and set it to a dummy rect(centreRect) that I anchored to the correct x and y position:
CameraControlPanel{
id: control_Panel
// x: 1916
// y: 270
anchors {
verticalCenter: parent.verticalCenter
right: parent.right
}
anchors.rightMargin: -635
NumberAnimation{id: showPanel; target: control_Panel; properties: "x"; to: centreRect.x; duration: 500}
z: 10
}
Then when I needed to start the 'showPanel' animation I set the the anchors to undefined as so:
control_Panel.anchors.verticalCenter = undefined
control_Panel.anchors.right = undefined
When I needed to return the element to the correct position, I reset the anchors that were there previously.

Related

Jquery animation for exchanging the position of two elements

I have two elements whose position and size I am trying to exchange on click of the second element only
<div id="card-1" class="1">
Some Content for 1
</div>
<div id="card-2" class="2">
Some Content for 2
</div>
using jquery path js
$(document).on('click', '.2', function(){
var path_1 = {
start: {
x: 0,
y: 0,
angle: -120
},
end: {
x:0,
y:360,
angle: -120,
length: 0.25
}
}
var path_2 = {
start: {
x: 0,
y: 0,
angle: -180
},
end: {
x:0,
y:-360,
angle: -60,
length: 0.25
}
}
$(".1").animate({
width: "-=50%",
path : new $.path.bezier(path_1)
}, 2500);
$(".2").animate({
width: "+=100%",
path : new $.path.bezier(path_2)
}, 2500);
var x = $('.2').attr('id');
var y = $('.1').attr('id');
$('#'+ x +',#'+ y +'').toggleClass('2 1');
});
Then I exchange the classes as you can see in the last 3 lines of code to get the same effect.
The first time when i click on #card-2 (class 2), the position and size gets exchanged, and also the classes are toggled for the divs but, the when I click on #card-1 (class 2), I do not get the same effect. How do get the same effect again?
This is how my page looks at first
I want #div1 to shrink and go to where #div2 is currently and #div2 to grow and reach where #div1 is currently on click of #div2. Something like this
This is happening. but thin I want the divs to get back to their original position on click of #div1. Something like this.
But this is not happening.
I have used classes for the animation and so after first step, I am exchanging the classes. But instead I am getting this type of result

Stack "transform: translateY" values in GreenSock?

I just came across this wonderful product and realized this is exactly what I need! I have a huge image that is x times the window size, so I want to scroll to the very bottom of it on button click. I would do so with CSS like this:
#keyframes {
to {
transform: translateY(-100%) translateY(100vh);
}
}
This proved to be a crossbrowser way in CSS instead of:
transform: translateY(calc(-100% + 100vh));
Is there any way to do so with TweenMax? I do understand that I can calculate these values in pixels and specify them explicitly:
var value = -$('img').height() + $(window).height();
var tweenDown = TweenMax.to("img", 5, {y: value});
However the advantage of the "stacked" way is that when you resize the window, it keeps the image in the same position.
Thanks in advance!
This is what I came up with for those wondering:
TweenMax.to('img', 5, {
transform: 'translate3d(0,100vh,0)',
percentY: -100
});
[My solution to the bottom]
Actually, with current version of GSAP I think this would be
TweenMax.to('img', 5, {
y: '100vh',
yPercent: -100
});
But, the 'the notes about transforms' documentation section says
To do percentage-based translation use xPercent and yPercent (added in version 1.13.0) instead of x or y which are typically px-based
https://greensock.com/docs/Plugins/CSSPlugin
Judging by the above,
I think 100vh for y would be interpreted as 100px when added in the css matrix property. In order for this to fully work, I opted for the following:
TweenMax.to('img', 5, {
y: window.innherHeight, // or $(window).heigth()
yPercent: -100
});

How to setup interactive and non-interactive objects in PhysicsJS?

I am trying to setup a seesaw with userdragable objects. After world creation in PhysicsJS, mouse drag interaction is added by
world.add( Physics.behavior('interactive', { el: renderer.el }) );
which works fine. Subsequently, I want some added objects to be draggable (the box objects). But the lever should not be draggable, but it should interact with the boxes. So the lever should rotate according to a replaced box. The fulcurm is placed in a noninteractive way by setting its treatment property to static:
world.add( Physics.body('convex-polygon', {
name: 'fulcrum',
x: 250,
y: 490,
treatment: 'static',
restitution: 0.0,
vertices: [
{x: 0, y: 0},
{x: 30, y: -40},
{x: 60, y: 0},
]
}) );
How can objects be interacting with each other, but only some are userdragable?
A fiddle is available at: http://jsfiddle.net/YM8K8/
At the moment this is not supported... but it should be. I've added it as a bug on github. https://github.com/wellcaffeinated/PhysicsJS/issues/101
In the meantime, if you want, you can create a new "interactive" behavior by copying and pasting and just change the name.
Physics.behavior('interactive-custom', function( parent ){ ...
Then in the grab function just make this small addition:
body = self._world.findOne({ $at: new Physics.vector( pos.x, pos.y ) });
Change to:
body = self._world.findOne({ $at: new Physics.vector( pos.x, pos.y ), $in: self.getTargets() });
What that does is when it's searching for the body at the mouse coordinates, it will also check to see if that body is in the set that you've applied this behavior to.
Then instead of adding the behavior before the bodies in your fiddle, add it at the end, and do this:
world.add(
Physics.behavior('interactive-custom', { el: renderer.el })
.applyTo(world.find({ name: 'box' }))
);
This will use world.find to find the bodies currently in the world that have the "box" name. Then it sends that array of bodies to the behavior and tells the behavior to only apply itself to those bodies.
Here's the modified fiddle:
http://jsfiddle.net/wellcaffeinated/YM8K8/1/

How to stop Spin.js from other js file

i need help
Actually in my work i need to implement spin.js and block UI in a jqgrid. This is ok when i put the code in the same file and function, but i want to call a method from other JS file, and hear is where my problem. The spin.js and block UI start, then block UI stop with unblock but the spin.js still running.
Here is my code:
In BeforeRequest() in jqgrid i call one method
$.pui.common.loaderAnimationON("pane-content");
this method have this code
loaderAnimationON: function (div) {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent in px
left: '50%' // Left position relative to parent in px
};
var target = document.getElementById(div);
var spinner = new Spinner(opts).spin(target);
$.blockUI({
blockMsgClass: "gridProjectsLoader",
message: null
});
return spinner;
},
in gridComplete() i call other method
$.pui.common.loaderAnimationOFF("pane-content");
this method have this code
loaderAnimationOFF: function (div) {
var target = document.getElementById(div);
var spinner = $.pui.common.loaderAnimationON();
spinner.stop(target);
$.unblockUI();
}
Anyone can help me?
Thanks guys
You should use the same object to start and stop it. You can use global variables anywhere (just another .js)
Check this jsFiddle. It's stop spinner after 3 secs.
http://jsfiddle.net/YX7dy/8/
spinner=loaderAnimationON('Spin');
setInterval(function(){spinner.stop();},3000);

Starting position at bottom of MooTools slider class instead of top

Is there a way to hook into the MooTools Slider class, so the starting position of the knob is at the bottom (step 0) of the bar and you drag the knob up to get to the top of the bar (step 100).
This is what I have so far:
var slider1 = new Slider('#bar', '#knob', {
offset: 6,
steps: 100,
mode: 'vertical'
});
And what I need:
slider1.startingPosition = 'bottom';
Or something to that affect.
Since steps is defined to 100, your max value is 100, which is what you want to set as initialStep (the slider starting point).
For your specific CSS I would remove (or add it womewhere else) the margin on the element of the slider, so it wont shift the slider.
This worked for me:
var slider = $('bar');
var slider1 = new Slider(slider, slider.getElement('.knob'), {
offset: 6,
steps: 100,
initialStep: 100,
mode: 'vertical',
onChange: function (step) {
console.log(step);
}
});
And changed also margin top here to 0px: margin: 0px 0 0 -7px;
Fiddle

Categories