Hey guys so I'm working on animating my java script for a project, and being a newbie at java-script I have only figured out how to make my image move up and down in a set area. How can make my object "dank" also spin 360 infinitly whiles using the following code to move it up and down? Any help is appreciated!
window.addEventListener("load", function() {
function myMove() {
var elem = document.getElementById("dank");
var pos = 100;
var id = setInterval(frame, 10);
function frame() {
pos += 0.3;
elem.style.top = pos + "px";
if (Math.abs(pos) >= 250){
pos = 100;
}
frame();
}
}
You can use elem.style.transform to rotate text. If you assign degrees to a number it'd be something like:
elem.style.transform = "rotate(" + degrees + "deg)"
Also you should remove "frame();", you don't need it because setInterval(frame, 10) already calls the function over and over. Having it in there might cause some recursion problems.
Related
I'm trying to create a moveBall function were you put the ID of the ball created in HTML, and it moves from left to right.
This is what I've done first, and it works:
var ball = document.getElementById("ball");
var velocityX = 100;
var positionX = 0;
var reverseX = false;
//write a function that can change the position of the html element "ball"
function moveBall() {
// two fixed x-axis coordinates (you will use these variable in step 3)
var Xmin = 0;
var Xmax = 500;
//reverse condition
if (!reverseX){
positionX = positionX + velocityX;
} else positionX = positionX - velocityX;
ball.style.left = positionX + 'px';
if (positionX === Xmax){
reverseX = true;
} else if (positionX === Xmin){
reverseX = false;
}
}
// This call the moveBall function every 100ms
setInterval(moveBall, 100);
However, when I try to make a function moveBall(ballId) so I can re use it with other balls, it doesn't work. This is my code:
var ballId;
var velocityX = 100;
var positionX = 0;
var reverseX = false;
//write a function that can change the position of the html element "ball"
function moveBall(ballId) {
ball = document.getElementById(ballId)
// two fixed x-axis coordinates (you will use these variable in step 3)
var Xmin = 0;
var Xmax = 500;
//reverse condition
if (!reverseX){
positionX = positionX + velocityX;
} else positionX = positionX - velocityX;
ball.style.left = positionX + 'px';
if (positionX === Xmax){
reverseX = true;
} else if (positionX === Xmin){
reverseX = false;
}
}
// This call the moveBall function every 100ms
setInterval(moveBall("ball"), 100);
Please I would be thrilled to know if you have any clue. The ball doesn't move with the second code, it just remains static in the html file.
Your problem is in the line which says setInterval(moveBall("ball"), 100);
setInterval expects a function as first argument, however, here provided is a function call instead. I'm a bit rusty on theory here, but basically this will execute function call first, which will return undefined and then your line looks same as if you have written setInterval(undefined, 100);, so every 100ms you do nothing...
What you wanna do instead is write function handler to pass into setInterval instead of function call.
You can do either arrow function setInterval(() => moveBall("ball"), 100);
or if you can't use arrow functions you could do setInterval(function () {moveBall("ball")}, 100);
This in other words says execute (nameless) function every 100ms, this nameless function will execute call of your moveBall function with desired paramater.
Your original code without param works since if you look closely, you are passing directly function there, without call.
Thanks to Miroslav Saracevic for the incredibly quick answer,
// This call the moveBall function every 100ms
setInterval(() => moveBall("ball"), 100)
This solved the problem.
I want to make a button that zoom in/out the page in Google Chrome.(Like if i'm pressing ctrl and + or ctrl and -). Please help me. I don't want to zoom element(body).
There are many ways to do it,you have to write both ZoomIn and ZoomOut functions for it.
below is the working code.
function zoomIn()
{
var Page = document.getElementById('Body');
var zoom = parseInt(Page.style.zoom) + 10 +'%'
Page.style.zoom = zoom;
return false;
}
function zoomOut()
{
var Page = document.getElementById('Body');
var zoom = parseInt(Page.style.zoom) - 10 +'%'
Page.style.zoom = zoom;
return false;
}
(though it is Copied code).
And make sure you add style=”zoom: 100%” in your <body> tag of web page.
Here is how to zoom in and out.
function zoomIn(){
var body = document.querySelector("body");
var currWidth = body.clientWidth;
if(currWidth == 1000000){
alert("Maximum zoom-in level of 1 Million reached.");
} else{
body.style.width = (currWidth + 50) + "px";
}
}
function zoomOut(){
var body = document.querySelector("body");
var currWidth = body.clientWidth;
if(currWidth == 500000){
alert("Maximum zoom-out level reached.");
} else{
body.style.width = (currWidth - 50) + "px";
}
}
Zoom in by running zoomIn()
Zoom out by runnint zoomOut()
set the zoom property in style of top level html element. Its the closest thing to browser zooming.
document.firstElementChild.style.zoom = 0.85;
You can use a step value of, say 0.05 on - and + buttons.
If you want to do it according to window. you can do it by:
window.onresize = function(){
let zoom = Number((window.innerWidth / window.screen.width).toFixed(3));
document.firstElementChild.style.zoom = zoom;
}
I'd like my bitmap to go to a click position but I want to see a progression between the bitmap.x/bitmap.y and the click.x/click.y
How can I make this animation ?
Thanks a lot
You can create a tween using TweenJS when the stage is clicked:
stage.on("stagemousedown", function(event) {
// Tween to the new position. Override old tweens on the same object.
createjs.Tween.get(bitmapInstance, {override:true}).to({x:event.stageX, y:event.stageY}, 500, createjs.Ease.quadIn);
})
Here is a quick fiddle: http://jsfiddle.net/jemohtgh/
Or you can store the clicked position, and basically have the shape always try to reach that position (fiddle):
var pos = new createjs.Point();
stage.on("stagemousedown", function(event) {
pos.setValues(event.stageX, event.stageY);
})
function tick(event) {
// Move towards the position
s.x += (pos.x - s.x) / 2;
s.y += (pos.y - s.y) / 2;
stage.update(event);
}
You can also do the same thing with a mouse follow instead of a click (fiddle):
function tick(event) {
s.x += (stage.mouseX - s.x) / 5;
s.y += (stage.mouseY - s.y) / 5;
stage.update(event);
}
Cheers.
I am new to Paper.js therefore might this a basic question but I am trying to the the following:
var xpos;
var ypos;
function onMouseMove(event) {
xpos = event.point.x;
ypos = event.point.y;
}
get the current mouseposition and save it as the variables xpos and ypos
function onFrame(event) {
path.segments[1].point.x = path.segments[1].point.x+xpos/10;
path.segments[1].point.y = path.segments[1].point.y+ypos/10;
}
and then use them to update the onFrame animation. But it does not work, how can I update the animation with the new values?
Thanks in advance.
It looks like your code is increasing the position of path.segments[1] every frame. I believe what you want is to subtract a portion of the difference between the segment and mouse positions per frame.
Try this:
var path = new Path.Line((0,0), view.center);
path.strokeColor = "black";
var pos = new Point(0, 0);
function onMouseMove(event) {
pos = event.point;
}
function onFrame(event) {
path.segments[1].point += (pos - path.segments[1].point) / 10;
}
I'm working on a small animation where the user drags a circle and the circle returns back to the starting point. I figured out a way to have the circle return to the starting point. The only problem is that it will hit one of the sides of the frame before returning. Is it possible for it to go straight back (follow the path of a line drawn between the shape and starting point).
The other problem is that my setInterval doesn't want to stop. If you try pulling it a second time it would pull it back before you release your mouse. It also seems to speed up after every time. I have tried using a while loop with a timer but the results weren't as good. Is this fixable?
var paper = Raphael(0, 0, 320, 200);
//var path = paper.path("M10 10L40 40").attr({stoke:'#000000'});
//var pathArray = path.attr("path");
var circle = paper.circle(50, 50, 20);
var newX;
var newY;
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");
var start = function () {
this.attr({cx: 50, cy: 50});
this.cx = this.attr("cx"),
this.cy = this.attr("cy");
},
move = function (dx, dy) {
var X = this.cx + dx,
Y = this.cy + dy;
this.attr({cx: X, cy: Y});
},
up = function () {
setInterval(function () {
if(circle.attr('cx') > 50){
circle.attr({cx : (circle.attr('cx') - 1)});
} else if (circle.attr('cx') < 50){
circle.attr({cx : (circle.attr('cx') + 1)});
}
if(circle.attr('cy') > 50){
circle.attr({cy : (circle.attr('cy') - 1)});
} else if (circle.attr('cy') < 50){
circle.attr({cy : (circle.attr('cy') + 1)});
}
path.attr({path: pathArray});
},2);
};
circle.drag(move, start, up);
Here's the Jfiddle: http://jsfiddle.net/Uznp2/
Thanks alot :D
I modified the "up" function to the one below
up = function () {
//starting x, y of circle to go back to
var interval = 1000;
var startingPointX = 50;
var startingPointY = 50;
var centerX = this.getBBox().x + (this.attr("r")/2);
var centerY = this.getBBox().y + (this.attr("r")/2);
var transX = (centerX - startingPointX) * -1;
var transY = (centerY - startingPointY) * -1;
this.animate({transform: "...T"+transX+", "+transY}, interval);
};
and the "start" function as follows:
var start = function () {
this.cx = this.attr("cx"),
this.cy = this.attr("cy");
}
Is this the behavior you are looking for? Sorry if I misunderstood the question.
If the circle need to get back to its initial position post drag, we can achieve that via simple animation using transform attribute.
// Assuming that (50,50) is the location the circle prior to drag-move (as seen in the code provided)
// The animation is set to execute in 1000 milliseconds, using the easing function of 'easeIn'.
up = function () {
circle.animate({transform: 'T50,50'}, 1000, 'easeIn');
};
Hope this helps.