I have some icons from Raphaël.js, and I would like to fade them in sequentially on page load.
Here I build the icons:
function navBar() {
var icon={/* lots of path strings */},
fill = {
fill:"#666",
stroke:"none",
opacity:0 // opacity is initially 0; would like to loop through this
},
stroke = {
stroke:"#fff",
"stroke-width":3,
"stroke-linejoin":"round",
opacity:0
};
for (var name in icon) {
var r = Raphael(0, 0, 40, 40),
s = r.path(icon[name]).attr(stroke).translate(4, 4),
Icon = r.path(icon[name]).attr(fill).translate(4, 4),
Path = document.getElementById("path"),
none = {fill: "#000", opacity: 0};
(function (icon, path, s, name) {
r.rect(0, 0, 38, 38).attr(none).hover(function () {
s.stop().animate({opacity: 1}, 200);
}, function () {
s.stop().attr({opacity: 0});
});
})(Icon, icon[name], s, name);
// Here I'm able to fade all of the icons in at the same time
(function (icon) {
Icon.animate({opacity:1},200);
})(Icon);
}
}
Rather than fade all of the icons in at the same time as I've done at the end of the script, how can I loop through them and fade them each in, one by one, with a slight delay in between?
Maybe you need to animate them after create opr. is done. Here is a simulation: http://jsfiddle.net/r75hh/
Like this or so.
// creating
var icon = new Raphael ...
...
icon.attr("rel", "icon")
// the last line in navBar()
animateIcons();
// animating
function animateIcons() {
// assuming jQuery in use
var icons = $("elementTagNameOfIcon[rel='icon']");
var i = 0;
var f = function(){
var icon = icons.get(i);
if (icon) {
$(icon).animate({opacity:1}, 200, function(){
f();
});
i++;
}
};
f();
}
Related
I'm creating a large grid of divs which I plan to perform animations and effects on. I have around 90 divs creating a tiled background. Now here's the trick with this..I am creating the page to be responsive. I cannot float these divs and so they are inline-blocked with overflow hidden. So as the width of the viewport changes the amount of divs in the rows changes - essentially moving the div over and down. So I've had to dynamically populate the div text based on position(x,y). Unfortunately I am having an issue with the event listener box moving because of this.
When I try to remove the event listener I get an undefined error - even when I move it into the initial listener scope.
function menuBox(){
var allDiv = document.getElementsByTagName('div');
var menuDiv1 = document.elementFromPoint(39, 16);
var menuDiv2 = document.elementFromPoint(39, 120); //Blank Div
var menuDiv3 = document.elementFromPoint(39, 225);
var menuDiv4 = document.elementFromPoint(39, 329);
var menuDiv5 = document.elementFromPoint(39, 433);
var menuDiv6 = document.elementFromPoint(39, 538);
var menuDiv7 = document.elementFromPoint(39, 642);
var menuDiv = [
menuDiv1,
menuDiv3,
menuDiv4,
menuDiv5,
menuDiv6,
menuDiv7
]
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].innerHTML = '';
// allDiv[i].removeEventListener("mouseover", menuOver, false);
// allDiv[i].removeEventListener("mouseout", menuOut, false);
};
for (var i = 0; i < menuDiv.length; i++) {
menuDiv[i].addEventListener("mouseover", function menuOver(){
TweenLite.to(this, 0.4, {backgroundColor: '#272822', color: '#fff', scale: 1.1})
}, false);
menuDiv[i].addEventListener("mouseout", function menuOut(){
TweenLite.to(this, 0.3, {backgroundColor: '#fff', color: '#000', scale: 1})
}, false);
};
menuDiv1.innerHTML = '<p>Switch<br>Menu</p>';
menuDiv3.innerHTML = '<p>Michael</p>';
menuDiv4.innerHTML = '<p>Design</p>';
menuDiv5.innerHTML = '<p>Develop</p>';
menuDiv6.innerHTML = '<p>Imaging</p>';
menuDiv7.innerHTML = '<p>Motion</p>';
console.log('menuBox function');
};
menuBox();
window.onresize = menuBox;
You should know that, to remove event handlers from DOM element, the function specified with the addEventListener() method must be an external function .
Anonymous functions, like domelement.removeEventListener("event", function(){ \\something }); will not work.
Having said that, same mistake has been done in your code, thus leading to reference type of error Uncaught ReferenceError: menuOver is not defined.
To make you code work, below are changes you should use:
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].innerHTML = '';
allDiv[i].removeEventListener("mouseover", menuOver, false);
allDiv[i].removeEventListener("mouseout", menuOut, false);
};
for (var i = 0; i < menuDiv.length; i++) {
menuDiv[i].addEventListener("mouseover",menuOver, false);
menuDiv[i].addEventListener("mouseout",menuOut, false);
};
function menuOver(){
TweenLite.to(this, 0.4, {backgroundColor: '#272822', color: '#fff', scale: 1.1});
}
function menuOut(){
TweenLite.to(this, 0.3, {backgroundColor: '#fff', color: '#000', scale: 1});
}
In my game, I need some buttons that will work on mobile devices (buttons that you can press and/or hold in the game). I saw this example (note that the version of Phaser being used here is old, however, it still works) and was able to temporarily have some working buttons. Here's the source code for that example.
However, one thing bothered me about this example's code for the creation of these virtual gamepad buttons: the buttons' code wasn't DRY (Don't Repeat Yourself). You can see how these buttons keep getting created in the same fashion here over and over again:
// create our virtual game controller buttons
buttonjump = game.add.button(660, 340, 'buttonjump', null, this, 0, 1, 0, 1); //game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame
buttonjump.anchor.setTo(0.5, 0.5);
buttonjump.fixedToCamera = true; //our buttons should stay on the same place
buttonjump.events.onInputOver.add(function(){jump=true;});
buttonjump.events.onInputOut.add(function(){jump=false;});
buttonjump.events.onInputDown.add(function(){jump=true;});
buttonjump.events.onInputUp.add(function(){jump=false;});
buttonfire = game.add.button(750, 340, 'buttonfire', null, this, 0, 1, 0, 1);
buttonfire.anchor.setTo(0.5, 0.5);
buttonfire.fixedToCamera = true;
buttonfire.events.onInputOver.add(function(){fire=true;});
buttonfire.events.onInputOut.add(function(){fire=false;});
buttonfire.events.onInputDown.add(function(){fire=true;});
buttonfire.events.onInputUp.add(function(){fire=false;});
buttonleft = game.add.button(40, 312, 'buttonhorizontal', null, this, 0, 1, 0, 1);
buttonleft.anchor.setTo(0.5, 0.5);
buttonleft.fixedToCamera = true;
buttonleft.events.onInputOver.add(function(){left=true;});
buttonleft.events.onInputOut.add(function(){left=false;});
buttonleft.events.onInputDown.add(function(){left=true;});
buttonleft.events.onInputUp.add(function(){left=false;});
buttonbottomleft = game.add.button(48, 352, 'buttondiagonal', null, this, 6, 4, 6, 4);
buttonbottomleft.anchor.setTo(0.5, 0.5);
buttonbottomleft.fixedToCamera = true;
buttonbottomleft.events.onInputOver.add(function(){left=true;duck=true;});
buttonbottomleft.events.onInputOut.add(function(){left=false;duck=false;});
buttonbottomleft.events.onInputDown.add(function(){left=true;duck=true;});
buttonbottomleft.events.onInputUp.add(function(){left=false;duck=false;});
buttonright = game.add.button(136, 312, 'buttonhorizontal', null, this, 0, 1, 0, 1);
buttonright.anchor.setTo(0.5, 0.5);
buttonright.fixedToCamera = true;
buttonright.events.onInputOver.add(function(){right=true;});
buttonright.events.onInputOut.add(function(){right=false;});
buttonright.events.onInputDown.add(function(){right=true;});
buttonright.events.onInputUp.add(function(){right=false;});
buttonbottomright = game.add.button(128, 352, 'buttondiagonal', null, this, 7, 5, 7, 5);
buttonbottomright.anchor.setTo(0.5, 0.5);
buttonbottomright.fixedToCamera = true;
buttonbottomright.events.onInputOver.add(function(){right=true;duck=true;});
buttonbottomright.events.onInputOut.add(function(){right=false;duck=false;});
buttonbottomright.events.onInputDown.add(function(){right=true;duck=true;});
buttonbottomright.events.onInputUp.add(function(){right=false;duck=false;});
buttondown = game.add.button(88, 360, 'buttonvertical', null, this, 0, 1, 0, 1);
buttondown.anchor.setTo(0.5, 0.5);
buttondown.fixedToCamera = true;
buttondown.events.onInputOver.add(function(){duck=true;});
buttondown.events.onInputOut.add(function(){duck=false;});
buttondown.events.onInputDown.add(function(){duck=true;});
buttondown.events.onInputUp.add(function(){duck=false;});
Because they were created in such a non-DRY and, what I feel to be, inefficient way, I decided that my buttons should have a gamepad button class that they all inherit from. Unfortunately, I've been running into lots of problems trying to make this button class work.
I have an example here that models what I'm trying to do in my game.
(Here's the source code for my example)
// Global constants
var GAME_WIDTH = 800;
var GAME_HEIGHT = 600;
var ORIGIN = 0;
var TEXT_X_POS = 50;
var TEXT_Y_POS = 100;
var TEXT_STYLE = { fontSize: "16px" };
var RIGHT_BUTTON_X_POS = 600;
var RIGHT_BUTTON_Y_POS = 400;
var LEFT_BUTTON_X_POS = 100;
var LEFT_BUTTON_Y_POS = 400;
var PHASER_DUDE_Y_POS = 300;
var PHASER_DUDE_GRAVITY = 300;
var PHASER_DUDE_RIGHT_VELOCITY = 100;
var PHASER_DUDE_LEFT_VELOCITY = -100;
var STOPPED = 0;
// Global variables
var background;
var rightButton;
var movingRight;
var rightButtonDown;
var leftButton;
var movingLeft;
var leftButtonDown;
var phaserDude;
var rightKey;
var leftKey;
// New instance of Phaser.Game
var game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, "game", {preload: preload, create: create, update: update});
// Mobile button class
var MobileButton = function (button, movingInADirection, isTheButtonDown, pressedMethod) {
button.events.onInputOver.add(function () {
if (isTheButtonDown === true) {
movingInADirection = true;
}
});
button.events.onInputDown.add(function () {
isTheButtonDown = true;
movingInADirection = true;
});
button.events.onInputUp.add(function () {
movingInADirection = false;
});
};
function preload () {
game.load.image("background", "sprites/sky.png");
game.load.image("left arrow", "sprites/left_arrow.png");
game.load.image("right arrow", "sprites/right_arrow.png");
game.load.image("phaser dude", "sprites/phaser_dude.png");
}
function create () {
background = game.add.image(ORIGIN, ORIGIN, "background");
game.add.text(TEXT_X_POS, TEXT_Y_POS, "Use the arrow keys or the arrow buttons below to move", TEXT_STYLE);
rightButton = game.add.button(RIGHT_BUTTON_X_POS, RIGHT_BUTTON_Y_POS, "right arrow", moveRight);
leftButtonDown = game.add.button(LEFT_BUTTON_X_POS, LEFT_BUTTON_Y_POS, "left arrow", moveLeft);
phaserDude = game.add.sprite(game.world.centerX, PHASER_DUDE_Y_POS, "phaser dude");
game.physics.arcade.enable(phaserDude);
phaserDude.body.collideWorldBounds = true;
phaserDude.body.gravity.y = PHASER_DUDE_GRAVITY;
rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);
leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
}
function update () {
stopMoving();
if (leftKey.isDown || movingLeft === true) {
moveLeft();
}
if (rightKey.isDown || movingRight === true) {
moveRight();
}
}
function moveRight () {
phaserDude.body.velocity.x = PHASER_DUDE_RIGHT_VELOCITY;
}
function moveLeft () {
phaserDude.body.velocity.x = PHASER_DUDE_LEFT_VELOCITY;
}
function stopMoving () {
phaserDude.body.velocity.x = STOPPED;
}
As you can see, the arrow keys work fine for moving the sprite, but the mobile buttons do not work well; they only move the sprite for a frame, and then it stops moving again. I'm not sure why the keys work, yet the mobile buttons don't. The problem seems to be that the code in the class is not being run the way that I am thinking it should run (i.e., it seems like all of the code concerning the onInputOver, onInputDown, and onInputUp events is not being correctly run and the class is only paying attention to the method to run when a button is pressed). Can anyone figure out what the problem is with my button class?
Your problem is that the onInputDown of Phaser.Button only fires once each time the button is pressed.
What you need to do is set an isDown property on the button something like this:
button.events.onInputDown.add(function () {
button.isDown = true;
});
button.events.onInputUp.add(function () {
button.isDown = false;
});
And the in your update method check for that property:
function update () {
stopMoving();
if (leftKey.isDown || leftButton.isDown) {
moveLeft();
}
So I had this slideshow working perfectly fine using .fade and .appear, but the people I'm doing this for weren't satisfied with that and they want it to behave like THIS ONE where the text overlay drops out and the image slides sideways and then the overlay pops back up.
script.aculo.us has a .DropOut, but not an opposite function so I am working with one I found elsewhere.
This is the code I have so far, but the slideshow isn't doing anything. It just loads the first image and overlay and that's it. No animation. I'm sure I have made some syntax mistakes somewhere, but it's valid and not giving any errors.
JSFiddle (includes html and css as well)
Note that this still doesn't accomodate the new image sliding in from the right, which I haven't found an effect for yet. For now I'd just be happy if this worked as is.
var i = 0;
var image_slide = new Array('image-1', 'image-2');
var overlay_slide = new Array('overlay-1', 'overlay-2');
var NumOfImages = image_slide.length;
var wait = 8000;
function SwapImage(x, y) {
$(overlay_slide[y]).DropOut({
duration: 0.5
});
$(overlay_slide[y]).fade({
duration: 0.1
});
$(image_slide[x]).appear({
duration: 0.5
});
$(image_slide[y]).Move({
x: -1000,
y: 0,
mode: 'relative',
duration: 0.5
});
$(overlay_slide[x]).appear({
duration: 0.1
});
$(overlay_slide[x]).Emerge({
duration: 0.5
});
}
function StartSlideShow() {
play = setInterval(Play, wait);
}
function Play() {
var imageShow, imageHide;
imageShow = i + 1;
imageHide = i;
if (imageShow == NumOfImages) {
SwapImage(0, imageHide);
i = 0;
} else {
SwapImage(imageShow, imageHide);
i++;
}
}
Effect.Emerge = function (element) {
element = $(element);
var oldStyle = {
top: element.getStyle('top'),
left: element.getStyle('left')
};
var position = element.positionedOffset();
return new Effect.Parallel(
[new Effect.Move(element, {
x: 0,
y: -100,
sync: true
}),
new Effect.Opacity(element, {
sync: true,
from: 0.0,
to: 1.0
})],
Object.extend({
duration: 0.5,
beforeSetup: function (effect) {
effect.effects[0].element.show().makePositioned().setStyle({
top: (position.top + 100) + 'px'
});
},
afterFinishInternal: function (effect) {
effect.effects[0].element.undoPositioned().setStyle(oldStyle);
}
}, arguments[1] || {}));
};
StartSlideShow();
You were on the right track just needed to play with the Effects library a little more, the Emerge function was too much and you needed to go simpler.
I've updated your jsfiddle
http://jsfiddle.net/aB79G/3/
basically you need to prepare the next slide off to the right and move both pictures at once with Effect.Morph instead of Effect.Move
Also notice how I used the afterFinish callback that allows you to string effects together.
I am newbie. I can't sprite animation using jquery..
What's the problem?
How can make progressing the sprite animation on the spot loop as scroll??
$(window).scroll('scroll',function(e){
parallaxScroll();
});
function parallaxScroll() {
var ani_data = [0, -120, -240, -480];
var frame_index = 0;
if ( ScrollCount == 3 ) {
ScrollCount = 1;
$('#fatherwalk').css('background-position', ani_data[frame_index] + 'px 0px');
frame_index++;
if ( frame_index >= ani_data.length ) {
frame_index = 0;
}
}
scrollcount++;
}
Why you don't get a shortcut and try SpinJS?
http://fgnass.github.io/spin.js/
It's so easy to implement and works fine.
Here is a Sample that I've made on JSFiddle
Below a quick implementation of the JS:
$.fn.spin = function (opts) {
this.each(function () {
var $this = $(this),
spinner = $this.data('spinner');
if (spinner) spinner.stop();
if (opts !== false) {
opts = $.extend({
color: $this.css('color')
}, opts);
spinner = new Spinner(opts).spin(this);
$this.data('spinner', spinner);
}
});
return this;
};
$(function () {
$(".spinner-link").click(function (e) {
e.preventDefault();
$(this).hide();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 5, // The line thickness
radius: 10, // The radius of the inner circle
color: '#fff', // #rbg or #rrggbb
speed: 1, // Rounds per second
trail: 66, // Afterglow percentage
shadow: true // Whether to render a shadow
};
$("#spin").show().spin(opts);
});
});
Hope this helps.
so here, I have a sequence of animations using Raphael:
fade in curve
fade in ball 1
animate ball 1
fade in ball 2
animate ball 2
however, with my code, steps 4-5 are initiated WHILE the steps 2-3 are still animating. How do I ensure steps 4 and 5 are initiated after the animations of 1-3 are complete? I've tried using setTimeout on my second function (ball2), but no luck.
View on JSFiddle or here:
Raphael("bounce", 640, 480, function () {
var r = this,
p = r.path("M0,77.255c0,0,269.393,37.431,412.96,247.653 c0,0,95.883-149.719,226.632-153.309").attr({stroke: "#666", opacity: 0, "stroke-width": 1}),
len = p.getTotalLength(),
e = r.circle(0, 0, 7).attr({stroke: "none", fill: "#000", opacity:0}).onAnimation(function () {
var t = this.attr("transform");
});
f = r.circle(0, 0, 7).attr({stroke: "none", fill: "#000",opacity:0}).onAnimation(function () {
var t = this.attr("transform");
});
r.customAttributes.along = function (v) {
var point = p.getPointAtLength(v * len);
return {
transform: "t" + [point.x, point.y] + "r" + point.alpha
};
};
e.attr({along: 0});
f.attr({along: 0});
var rotateAlongThePath = true;
function fadecurve(ca,ba,aa,ab){
ca.animate({opacity:1},500);
setTimeout(function(){fadeball(ba,aa,ab);
},1000);
}
function fadeball(ba,aa,ab) {
ba.animate({opacity:1},400);
setTimeout(function(){run(ba, aa,ab);
},1000);
}
function run(ba,aa,ab) {
ba.animate({along: aa}, ab, ">", function () {
ba.attr({along: aa});
});
}
function startbounce() {
fadecurve(p,e,.9,400),
setTimeout(function(){fadeball(f,.8,400);
},1000);
}
startbounce();
});
According to Raphael's documentation, the animate method takes a callback method as it's fourth argument. That method could be used to initiate the next animation in your sequence (or after the third animation).
function fadecurve(ca,ba,aa,ab){
ca.animate({opacity:1},500,,function(){fadeball(ba,aa,ab);});
}
For example.