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

some filters

Browse Source
This commit is contained in:
ntr 2019-07-01 17:46:01 +10:00
parent 6f38d694ac
commit 465595de5f
4 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/assets/styles/game.css
View File

@ -347,6 +347,7 @@
.skill-animation { .skill-animation {
opacity: 0; opacity: 0;
stroke-width: 5px;
} }
/* /*

20
client/src/components/anims/curse.jsx
View File

@ -21,9 +21,20 @@ class Curse extends Component {
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 198 200"> viewBox="0 0 198 200">
<ellipse cx="100" cy="100" rx="30" ry="30"/> <defs>
<ellipse cx="100" cy="100" rx="60" ry="60"/> <filter id="curseFilter">
<ellipse cx="100" cy="100" rx="90" ry="90"/> <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g filter="url(#curseFilter)">
<ellipse cx="100" cy="100" rx="30" ry="30"/>
<ellipse cx="100" cy="100" rx="60" ry="60"/>
<ellipse cx="100" cy="100" rx="90" ry="90"/>
</g>
</svg> </svg>
); );
} }
@ -40,8 +51,9 @@ class Curse extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#curse'], targets: ['#curse'],
scale: [0.5, 0.8], scale: [0.5, 1],
strokeWidth: [8, 0], strokeWidth: [8, 0],
easing: 'easeInOutSine', easing: 'easeInOutSine',
// delay: TIMES.TARGET_DELAY_MS, // delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,

19
client/src/components/anims/decay.jsx
View File

@ -18,7 +18,16 @@ class Decay extends Component {
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300"> viewBox="0 0 300 300">
<g> <defs>
<filter id="decayFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g filter="url(#decayFilter)" >
<rect x="135" y="135" width="30" height="30" /> <rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" /> <rect x="135" y="135" width="30" height="30" />
<rect x="135" y="135" width="30" height="30" /> <rect x="135" y="135" width="30" height="30" />
@ -50,12 +59,10 @@ class Decay extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#decay rect'], targets: ['#decay rect'],
x: () => anime.random(30, 270), x: () => anime.random(50, 250),
y: () => anime.random(30, 270), y: () => anime.random(50, 250),
transform: `rotate(${anime.random(-15, 15)})`, transform: `rotate(${anime.random(-15, 15)})`,
filter: ['brightness(1)', 'brightness(1.5)'], easing: 'easeOutSine',
opacity: 0,
easing: 'linear',
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.START_SKILL, duration: TIMES.START_SKILL,
})); }));

35
client/src/components/anims/hex.jsx
View File

@ -22,16 +22,18 @@ class Hex extends Component {
id="hex" id="hex"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128"> viewBox="0 0 128 128">
<filter id='hexFilter'> <defs>
<feTurbulence type="turbulence" <filter id="hexFilter">
baseFrequency="0.10" <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
numOctaves="10" result="turbulence"> <feMerge>
</feTurbulence> <feMergeNode />
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> <feMergeNode in="SourceGraphic" />
</filter> </feMerge>
</filter>
</defs>
<polygon <polygon
points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100" points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
style={{ filter: 'url("#hexFilter")' }}> filter="url(#hexFilter)">
</polygon> </polygon>
</svg> </svg>
); );
@ -54,16 +56,15 @@ class Hex extends Component {
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));
// this.animations.push(anime({
// targets: ['feTurbulence', 'feDisplacementMap'],
// baseFrequency: 0,
// scale: 1,
// easing: 'easeOutSine',
this.animations.push(anime({ // delay: TIMES.TARGET_DELAY_MS,
targets: ['feTurbulence', 'feDisplacementMap'], // duration: TIMES.TARGET_DURATION_MS,
baseFrequency: 0, // }));
scale: 1,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
} }
// this is necessary because // this is necessary because