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

better reflect

Browse Source
This commit is contained in:
ntr 2019-07-02 19:46:58 +10:00
parent 8263f274bc
commit eac994b7b8
1 changed files with 11 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/components/anims/reflect.jsx
View File

@ -11,8 +11,8 @@ class Reflect extends Component {
} }
render({ team }) { render({ team }) {
let redX = anime.random(32, 128); const redX = anime.random(32, 96);
let blueX = anime.random(128, 224); const blueX = anime.random(192, 224);
return ( return (
<svg <svg
@ -31,8 +31,12 @@ class Reflect extends Component {
</defs> </defs>
<g filter="url(#reflectFilterGreen)"> <g filter="url(#reflectFilterGreen)">
<rect class="green" fill={COLOURS.GREEN} x="32" y="64" width="192" height="4" /> <rect class="green" fill={COLOURS.GREEN} x="32" y="64" width="192" height="4" />
<path class="red" d={`M${redX},20 L${redX * 1.5},64 L${redX * 2},20`} style={{ 'stroke-dasharray': anime.random(48, 64) }} /> <path class="red"
<path class="blue" d={`M${blueX},20 L${blueX * 0.75},64 L${blueX * 0.5},20`} style={{ 'stroke-dasharray': anime.random(48, 64) }} /> d={`M${redX * 0.5},20 L${redX},64 L${redX * 1.5},20`}
style={{ 'stroke-dasharray': anime.random(48, 64) }} />
<path class="blue"
d={`M${blueX},20 L${blueX * 0.75},64 L${blueX * 0.5},20`}
style={{ 'stroke-dasharray': anime.random(48, 64) }} />
</g> </g>
</svg> </svg>
); );
@ -50,22 +54,11 @@ class Reflect extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#reflect path'], targets: ['#reflect path'],
strokeDashoffset: [anime.setDashoffset, 0], strokeDashoffset: [0, 1000],
easing: 'linear', easing: 'linear',
loop: true, duration: TIMES.TARGET_DURATION_MS * 2,
duration: TIMES.TARGET_DURATION_MS / 5, delay: anime.stagger(200),
})); }));
// this.animations.push(anime({
// targets: ['#reflectFilter feTurbulence', ' #reflectFilter feDisplacementMap'],
// baseFrequency: 2,
// scale: 10,
// numOctaves: 5,
// easing: 'easeOutSine',
// delay: TIMES.TARGET_FADE_IN_DELAY,
// duration: TIMES.RESOLUTION_TOTAL_MS,
// }));
} }
// this is necessary because // this is necessary because