MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 14:53:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Animated emoji

Browse Source 
Co-authored-by: Nekromateion <43814053+Nekromateion@users.noreply.github.com>
This commit is contained in:
Natsumi
2024-05-29 10:50:41 +12:00
parent fff33bf03f
commit ac5d6e9bf2
4 changed files with 6463 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6431
html/src/animated-emoji.scss Normal file
View File

File diff suppressed because it is too large Load Diff

25
html/src/app.js
View File

@@ -25173,6 +25173,31 @@ speechSynthesis.getVoices();
ZZZ: 'Preview_B2-ZZZ.gif'
};
$app.methods.generateEmojiStyle = function (
url,
fps,
frameCount,
animationStyle
) {
let framesPerLine = 2;
if (frameCount > 4) framesPerLine = 4;
if (frameCount > 16) framesPerLine = 8;
const animationDurationMs = (1000 / fps) * frameCount;
const frameSize = 1024 / framesPerLine;
const scale = 100 / (frameSize / 200);
const animStyle =
animationStyle === 'pingpong' ? 'alternate' : 'infinite';
const style = `
transform: scale(${scale / 100});
transform-origin: top left;
width: ${frameSize}px;
height: ${frameSize}px;
background: url('${url}') 0 0;
animation: ${animationDurationMs}ms steps(1) 0s ${animStyle} normal none running animated-emoji-${frameCount};
`;
return style;
};
// #endregion
// #region Misc

8
html/src/index.pug
View File

@@ -10,6 +10,7 @@ html
link(rel="preconnect" href="https://d348imysud55la.cloudfront.net")
link(rel="stylesheet" href="app.css")
link(rel="stylesheet" href="flags.css")
link(rel="stylesheet" href="animated-emoji.css")
body
.x-app#x-app(style="display:none" @dragenter.prevent @dragover.prevent @drop.prevent)
//- login
@@ -2501,8 +2502,11 @@ html
span {{ $t('dialog.gallery_icons.flipbook_info') }}
br
.x-friend-item(v-if="image.versions && image.versions.length > 0" v-for="image in emojiTable" :key="image.id" style="display:inline-block;margin-top:10px;width:unset;cursor:default")
.vrcplus-icon(v-if="image.versions[image.versions.length - 1].file.url" style="cursor:default")
img.avatar(v-lazy="image.versions[image.versions.length - 1].file.url")
.vrcplus-icon(v-if="image.versions[image.versions.length - 1].file.url" style="overflow:hidden" @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)")
template(v-if="image.frames")
.avatar(:style="generateEmojiStyle(image.versions[image.versions.length - 1].file.url, image.framesOverTime, image.frames, image.animationStyle)")
template(v-else)
img.avatar(v-lazy="image.versions[image.versions.length - 1].file.url")
div(style="display:inline-block;margin:5px")
span(v-if="image.loopStyle === 'pingpong'") #[i.el-icon-refresh.el-icon--left]
span(style="margin-right:5px") {{ image.animationStyle }}

1
html/webpack.config.js
View File

@@ -22,6 +22,7 @@ module.exports = {
'theme.pink': './src/theme.pink.scss',
'theme.material3': './src/theme.material3.scss',
flags: './src/flags.scss',
'animated-emoji': './src/animated-emoji.scss',
vr: {
import: ['./src/vr.js', './src/vr.scss'],
dependOn: 'vendor'