mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-14 06:00:44 +01:00
Add bounce MFM animation
This commit is contained in:
parent
9d1fa3f202
commit
66c4e8064b
4 changed files with 25 additions and 0 deletions
|
@ -644,6 +644,8 @@ _mfm:
|
|||
tadaDescription: "ジャーン!という感じのアニメーションを与えます。"
|
||||
jump: "アニメーション(ジャンプ)"
|
||||
jumpDescription: "飛び跳ねるようなアニメーションを与えます。"
|
||||
bounce: "アニメーション(バウンド)"
|
||||
bounceDescription: "ぽよんぽよん弾むようなアニメーションを与えます。"
|
||||
shake: "アニメーション(ぶるぶる)"
|
||||
shakeDescription: "ぶるぶるするアニメーションを与えます。"
|
||||
twitch: "アニメーション(ブレ)"
|
||||
|
|
|
@ -117,6 +117,10 @@ export default defineComponent({
|
|||
style = this.$store.state.device.animatedMfm ? 'animation: mfm-jump 0.75s linear infinite;' : '';
|
||||
break;
|
||||
}
|
||||
case 'bounce': {
|
||||
style = this.$store.state.device.animatedMfm ? 'animation: mfm-bounce 0.75s linear infinite; transform-origin: center bottom;' : '';
|
||||
break;
|
||||
}
|
||||
case 'flip': {
|
||||
const transform =
|
||||
(token.node.props.args.h && token.node.props.args.v) ? 'scale(-1, -1)' :
|
||||
|
|
|
@ -37,6 +37,14 @@ export default defineComponent({
|
|||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes mfm-bounce {
|
||||
0% { transform: translateY(0) scale(1, 1); }
|
||||
25% { transform: translateY(-16px) scale(1, 1); }
|
||||
50% { transform: translateY(0) scale(1, 1); }
|
||||
75% { transform: translateY(0) scale(1.5, 0.75); }
|
||||
100% { transform: translateY(0) scale(1, 1); }
|
||||
}
|
||||
|
||||
// const val = () => `translate(${Math.floor(Math.random() * 20) - 10}px, ${Math.floor(Math.random() * 20) - 10}px)`;
|
||||
// let css = '';
|
||||
// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
|
||||
|
|
|
@ -175,6 +175,16 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_section">
|
||||
<div class="_title">{{ $t('_mfm.bounce') }}</div>
|
||||
<div class="_content">
|
||||
<p>{{ $t('_mfm.bounceDescription') }}</p>
|
||||
<div class="preview _panel">
|
||||
<Mfm :text="preview_bounce"/>
|
||||
<MkTextarea v-model:value="preview_bounce"><span>MFM</span></MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_section">
|
||||
<div class="_title">{{ $t('_mfm.spin') }}</div>
|
||||
<div class="_content">
|
||||
|
@ -240,6 +250,7 @@ export default defineComponent({
|
|||
preview_jelly: `[jelly 🍮]`,
|
||||
preview_tada: `[tada 🍮]`,
|
||||
preview_jump: `[jump 🍮]`,
|
||||
preview_bounce: `[bounce 🍮]`,
|
||||
preview_shake: `[shake 🍮]`,
|
||||
preview_twitch: `[twitch 🍮]`,
|
||||
preview_spin: `[spin 🍮] [spin.left 🍮] [spin.alternate 🍮]\n[spin.x 🍮] [spin.x,left 🍮] [spin.x,alternate 🍮]\n[spin.y 🍮] [spin.y,left 🍮] [spin.y,alternate 🍮]`,
|
||||
|
|
Loading…
Reference in a new issue