ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flat colour siphon

Browse Source
This commit is contained in:
ntr 2019-10-08 15:32:56 +11:00
parent 9e2d8a9607
commit 7437111cac
5 changed files with 18 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/animations.test.js
View File

@ -8,7 +8,7 @@ require('./assets/styles/instance.less');
require('./assets/styles/vbox.less');
require('./assets/styles/game.less');
require('./assets/styles/player.less');
require('./assets/styles/styles.mobile.css');
require('./assets/styles/styles.mobile.less');
require('./assets/styles/instance.mobile.less');
require('./src/animations.test.jsx');

3
client/assets/styles/styles.less
View File

@ -12,6 +12,9 @@ html body {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
overflow-x: hidden;
overflow-y: hidden;
}
#mnml {

5
client/assets/styles/styles.mobile.less
View File

@ -1,4 +1,8 @@
@media (max-width: 800px) {
body {
overflow-y: initial;
}
#mnml {
font-size: 12pt;
padding: 0;
@ -11,7 +15,6 @@
height: 100vh;
max-height: initial;
min-height: initial;
overflow-y: initial;
}
table td {

14
client/src/components/anims/siphon.jsx
View File

@ -27,12 +27,9 @@ class Siphon extends Component {
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400"
viewBox="0 0 300 300"
opacity="0">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<circle id="siphon" r="140" cx="150" cy="150" stroke="#3050f8" stroke-width="2.5%" filter="url(#blur)"/>
<circle id="siphon" r="140" cx="150" cy="150" stroke="#3050f8" stroke-width="2.5%"/>
</svg>
);
}
@ -53,12 +50,7 @@ class Siphon extends Component {
anime({
targets: '#siphon',
keyframes: [
{ r: '110', stroke: '#1FF01F' },
{ r: '80', stroke: '#1FF01F' },
{ r: '50', stroke: '#3050f8' },
{ r: '20', stroke: '#3050f8' },
],
r: 0,
delay: TIMES.TARGET_DELAY_MS,
duration,
easing: 'easeInCubic',

28
client/src/components/anims/siphon.tick.jsx
View File

@ -20,9 +20,7 @@ function projectile(x, y, radius, colour) {
cx={x}
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="0.1"
stroke={colour}
fill={colour}
/>
);
}
@ -44,24 +42,16 @@ class SiphonTick extends Component {
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
viewBox="0 0 300 300">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<circle id="siphon" r="20" cx="150" cy="150" stroke="#3050f8" stroke-width="2.5%" filter="url(#blur)"/>
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#3050f8;stop-opacity:0.4" />
<stop offset="100%" style={'stop-color:#1FF01F;stop-opacity:1'} />
</radialGradient>
</defs>
<filter id="explosion">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{this.charges}
</svg>
);
@ -84,27 +74,23 @@ class SiphonTick extends Component {
});
anime.set('#siphon', {
r: '80',
r: 0,
stroke: '#3050f8',
});
anime({
targets: '#siphon',
keyframes: [
{ r: '50', stroke: '#3050f8' },
{ r: '20', stroke: '#3050f8' },
{ r: '0', stroke: '#3050f8' },
],
r: 600,
duration: duration * 2 / 3,
easing: 'easeInCubic',
easing: 'easeInSine',
});
const projectiles = document.querySelectorAll('.skill-anim circle');
projectiles.forEach(proj => {
anime({
targets: proj,
cx: Math.random() * 250 + 25,
cy: Math.random() * 200 - 100,
cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
cy: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
delay: (Math.random() * duration * 1 / 2),
duration,
easing: 'easeInQuad',