diff --git a/CHANGELOG.md b/CHANGELOG.md index 4ec4ae4fec..8612220c86 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,13 @@ - ### Client -- +- 「にゃああああああああああああああ!!!!!!!!!!!!」 (`isCat`) 有効時にアバターに表示される猫耳について挙動を変更 + - 「UIにぼかし効果を使用」 (`useBlurEffect`) で次の挙動が有効になります + - 猫耳のアバター内部部分をぼかしでマスク表示してより猫耳っぽく見えるように + - 猫耳の色がアバター上部のピクセルから決定されます(無効化時はアバター全体の平均色) + - 左耳は上からおよそ 10%, 左からおよそ 20% の位置で決定します + - 右耳は上からおよそ 10%, 左からおよそ 80% の位置で決定します + - 「UIのアニメーションを減らす」 (`reduceAnimation`) で猫耳を撫でられなくなります ### Server - diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index 814ab53d27..9a21941c8d 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -1,5 +1,5 @@ <template> -<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick"> +<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick"> <img :class="$style.inner" :src="url" decoding="async"/> <MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/> <div v-if="user.isCat" :class="[$style.ears, { [$style.mask]: useBlurEffect }]"> @@ -27,6 +27,7 @@ import { acct, userPage } from '@/filters/user'; import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue'; import { defaultStore } from '@/store'; +const animation = $ref(defaultStore.state.animation); const squareAvatars = $ref(defaultStore.state.squareAvatars); const useBlurEffect = $ref(defaultStore.state.useBlurEffect); @@ -86,6 +87,18 @@ watch(() => props.user.avatarBlurhash, () => { to { transform: rotate(-37.6deg) skew(-30deg); } } +@keyframes eartightleft { + from { transform: rotate(37.6deg) skew(30deg); } + 50% { transform: rotate(37.4deg) skew(30deg); } + to { transform: rotate(37.6deg) skew(30deg); } +} + +@keyframes eartightright { + from { transform: rotate(-37.6deg) skew(-30deg); } + 50% { transform: rotate(-37.4deg) skew(-30deg); } + to { transform: rotate(-37.6deg) skew(-30deg); } +} + .root { position: relative; display: inline-block; @@ -144,6 +157,14 @@ watch(() => props.user.avatarBlurhash, () => { mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><filter id="a"><feGaussianBlur in="SourceGraphic" stdDeviation="1"/></filter><circle cx="16" cy="16" r="15" filter="url(%23a)"/></svg>') exclude center / 50% 50%, linear-gradient(#fff, #fff); // polyfill of `image(#fff)` + + > .earLeft { + animation: eartightleft 6s infinite; + } + + > .earRight { + animation: eartightright 6s infinite; + } } > .earLeft, @@ -225,7 +246,7 @@ watch(() => props.user.avatarBlurhash, () => { } } - &:hover { + &.animation:hover { > .ears { > .earLeft { animation: earwiggleleft 1s infinite; diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue index 0d229a9370..710edd797a 100644 --- a/packages/frontend/src/components/global/MkPageHeader.vue +++ b/packages/frontend/src/components/global/MkPageHeader.vue @@ -8,7 +8,9 @@ <template v-if="metadata"> <div v-if="!hideTitle" :class="$style.titleContainer" @click="top"> - <MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" indicator/> + <div v-if="metadata.avatar" :class="$style.titleAvatarContainer"> + <MkAvatar :class="$style.titleAvatar" :user="metadata.avatar" indicator/> + </div> <i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i> <div :class="$style.title"> @@ -249,13 +251,19 @@ onUnmounted(() => { margin-left: 24px; } -.titleAvatar { +.titleAvatarContainer { $size: 32px; - display: inline-block; + contain: strict; + overflow: clip; width: $size; height: $size; - vertical-align: bottom; - margin: 0 8px; + padding: 8px; + flex-shrink: 0; +} + +.titleAvatar { + width: 100%; + height: 100%; pointer-events: none; }