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

silence whiteness

Browse Source
This commit is contained in:
ntr 2019-07-05 17:49:38 +10:00
parent 548b88241f
commit dbf9c4da19
1 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/anims/silence.jsx
View File

@ -14,13 +14,11 @@ class Silence extends Component {
render() { render() {
return ( return (
<svg <svg
class='skill-animation blue' class='skill-animation'
version="1.1" version="1.1"
id="silence" id="silence"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
style={{ transform: 'scale(3)' }}
viewBox="0 0 128 128"> viewBox="0 0 128 128">
<defs>
<filter id="silenceFilter"> <filter id="silenceFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" /> <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feMerge> <feMerge>
@ -28,10 +26,11 @@ class Silence extends Component {
<feMergeNode in="SourceGraphic" /> <feMergeNode in="SourceGraphic" />
</feMerge> </feMerge>
</filter> </filter>
</defs>
<g filter="url(#silenceFilter)" stroke-width="4px" > <g filter="url(#silenceFilter)" stroke-width="4px" >
<path id="sOne" d="M 8 124 L 8 8" /> <path class="rOne blue" d="M 8 124 L 8 8" />
<path id="sTwo" d="M 124 8 L 124 124" /> <path class="rTwo blue" d="M 124 8 L 124 124" />
<path class="rOne white" d="M 8 124 L 8 8" stroke-width="1px" />
<path class="rTwo white" d="M 124 8 L 124 124" stroke-width="1px" />
</g> </g>
</svg> </svg>
); );
@ -49,6 +48,7 @@ class Silence extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#silence'], targets: ['#silence'],
rotate: [90, 90],
scale: { scale: {
value: 1, value: 1,
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
@ -61,18 +61,21 @@ class Silence extends Component {
easing: 'easeOutSine', easing: 'easeOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#sOne'], targets: ['.rOne'],
d: 'M 124 8 L 8 124', d: 'M 124 8 L 8 124',
delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4, delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
duration: TIMES.TARGET_DURATION_MS * 0.4, duration: TIMES.TARGET_DURATION_MS * 0.4,
easing: 'easeOutSine', easing: 'easeOutSine',
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: ['#sTwo'], targets: ['.rTwo'],
d: 'M 124 124 L 8 8', d: 'M 124 124 L 8 8',
delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4, delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4,
duration: TIMES.TARGET_DURATION_MS * 0.4, duration: TIMES.TARGET_DURATION_MS * 0.4,
easing: 'easeOutSine', easing: 'easeOutSine',