i'm trying rotate a body that i had created, but it's appear rotated when refresh the page, i use matter js (http://brm.io/matter-js/) and tween js (https://www.createjs.com/tweenjs), matter js don't has tween, so for that reasson i used tween js, but don´t works correctly
$(document).ready(function() {
//walls
barra_izquierda_vaso_moleculas = Bodies.rectangle(200,200,10,200,{isStatic: true});
barra_derecha_vaso_moleculas = Bodies.rectangle(500,200,10,200,{isStatic: true});
barra_inferior_vaso_moleculas = Bodies.rectangle(350,300,300,10,{isStatic: true});
//construction of my body
vaso_moleculas = Body.create({
parts: [barra_izquierda_vaso_moleculas, barra_derecha_vaso_moleculas, barra_inferior_vaso_moleculas],
restitution: 0,
friction: 0,
frictionStatic: 0,
frictionAir: 0,
inertia: Infinity,
mass: 1,
isStatic: true,
});
// add to world
World.add(world, vaso_moleculas);
//tween
createjs.Tween.get(vaso_moleculas).to(2, 9000);
});
You can draw your shape using p5.js and in your draw() loop, set your background with a lower alpha, such as background( 0, 32 ). This will create the illusion of motion blur or tweening. You can see it here, kind of.
Related
I am using vis.js to show a network diagram.
I need to maintain the "edge length" after dragging a node so I use the physics option.
My problem is that the node I drag always bounce back to its original position, which I think is because of these options.
physics: {
forceAtlas2Based: {
gravitationalConstant: -150,
centralGravity: 0.005,
springLength: 180,
springConstant: 0.18,
},
maxVelocity: 146,
solver: "forceAtlas2Based",
timestep: 0.35,
stabilization: {
enabled: true,
iterations: 1000,
updateInterval: 25
}
}
So what I'm thinking right now is if there is a way, where I can change the "center" to be the node dragged so that the physics center of gravity revolves around it?
Or
Is there a way to restabilize the network without having the dragged node bounce back to its initial position?
There are currently no way to set selected node as center of gravity. But you could change their params like mass on some events like dragStart or dragEnd.
network.on("dragStart", function(e){
const id = network.getNode(e.nodes[0]).id
nodes.update([ { id, mass: 5 } ])
})
Also to you can run network.stopSimulation() or network.stabilize() to stop physics simulation.
I'm trying to make this orbits rotates from the center (transfrom-origin: 50% 50%) but why it's still moving?
// Show Premium
function showPremuimPackage(el) {
// if Premium is selected
if(planetAdvance.hasClass('unselected') && planetEssential.hasClass('unselected')) {
let tlArrange = new TimelineMax();
tlArrange
// move selected
.to(premiumOrbit, .6,{transformOrigin:"center", rotation: '-50%', ease:Power1.easeOut})
.to(planetPremium, .6,{rotation: 50,transformOrigin:"50% 50%", scale: '2', ease:Power1.easeOut},'-=1')
// move unselected
// Advanced
.to(advanceOrbit, .6,{rotation: "50%", transformOrigin:"center", ease:Power1.easeOut},'-=.5')
// .to(planetAdvance, .6,{scale: '.4.5', rotation: -50,
transformOrigin:"50% 50%", ease:Power1.easeOut}, '-=.5')
// // Essential
// .to(essentialOrbit, .6,{rotation: '-50%',
transformOrigin:"50% 50%", ease:Power1.easeOut},'-=.5')
// .to(planetEssential, .6,{transformOrigin:"50% 50%",
ease:Power1.easeOut},'-=.5')
;
}
}
https://codepen.io/G-ROS/pen/WOrMrb
Why its doesn't rotate in the middle. And if you keep clicking the other planets it get a mess (need to uncomment to see it ). What I need to do to keep things always centered and not move around when rotating.
Thanks a lot guys.
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);
Im working on a site that requires the "3D card flip effect." I'm already using TweenMax to animate certain graphics on the site so I figured I would use TweenMax for the 3D card flip.
I have this. Basically it scales up and rotates on the hover state. I want it to scale up, rotate and scale down while retaining the rotationY property. Any ideas how to do this?
$('#selector').on('mouseover', cardFlip).on('mouseout', cardFlipBack);
function cardFlip(e) {
var tar = $(e.currentTarget);
$(e.currentTarget).css("z-index", "210");
TweenMax.to(tar, 0.25, {css: {scale: 1.5, rotationY: -180}});
}
function cardFlipBack(e) {
var tar = $(e.currentTarget);
TweenMax.to(tar, 0.25, {css: {scale: 1, rotationY: 0}});
}
I got it working! When you hover over the image it scales down and up when you 'mouseout.' When you click on the object the card scales up, flips 180 degrees and stays there until you click it again, then it reverts back to its original degree and scale.
var cardFlipClick = false;
$('#include-why').on('mouseover', hoverin).on('mouseout', hoverout).on('click', cardFlip);
function cardFlip(e) { // MAKES CARD FLIP WORK
if('click') {
if (!cardFlipClick) {
console.log('flipCard1 CLICKED!');
var card = $(e.currentTarget).off('mouseout').off('mouseover').css("z-index", "210");
TweenMax.to(card, 0.4, {css: {rotationY: -180, scale: 1.5}});
cardFlipClick = true;
} else if (cardFlipClick) {
var card = $(e.currentTarget).on('mouseout', hoverout).on('mouseover', hoverin);
console.log('flipCard2 CLICKED!');
TweenMax.to(card, 0.4, {css: {rotationY: 0, scale: 1}});
cardFlipClick = false;
}
}
}
I am attempting to change the fill style of a KineticJS Rect object after it has been instantiated, after being added to the layer and scene, and in the animation loop.
I am trying to toggle the fill type between a single color type to a linear gradient type based on a user button control in my main app file that renders the canvas.
I instantiate the object in a different file which is a class I wrote that instantiates a KineticJS Rect with a linear gradient fill initially in it's constructor like so:
function MyBackground(width,height,c1,c2,mode) {
this.width = width;
this.height = height;
this.color1 = c1;
this.color2 = c2;
this.mode = mode;
this.background = new Kinetic.Rect({
x: 0,
y: 0,
width: this.width,
height: this.height,
fillLinearGradientStartPoint: [0, 0],
fillLinearGradientEndPoint: [this.width, this.height],
fillLinearGradientColorStops: [0, this.color1, 1, this.color2]
});
this.getMode = function() { return this.mode; }; }
I then create an instance of this in the main file:
var myBack= new MyBackground(stageWidth,stageHeight,getRandomHexColor(),getRandomHexColor(),'dualColorLinearGradientStatic');
var background = myBack.getBackground();
myBack.setMode('singleColor');
I then add the background Rect to the layer, and the layer to the stage:
layer.add(background);
stage.add(layer);
I then start the animation loop code and after that the event handler that catches the button press to change the fill trying this inside:
myBack.setMode(bgmodeselected);
background = myBack.getBackground();
The app page loads fine showing the initial linear gradient fill. If I select that same mode of linear gradient and press the button control, it changes the colors as I desire maintaining the fill type of linear gradient. If I then switch the mode to single color fill and click the control button, that works too, changing the rect to a single color.
Here is what I have inside my class function to change the mode that makes that specifically work:
this.background.setFill(this.color1);
Inside that same function based on a conditional it should change the fill to linear gradient (and does this as long as its not changed to single color fill as above first)
this.background.setAttrs({
fillLinearGradientStartPoint: [0, 0],
fillLinearGradientEndPoint: [960, 600],
fillLinearGradientColorStops: [0, this.color1, 1, this.color2]
});
I've also tried within that same block:
this.background.setFillLinearGradientStartPoint(0, 0);
this.background.setFillLinearGradientEndPoint(960, 600);
this.background.setFillLinearGradientColorStops([0, this.color1, 1, this.color2]);
I know that the proper variables and values are being passed to the function and that the conditionals are working because it will change the fill mode type from its (as initially instantiated) linear gradient fill to a single color fill (which will continue working even as a different single color).
The problem is when I try to switch BACK to linear gradient fill it will not do so, or repaint/refresh at least despite it's calling this same function with the proper values. So, I suppose that my specific question is how can I change the fill style of a KineticJS Rect multiple times, from a single color fill back to a linear gradient fill after it has been already been added to the layer and stage and has an animation loop implemented?
This is my first question post so I hope that I am doing so properly; please inform me if I should be doing anything differently. Thanks.
Welcome to stackoverflow!
When you’re re-applying your gradient, be sure to clear out the solid color fill:
// clear the solid fill
this.setFill('');
// then apply the gradient fill
this.setFillLinearGradientStartPoint(-50);
this.setFillLinearGradientEndPoint(50);
this.setFillLinearGradientColorStops([0, 'green', 1, 'yellow']);
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/dmMF2/
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
function draw(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var linearGradPentagon = new Kinetic.Rect({
x: 100,
y: 30,
width: 75,
height: 50,
fill:"red",
stroke: 'black',
strokeWidth: 4,
draggable: true
});
linearGradPentagon.on('mouseover touchstart', function() {
this.setFill('');
this.setFillLinearGradientStartPoint(-50);
this.setFillLinearGradientEndPoint(50);
this.setFillLinearGradientColorStops([0, 'green', 1, 'yellow']);
layer.draw();
});
linearGradPentagon.on('mouseout touchend', function() {
this.setFill('red');
layer.draw();
});
layer.add(linearGradPentagon);
stage.add(layer);
}
draw();
</script>
</body>
</html>