How can i restore an Kinetic.js event?
I programmed an Kinetic.js "shape-button", it listen to mouseover and mouseout events. when i click on it it changes the color and don't listen to mouseover/out anymore. I want it to listen to mouseover and mouseout again when i click it a second time. I tryed to remove one click event and restore the other in both events, but i cant restore one event with
circle.on("eventname")
i have to define a function like
circle.on("eventname", function(){//do stuff here});
but thad would end in an continous loop of define functions
Thank you for answering!
here is my code:
<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"> </script>
<script>
var layer = new Kinetic.Layer();
var sfcolor = '#00ff00'
var nfcolor = '#0000ff'
var cfcolor = '#ff0000'
var smcolor = '#009a00'
var nmcolor = '#00009a'
var cmcolor = '#9a0000'
var slcolor = '#007000'
var nlcolor = '#000070'
var clcolor = '#700000'
function drawCircle(sx, sy, sradius, sstrokeWidth) {
var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
var circleLayer = new Kinetic.Layer();
//circle
var scircle = new Kinetic.Circle({
x: sx,
y: sy,
radius: sradius,
fill: {
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
},
stroke: slcolor,
strokeWidth: sstrokeWidth
});
scircle.on("mouseover.event1", function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
});
this.setStroke(nlcolor);
scircle.off("click.event2");
circleLayer.draw();
});
scircle.on("mouseout.event1", function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
});
this.setStroke(slcolor);
scircle.off("click.event2");
circleLayer.draw();
});
scircle.on("click.event1", function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, cfcolor, 0.5, cmcolor, 1, clcolor]
});
this.setStroke(clcolor);
scircle.off("mouseout.event1");
scircle.off("mouseover.event1");
scircle.off("click.event1");
scircle.on("click.event2", function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
});
this.setStroke(clcolor);
scircle.on("mouseout.event1");
scircle.on("mouseover.event1");
scircle.on("click.event1");
scircle.off("click.event2");
circleLayer.draw();
});
circleLayer.draw();
});
circleLayer.add(scircle);
stage.add(circleLayer);
}
window.onload = function() {
drawCircle(200, 100, 50, 3);
};
</script>
</head>
<body>
<div id="container">
</div>
</body>
"On" function require two parameters. The first one is the event name. The second one is the handler.
You need to pass the handler to correctly restore the event.
I think you should try assign your events to handlers and pass them to scircle.on
See if the code below works
Cheers!
<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"> </script>
<script>
var layer = new Kinetic.Layer();
var sfcolor = '#00ff00'
var nfcolor = '#0000ff'
var cfcolor = '#ff0000'
var smcolor = '#009a00'
var nmcolor = '#00009a'
var cmcolor = '#9a0000'
var slcolor = '#007000'
var nlcolor = '#000070'
var clcolor = '#700000'
function drawCircle(sx, sy, sradius, sstrokeWidth) {
var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
var circleLayer = new Kinetic.Layer();
//circle
var scircle = new Kinetic.Circle({
x: sx,
y: sy,
radius: sradius,
fill: {
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
},
stroke: slcolor,
strokeWidth: sstrokeWidth
});
mouseover_event1 = function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
});
this.setStroke(nlcolor);
scircle.off("click.event2");
circleLayer.draw();
};
scircle.on("mouseover.event1", mouseover_event1);
mouseout_event1 = function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
});
this.setStroke(slcolor);
scircle.off("click.event2");
circleLayer.draw();
}
scircle.on("mouseout.event1", mouseout_event1);
click_event1 = function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, cfcolor, 0.5, cmcolor, 1, clcolor]
});
this.setStroke(clcolor);
scircle.off("mouseout.event1");
scircle.off("mouseover.event1");
scircle.off("click.event1");
scircle.on("click.event2", click_event2);
circleLayer.draw();
};
click_event2 = function() {
this.setFill({
start: {
x: 0,
y: 0,
radius: 0
},
end: {
x: 0,
y: 0,
radius: sradius
},
colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
});
this.setStroke(clcolor);
scircle.on("mouseout.event1", mouseout_event1);
scircle.on("mouseover.event1", mouseover_event1);
scircle.on("click.event1", click_event1);
scircle.off("click.event2");
circleLayer.draw();
};
scircle.on("click.event1", click_event1);
circleLayer.add(scircle);
stage.add(circleLayer);
}
window.onload = function() {
drawCircle(200, 100, 50, 3);
};
</script>
</head>
<body>
<div id="container">
</div>
</body>
Related
I am trying to draw a straight line on mouse click on plotlyjs with image loaded as background. I am able to get the co-ordinates but not able to draw lines on successive mouse clicks.
With the help of myPlot.on('plotly_click', function(data){ // some code }) I am able to get the co-ordinates but no idea to draw lines on mouse click. Any idea or reference will be helpful. Thanks in advance.
this is the output of the plotly graph with background image.
<script src='https://cdn.plot.ly/plotly-2.16.1.min.js'></script>
<div id='plotlyContainer'></div>
var d3 = Plotly.d3;
var imgWidth = 0;
var imgHeight = 0;
const imgs = new Image();
let plotCon = document.getElementById('plotlyContainer');
imgs.onload = function() {
imgWidth = this.width;
imgHeight = this.height;
loadImgGraph(imgWidth, imgHeight);
}
imgs.src = 'https://i.stack.imgur.com/cRbua.png';
function loadImgGraph(imgWidth, imgHeight) {
var data = [
{
x: [],
y: [],
type: 'scatter'
}
];
var layout = {
autosize: false,
width: imgWidth,
height: imgHeight,
xaxis: {range: [0, 100], dtick: 25, ticks: 'outside', tickwidth: 2, gridcolor: "black", gridwidth: 2, mirror: true, linecolor: 'black', linewidth: 1},
yaxis: {range: [140, 0], dtick: 20, ticks: 'outside', tickwidth: 2, gridcolor: "black", gridwidth: 2, mirror: true, linecolor: 'black', linewidth: 1},
margin: {
l: 32,
r: 20,
b: 30,
t: 30
},
images: [
{
source: 'https://i.stack.imgur.com/cRbua.png',
xref: 'paper',
yref: 'paper',
x: 0,
y: 1,
sizex: 1,
sizey: 1,
sizing: 'fill',
opacity: 1,
layer: 'below'
}
],
};
Plotly.newPlot('plotlyContainer', data, layout).then(clickEv);
function clickEv() {
var xaxis = plotCon._fullLayout.xaxis;
console.log('xaxis',xaxis);
var yaxis = plotCon._fullLayout.yaxis;
console.log('yaxis',yaxis);
var l = plotCon._fullLayout.margin.l;
console.log('l',l);
var t = plotCon._fullLayout.margin.t;
console.log('t',t);
plotCon.addEventListener('mousemove', function(evt) {
var xInDataCoord = xaxis.p2c(evt.x - l);
var yInDataCoord = yaxis.p2c(evt.y - t);
Plotly.relayout(plotCon, 'title', ['x: ' + xInDataCoord, 'y : ' + yInDataCoord].join('<br>'));
});
plotCon.on('plotly_click', function(){
alert('You clicked this Plotly chart!');
});
}
}
In you setting, one way to do it could be:
plotCon.addEventListener('click', function(evt){
data[0].x.push(xaxis.p2c(evt.x - l))
data[0].y.push(yaxis.p2c(evt.y - t))
Plotly.update(plotCon, data, layout);
});
Also, see Plotly.react for a more efficient way to update the plot.
I want to draw a shape as a background using fabric.js. I am trying to set scalable to false when creating the shape but it isn't working as expected.
I can’t select other shapes when scalable is set to false. Can someone tell me how can I do this?
The code I am using is below:
var pol = new fabric.Polygon([
{x: 200, y: 0},
{x: 250, y: 50},
{x: 250, y: 100},
{ x: 150, y: 100},
{x: 150, y: 50}
],
{
left: 0,
top: 0,
scaleX: 2,
scaleY: 2,
fill: 'green'
}
);
Thanks in advance.
You could set any shape as a background in fabric.js , using setBackgroundImage method. This method won't affect other shapes and will resolve the object selection issue.
ᴅᴇᴍᴏ
var canvas = new fabric.Canvas('c');
var pol = new fabric.Polygon([
{ x: 200, y: 0 },
{ x: 250, y: 50 },
{ x: 250, y: 100 },
{ x: 150, y: 100 },
{ x: 150, y: 50 }],
{
left: 0,
top: 0,
scaleX: 2,
scaleY: 2,
fill: 'green'
});
canvas.setBackgroundImage(pol);
canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
// create a rectangle with a fill and a different color stroke
var pol = new fabric.Polygon([
{x: 200, y: 0},
{x: 250, y: 50},
{x: 250, y: 100},
{ x: 150, y: 100},
{x: 150, y: 50}
],
{
left: 0,
top: 0,
selectable:false,
fill: 'green'
}
);
pol.set({
scaleX: canvas.width/pol.width,
scaleY: canvas.height/pol.height,
})
canvas.setBackgroundImage(pol);
canvas.renderAll();
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>
This one will fit to any canvas size, set scaleX and scaleY
How can I animate fillLinearGradientColorStops of a KineticJS Rect? I tried using a tween but surely it doesn't work.
The rectangle:
var rect = new Kinetic.Rect({
x: 20,
y: 20,
width: 100,
height: 100,
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 50, y: 50 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
});
The tween:
var tween = new Kinetic.Tween({
node: rect,
duration: 2,
easing: Kinetic.Easings.Linear,
fillLinearGradientColorStops: [0, 'black', 1, 'green']
});
tween.play();
Please see the fiddle http://jsfiddle.net/ZdCmS/. Is it not possible?
From there: https://github.com/ericdrowell/KineticJS/issues/901
You can use an external tweening library, like GreenSock (http://www.greensock.com/gsap-js/) with it's ColorProps plugin (http://api.greensock.com/js/com/greensock/plugins/ColorPropsPlugin.html) to tween colors and then apply them to the Kinetic shape on each frame update: http://jsfiddle.net/ZH2AS/2/
No plans for direct support of tweening color stops on a gradient fill.
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var linearGradPentagon = new Kinetic.RegularPolygon({
x: 150,
y: stage.height() / 2,
sides: 5,
radius: 70,
fillLinearGradientStartPoint: {
x: -50,
y: -50
},
fillLinearGradientEndPoint: {
x: 50,
y: 50
},
fillLinearGradientColorStops: [0, 'white', 1, 'black'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(linearGradPentagon);
stage.add(layer);
//activate ColorPropsPlugin
TweenPlugin.activate([ColorPropsPlugin]);
//object to store color values
var tmpColors = {
color0: 'white',
color1: 'black'
};
//tween the color values in tmpColors
TweenMax.to(tmpColors, 5, {
colorProps: {
color0: 'black',
color1: 'red'
},
yoyo: true,
repeat: 5,
ease:Linear.easeNone,
onUpdate: applyProps
});
function applyProps() {
linearGradPentagon.setAttrs({
fillLinearGradientColorStops: [0, tmpColors.color0, 1, tmpColors.color1]
});
layer.batchDraw();
}
I'm trying to make a tween which makes a ball bigger and disappear from the screen. It's easy if you do it for a circle.
Tween for only circle: http://jsfiddle.net/VrUB6/
Code:(it won't let me paste only the link):
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 500
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 100,
y: 100,
radius: 30,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 90,
fillRadialGradientColorStops: [0, 'red', 1, 'yellow'],
stroke: 'black',
strokeWidth: 0.4,
opacity: 1
});
layer.add(circle);
stage.add(layer);
circle.on('mousedown', function(){
var tween = new Kinetic.Tween({
node: circle,
duration: 0.8,
radius: 80,
opacity: 0,
});
tween.play();
});
But what I want to do is, same tween like this, but a text in the circle. For this I have to create a group, add circle and text in it and then tween the group(I guess). But if I do this, I can't change the radius in tween. It won't work.
Here is my work for it: http://jsfiddle.net/N2J2u/
Code:
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 500
});
var layer = new Kinetic.Layer();
var circ = new Kinetic.Circle({
x: 100,
y: 100,
radius: 30,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 90,
fillRadialGradientColorStops: [0, 'red', 1, 'yellow'],
stroke: 'black',
strokeWidth: 0.4,
opacity: 1
});
var group = new Kinetic.Group({
draggable: true,
});
group.add(circ);
var complexText = new Kinetic.Text({
x: 97,
y: 90,
text: '4',
fontSize: 30,
fontFamily: 'Calibri',
fill: '#555',
padding: -5,
align: 'center'
});
group.add(complexText);
layer.add(group);
stage.add(layer);
group.on('mousedown', function(){
var tween = new Kinetic.Tween({
node: group,
duration: 0.8,
radius: 80,
opacity: 0,
});
// start tween after 20 seconds
setTimeout(function() {
tween.play();
});
});
Thanks for the help.
Set up multiple tweens where the circle expands+fades and the number fades:
group.on('mousedown', function(){
var tweenCirc = new Kinetic.Tween({
node: circ,
duration: 0.8,
width: 80,
opacity: 0,
});
var tweenComplexText = new Kinetic.Tween({
node: complexText,
duration: 0.8,
opacity: 0,
});
// start tween after 20 seconds
setTimeout(function() {
tweenCirc.play();
tweenComplexText.play();
});
});
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/dvfr2/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 500
});
var layer = new Kinetic.Layer();
stage.add(layer);
var group = new Kinetic.Group({ draggable: true });
layer.add(group);
var circ = new Kinetic.Circle({
x: 100,
y: 100,
radius: 30,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 90,
fillRadialGradientColorStops: [0, 'red', 1, 'yellow'],
stroke: 'black',
strokeWidth: 0.4,
opacity: 1
});
group.add(circ);
var complexText = new Kinetic.Text({
x: 97,
y: 90,
text: '4',
fontSize: 30,
fontFamily: 'Calibri',
fill: '#555',
padding: -5,
align: 'center'
});
group.add(complexText);
group.on('mousedown', function(){
var tweenCirc = new Kinetic.Tween({
node: circ,
duration: 0.8,
width: 80,
opacity: 0,
});
var tweenComplexText = new Kinetic.Tween({
node: complexText,
duration: 0.8,
opacity: 0,
});
// start tween after 20 seconds
setTimeout(function() {
tweenCirc.play();
tweenComplexText.play();
});
});
layer.draw();
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
http://www.google.com/chromebook/#features
When you hover the logo, you can see a shiny animation.
I have looked into the source code but it doesn't look like done with :hover
any idea about how they do it?
Thank you very much
It's using the CHEDDAR Canvas Animation Framework by Eric Lee. Cheddar is based off of Cake.js by Ilmari Heikkinen http://code.google.com/p/cakejs/
This file : http://www.gstatic.com/chromebook/js/third_party/chromeicons-main.min.js
Look at the HTML source. It's done using a <canvas>.
<div id="header-logo">
<noscript>
<a data-g-label="MAIN-NAV-HOME" href="index.html" id="header-logo-noscript">
<img alt="Chrome" src="static/images/chromelogo-124x34.png">
</a>
</noscript>
<canvas height="40" id="canvas-logo" width="123">
<a data-g-label="MAIN-NAV-HOME" href="index.html">
<img alt="Chrome" src="static/images/chromelogo-124x34.png">
</a>
</canvas>
</div>
The relevant script appears to be chromeicons-main.min.js.
It's done with a canvas element.
Firebug says it's a canvas, which means HTML5.
The script http://www.gstatic.com/chromebook/js/third_party/chromeicons-main.min.js appears to contain a "canvas animation framework" that does the job.
If you look sources, you will see they use CHEDDAR Canvas Animation Framework to animate this logo.
looks like some canvas stuff to me. (nice beginner tutorial here)
This appears to be the relevant portion of chromeicons-main.min.js. for the chrome logo itself.
ChromeLogo = CClass(CanvasNode, {
center_gradient: new Gradient({
type: "radial",
startX: 7,
startY: -7,
endRadius: 14,
colorStops: [
[1, "#005791"],
[0.62, "#2284DC"],
[0, "#86B9E2"]
]
}),
center_back: new Gradient({
type: "radial",
endRadius: 14,
colorStops: [
[0, "#D2D2D2"],
[1, "#FFFFFF"]
]
}),
top_gradient: new Gradient({
type: "radial",
endRadius: 16,
colorStops: [
[0.15, "#F37C65"],
[1, [243, 124, 90, 0]]
]
}),
highlight_gradient3: new Gradient({
type: "radial",
startX: 0,
startY: 0,
endRadius: 40,
colorStops: [
[1, "rgba(255,255,255,0)"],
[0.4, "rgba(255,255,255,.4)"],
[0, "rgba(255,255,255,0)"]
]
}),
highlight_gradient4: new Gradient({
type: "radial",
startX: 0,
startY: 0,
endRadius: 8,
colorStops: [
[1, "rgba(255,255,255,0)"],
[0.4, "rgba(255,255,255,.5)"],
[0, "rgba(255,255,255,0)"]
]
}),
highlight_gradient5: new Gradient({
type: "radial",
startX: 0,
startY: 0,
endRadius: 8,
colorStops: [
[1, "rgba(255,255,255,0)"],
[0.5, "rgba(255,255,255,.9)"],
[0, "rgba(255,255,255,0)"]
]
}),
initialize: function () {
CanvasNode.initialize.call(this);
this.scale = 0.78;
this.catchMouse = false;
this.textGlow = new Circle(30, {
fill: this.highlight_gradient5,
x: 22,
y: 23,
zIndex: 2
});
this.append(this.textGlow);
this.center = new Circle(7.5, {
fill: this.center_gradient,
x: 22,
y: 23,
zIndex: 4,
clip: true
});
this.centerBack = new Circle(9, {
fill: this.center_back,
x: 22,
y: 23,
zIndex: 3
});
this.border = new CanvasNode({
zIndex: 2
});
this.mask = new CanvasNode({
x: 22,
y: 23
});
this.ch3 = new Circle(8, {
fill: this.highlight_gradient4,
scale: 0.1,
opacity: 0,
compositeOperation: "lighter"
});
this.center.append(this.ch3);
this.red = _iconController.asset("logo_red");
this.red.childNodes[0].clip = true;
this.red.setProps({
x: -17,
y: -20,
clip: true
});
this.redShadow = _iconController.asset("shadow_red");
this.redShadow.setProps({
x: -17,
y: -13,
zIndex: 2
});
this.rh3 = new Circle(40, {
fill: this.highlight_gradient3,
scale: 0.1,
opacity: 1,
compositeOperation: "lighter",
x: 17,
y: 20,
zIndex: 4
});
this.red.childNodes[0].append(this.rh3);
this.yellow = _iconController.asset("logo_yellow");
this.yellow.setProps({
x: -1.5,
y: -9
});
this.yellow.childNodes[0].clip = true;
this.yellowShadow = _iconController.asset("shadow_yellow");
this.yellowShadow.setProps({
zIndex: 2,
x: 1,
y: -9
});
this.yh3 = new Circle(40, {
fill: this.highlight_gradient3,
scale: 0.1,
opacity: 1,
compositeOperation: "lighter",
x: 1.5,
y: 9,
zIndex: 4
});
this.yellow.childNodes[0].append(this.yh3);
this.green = _iconController.asset("logo_green");
this.green.setProps({
x: -20,
y: -11
});
this.green.childNodes[0].clip = true;
this.greenShadow = _iconController.asset("shadow_green");
this.greenShadow.setProps({
x: -2,
y: 5,
zIndex: 2
});
this.gh3 = new Circle(40, {
fill: this.highlight_gradient3,
scale: 0.1,
opacity: 1,
compositeOperation: "lighter",
x: 20,
y: 11.5,
zIndex: 4
});
this.green.childNodes[0].append(this.gh3);
this.top = new Circle(19, {
fill: false,
clip: true,
x: 24,
y: 23,
zIndex: 5
});
this.topGrad = new Circle(19, {
fill: this.top_gradient,
x: -2,
y: -24
});
this.mask.append(this.red, this.redShadow, this.yellow, this.yellowShadow, this.green, this.greenShadow);
this.border.append(this.mask);
this.top.append(this.topGrad);
this.append(this.border, this.centerBack, this.center, this.top);
this.text = _iconController.asset("logo_text");
this.text.setProps({
x: 49,
y: 8
});
for (var a = 0; a < this.text.childNodes[0].childNodes.length; a++) {
this.text.childNodes[0].childNodes[a].opacity = 1
}
this.append(this.text)
},
mouseOver: function () {
this.canvas.play();
_tw.removeTweensOf([this.textGlow, this.rh3, this.yh3, this.gh3, this.ch3]);
this.textGlow.scale = this.ch3.scale = this.rh3.scale = this.gh3.scale = this.yh3.scale = 0.1;
this.textGlow.opacity = this.rh3.opacity = this.gh3.opacity = this.yh3.opacity = 1;
var a = new Array(0, 0.1, 0.2, 0.3);
var b = shuffle(a);
_tw.addTween(this.center, {
time: 0.1,
scale: 1.02,
transition: "easeOutQuad"
});
_tw.addTween(this.centerBack, {
time: 0.1,
scale: 1.02,
transition: "easeOutQuad"
});
_tw.addTween(this.mask, {
time: 0.1,
scale: 1.02,
transition: "easeOutQuad",
onComplete: function (c) {
_tw.addTween(c.center, {
time: 0.5,
scale: 1,
transition: "easeInOutBack"
});
_tw.addTween(c.centerBack, {
time: 0.55,
scale: 1,
transition: "easeInOutBack"
});
_tw.addTween(c.mask, {
time: 0.55,
scale: 1,
transition: "easeInOutBack"
})
},
onCompleteParams: [this]
});
_tw.addTween(this.rh3, {
time: 2,
delay: b[0],
scale: 4,
opacity: 0,
transition: "easeOutCubic"
});
_tw.addTween(this.yh3, {
time: 2,
delay: b[1],
scale: 4,
opacity: 0,
transition: "easeOutCubic"
});
_tw.addTween(this.gh3, {
time: 2,
delay: b[2],
scale: 4,
opacity: 0,
transition: "easeOutCubic"
});
_tw.addTween(this.ch3, {
time: 0.2,
delay: b[3],
scale: 10,
opacity: 1,
transition: "linear",
onComplete: function (c) {
_tw.addTween(c.ch3, {
time: 0.25,
opacity: 0
})
},
onCompleteParams: [this]
});
_tw.addTween(this.textGlow, {
time: 10,
delay: 0.5,
scale: 120,
opacity: 0.2,
onComplete: function (c) {
c.canvas.stop()
},
onCompleteParams: [this]
})
},
mouseOut: function () {}
});
_iconController.initializeIcon("canvas-logo", ChromeLogo);