currently this is causing the (image) fadeout function to end, and then the fade in function fires. i need the images to crossfade and the opacity of each image to overlap. im having trouble getting this work. thoughts?
_initFade: function () {
this._timer = Y.later(this._intervalDuration, this, this._startPeriod, [], false);
},
_startPeriod: function () {
this._timer = Y.later(this._intervalDuration, this, this._fadeOut, [], true);
this._fadeOut();
},
_fadeOut: function(){
var host = this.get('host');
this._animOut.set('node', host._getCurrentBlock());
this._animOut.once('end', this._fadeIn, this);
this._animOut.run();
},
_fadeIn: function(){
var host = this.get('host'),
blocks = host.get('blocks'),
index = host.get('index');
index = host._moveIndex(host._getNextIndex());
var nextBlock = blocks.item(index);
this._transparent(nextBlock);
host.syncUI();
this._animIn.set('node', nextBlock);
this._animIn.run();
},
YUI doesn't support multiple animations which run in sync. But have a look at the 'tween' event of Y.Anim. It is called for every frame of the animation. So you can fade one image using the animation and adjust the opacity of the second image during the tween event.
For example, I use the tween event to animate multiple items simultaneously:
var someNode = Y.Node.create("<div></div>"); // invisible div to animate
Y.one(document.body).appendChild(someNode);
var anim = new Y.Anim({
node: someNode,
duration: 0.25,
from: { color: 'red' },
to: { color: 'white' }
});
anim.on('tween', function(event){
Y.StyleSheet().set('input.text.error', { backgroundColor: someNode.getStyle('color') });
// other animations
});
Related
I am using the Raphael plugin for the first time and so far I managed to create a map of Germany and to outline all different regions inside. I found out how to bind mouse-over effects, so when I hover over a region its color changes. Everything looks fine until the moment when I want to trigger the same mouse-over effect from outside the map. There is a list of links to all the regions and each link should color its respective geographical position (path) on the map when hovered. The problem is that I don't know how to trigger the mouse-over effect from outside.
This is the reference guide I used for my code: Clickable France regions map
This is my map initialization:
var regions = [];
var style = {
fill: "#f2f2f2",
stroke: "#aaaaaa",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer",
class: "svgclass"
};
var animationSpeed = 500;
var hoverStyle = {
fill: "#dddddd"
}
var map = Raphael("svggroup", "100%", "auto");
map.setViewBox(0, 0, 585.5141, 792.66785, true);
// declaration of all regions (states)
....
var bayern = map.path("M266.49486,..,483.2201999999994Z");
bayern.attr(style).data({ 'href': '/bayern', 'id': 'bayern', 'name': 'Bayern' }).node.setAttribute('data-id', 'bayern');
regions.push(bayern);
This is where my "normal" mouse effects take place:
for (var regionName in regions) {
(function (region) {
region[0].addEventListener("mouseover", function () {
if (region.data('href')) {
region.animate(hoverStyle, animationSpeed);
}
}, true);
region[0].addEventListener("mouseout", function () {
if (region.data('href')) {
region.animate(style, animationSpeed);
}
}, true);
region[0].addEventListener("click", function () {
var url = region.data('href');
if (url){
location.href = url;
}
}, true);
})(regions[regionName]);
}
I have a menu with links and I want to bind each of them to the respective region, so that I can apply the animations, too.
$("ul.menu__navigation li a").on("mouseenter", function (e) {
// this function displays my pop-ups
showLandName($(this).data("id"));
// $(this).data("id") returns the correct ID of the region
});
I would appreciate any ideas! Thanks in advance!
I figured out a way to do it. It surely isn't the most optimal one, especially in terms of performance, but at least it gave me the desired output. I would still value a better answer, but as of right now a new loop inside the mouse-over event does the job.
$("ul.menu__navigation li a").on("mouseenter", function (e) {
// this function displays my pop-ups
showLandName($(this).data("id"));
// animate only the one hovered on the link list
var test = '/' + $(this).data("id");
for (var regionName in regions) {
(function (region) {
if (region.data('href') === test) {
region.animate(hoverStyle, animationSpeed);
}
})(regions[regionName]);
}
});
So I am working on a simple android app using Phaser. But I was looking if it is possible to create a loading screen that uses a spritesheet animation or programmatically do an animation other than just a simple crop how phaser does it?
this.preloadBar = this.add.sprite(50, 170, 'preloaderBar');
this.load.setPreloadSprite(this.preloadBar);
Thanks in advance :)
In order to achieve that, i have a boot state where i initialise various game related utilities and the sprite i want to have during the loading screen. Then i just load the preloader state where everything else is being loaded and i just put the previous sprite on the screen. When everything finishes, main game, or menu state starts.
Here is an example:
Test.Boot.prototype = {
init: function () {
//general game config like scaleManager
},
preload: function () {
this.game.stage.backgroundColor = '#000000';
// the sprite you want to show during loading
this.game.load.atlasJSONHash('logo', 'asset/images/hand.png', 'asset/images/hand.json');
},
create: function () {
this.state.start('Preloader');
}
};
// Preloader.js
Test.Preloader.prototype = {
preload: function() {
//add the animation
this.logo = this.add.sprite(this.world.width/2, this.world.height/2, 'logo');
this.logo.anchor.set(0.5, 0.5);
this.logo.animations.add('shake',[8,9,10,11,12,13,14,15,16,17,17,8,9,8]);
this.logo.animations.play('shake', 60, true);
//load all the other assets
this.game.load.image("hero", "asset/images/hero.png");
this.game.load.image("clouds", "asset/images/sky3.jpg");
//this.game.load.image("rope", "asset/images/rope.png");
this.game.load.atlasJSONHash('items', 'asset/images/items.png', 'asset/images/items.json');
this.game.load.physics('physicsData', 'asset/images/polygon.json');
},
create: function() {
this.game.stage.backgroundColor = '#1589FF';
//A simple fade out effect
this.game.time.events.add(Phaser.Timer.SECOND * 2.0, function() {
var tween = this.add.tween(this.logo)
.to({alpha: 0}, 750, Phaser.Easing.Linear.none);
tween.onComplete.add(function() {
this.logo.destroy();
this.startGame();
}, this);
tween.start();
}, this);
},
startGame: function() {
this.state.start('MainMenu');
},
};
There is a video tutorial with similar technique here if you want to know more.
Is there any way to animate jsplumb connecting lines as they are being drawn? I want to have an animation, instead of just a line appearing.
I call jsPlumb.connect to draw the line upon clicking a div, like this
$("#manchester").on('click', function() {
jsPlumb.connect({source: "manchester", target: "paris"});
});
First we need to bind an event whenever a connection has been made in order to animate the newly created connection:
jsPlumb.bind("jsPlumbConnection", function(ci) {
new animateConn(ci.connection); //call the animate function for the newly created function
}
Now in the animation function just update the position of connection overlay to get the animation. Before doing make sure that you add overlay to your connections:
jsPlumb.connect({
source: "manchester", target: "paris",
overlays:[
"Arrow",
[ "Label", { location:0.45, id:"arrow" } ]
]
});
Now the animateConn function:
var interval = null;
animateConn = function(conn) {
var arrow = conn.getOverlay("arrow");
interval = window.setInterval(function() {
arrow.loc += 0.05;
if (arrow.loc > 1) {arrow.loc = 0;}
try{
conn.repaint(); // writing in try block since when connection is removed we need to terminate the function for that particular connection
}catch(e){stop();}
}, 100);
},
stop = function() {
window.clearInterval(interval);
};
To customise the overlay refer the API DOC.
Im trying to have a little animation when you hover over raphael elements.
See Example here:
http://jsfiddle.net/GVEqf/24/
When you hover over the square it scales up and when you stop hovering it scales down.
The problem is: When you stop hovering over the element while it's still scaling up, it'll start scaling down and it will end up smaller then it was originally.
You can see that when you hover over the element and then immediately move the mouse out of it.
Here are the functions I use for the hovering animations:
hoverFunc = function() {
rect.animate({transform: "...s1.6,1.6"}, 1000, 'bounce');
};
hideFunc = function() {
rect.animate({transform: "...s0.625,0.625"}, 1000, 'bounce');
};
I would save the transform to a var and transform to the origional state:
var canvas = Raphael(document.getElementById("canvas"), 250, 250);
var rect = canvas.rect(1, 1, 50, 50);
rect.attr({'fill': 'black'});
rect.transform("t20, 20");
var origionalForm = rect.transform(); // remember current transform
hoverFunc = function() {
rect.animate({transform: "...s1.6,1.6"}, 1000, 'bounce');
};
hideFunc = function() {
rect.animate({transform: origionalForm.toString()}, 1000, 'bounce'); // back to origional state
};
rect.hover(hoverFunc, hideFunc);
Demo: http://jsfiddle.net/GVEqf/27/
Instead of appending the transform to all the existing transforms (using “...”) in both animations, you could just reset the absolute transform (in at least one of the animations). This has the downside that you have to repeat the initial translation string but I guess it has the upside of being more explicit.
I’ve modified your jsFiddle:
hoverFunc = function() {
rect.animate({transform: "...S1.6,1.6"}, 1000, 'bounce');
};
hideFunc = function() {
rect.animate({transform: "t20, 20"}, 1000, 'bounce');
};
I am making a simple slider that works by changing the src attribute of an img tag and the attributes of anchor tags. This is what I have come up with so far:
(function($){
var slides = [
'http://placehold.it/801x350',
'http://placehold.it/802x350',
'http://placehold.it/803x350'
],
titles = [
'Title 1',
'Title 2',
'Title 3'
],
links = [
'http://test1.com',
'http://test2.com',
'http://test3.com'
],
image = $('#stretch-img'),
anchor = $('.featured-title>h2>a');
var interval = setInterval(function() {
image.attr('src', slides[0]);
anchor.attr('href', links[0]);
anchor.html(titles[0]);
}, 3000);
})(jQuery);
I want the interval to loop through the arrays continuously with a simple fade effect. What can be the best way to do this or any way to do this really, coz I've got none.
Thanks!
I appreciate all the help.
To loop through your array you can set a current-position-variable and a variable that saves the length of the array:
var current = 0,
length = slides.length,
interval = setInterval(function() {
image.attr('src', slides[current]);
anchor.attr('href', links[current]).html(titles[current]);
current++;
if (current >= length) {
current = 0;
}
}, 3000);
Then to fade you can fade-out, change the source, then fade-back-in:
image.fadeOut(500, function () {
image.attr('src', slides[current]).fadeIn(500);
anchor.attr('href', links[current]).html(titles[current]);
current++;
if (current >= length) {
current = 0;
}
});
This can lead to the image not quite being loaded when the fadeIn(500) kicks-in, which can be fixed by using an event handler attached to the load event for the image element:
var image = $('#stretch-img').on('load', function () {
image.fadeIn(500);
});
Then you can remove the fadeIn(500) from the interval function since it will fire when the image has loaded. The load event will fire whenever the source of the image changes and the new source finishes loading.
Note that .on() is new in jQuery 1.7 and is the same as .bind() in this case.