Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

#299 Use Anime instead of Velocity

Browse source
This commit is contained in:
syuilo 2017-03-20 18:43:04 +09:00
parent 5869aab255
commit 9996603e15
12 changed files with 139 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -64,6 +64,7 @@
"@types/webpack": "2.2.11",
"@types/webpack-stream": "3.2.6",
"@types/websocket": "0.0.33",
"animejs": "2.0.1",
"autwh": "0.0.1",
"bcryptjs": "2.4.3",
"body-parser": "1.17.1",
@ -141,7 +142,6 @@
"typescript": "2.2.1",
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#8f4b45f4f814c04918382949b4bcaf7a8d910281",
"uuid": "3.0.1",
"velocity-animate": "1.4.3",
"vhost": "3.0.2",
"webpack": "2.2.1",
"webpack-stream": "3.2.0",

1
src/web/app/boot.js
View file

@ -3,7 +3,6 @@
*/
import * as riot from 'riot';
require('velocity-animate');
import api from './common/scripts/api';
import signout from './common/scripts/signout';
import checkForUpdate from './common/scripts/check-for-update';

33
src/web/app/common/tags/reaction-picker.tag
View file

@ -1,5 +1,5 @@
<mk-reaction-picker>
<div class="backdrop" onclick={ unmount }></div>
<div class="backdrop" ref="backdrop" onclick={ close }></div>
<div class="popover" ref="popover">
<button onclick={ react.bind(null, 'like') } tabindex="1" title="いいね"><mk-reaction-icon reaction='like'></mk-reaction-icon></button>
<button onclick={ react.bind(null, 'love') } tabindex="2" title="ハート"><mk-reaction-icon reaction='love'></mk-reaction-icon></button>
@ -30,6 +30,8 @@
border 1px solid rgba(27, 31, 35, 0.15)
border-radius 4px
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
transform scale(0.5)
opacity 0
> button
width 40px
@ -46,6 +48,8 @@
</style>
<script>
import anime from 'animejs';
this.mixin('api');
this.post = this.opts.post;
@ -60,6 +64,13 @@
const height = this.refs.popover.offsetHeight;
this.refs.popover.style.left = (x - (width / 2)) + 'px';
this.refs.popover.style.top = (y - (height / 2)) + 'px';
anime({
targets: this.refs.popover,
opacity: [0, 1],
scale: [0.5, 1],
duration: 500
});
});
this.react = reaction => {
@ -71,5 +82,25 @@
this.unmount();
});
};
this.close = () => {
this.refs.backdrop.style.pointerEvents = 'none';
anime({
targets: this.refs.backdrop,
opacity: 0,
duration: 200,
easing: 'linear'
});
this.refs.popover.style.pointerEvents = 'none';
anime({
targets: this.refs.popover,
opacity: 0,
scale: 0.5,
duration: 200,
easing: 'easeInBack',
complete: this.unmount
});
};
</script>
</mk-reaction-picker>

20
src/web/app/common/tags/stream-indicator.tag
View file

@ -35,6 +35,8 @@
</style>
<script>
import anime from 'animejs';
this.mixin('i');
this.mixin('stream');
@ -47,17 +49,23 @@
this.stream.on('_connected_', () => {
this.update();
setTimeout(() => {
Velocity(this.root, {
opacity: 0
}, 200, 'linear');
anime({
targets: this.root,
opacity: 0,
easing: 'linear',
duration: 200
});
}, 1000);
});
this.stream.on('_closed_', () => {
this.update();
Velocity(this.root, {
opacity: 1
}, 0);
anime({
targets: this.root,
opacity: 1,
easing: 'linear',
duration: 50
});
});
</script>
</mk-stream-indicator>

11
src/web/app/desktop/tags/contextmenu.tag
View file

@ -16,6 +16,7 @@
background #fff
border-radius 0 4px 4px 4px
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
opacity 0
ul
display block
@ -95,6 +96,7 @@
</style>
<script>
import anime from 'animejs';
import contains from '../../common/scripts/contains';
this.root.addEventListener('contextmenu', e => {
@ -116,12 +118,9 @@
this.root.style.left = pos.x + 'px';
this.root.style.top = pos.y + 'px';
Velocity(this.root, 'finish', true);
Velocity(this.root, { opacity: 0 }, 0);
Velocity(this.root, {
opacity: 1
}, {
queue: false,
anime({
targets: this.root,
opacity: [0, 1],
duration: 100,
easing: 'linear'
});

43
src/web/app/desktop/tags/dialog.tag
View file

@ -36,6 +36,7 @@
padding 32px 42px
width 480px
background #fff
opacity 0
> header
margin 1em 0
@ -79,6 +80,8 @@
</style>
<script>
import anime from 'animejs';
this.canThrough = opts.canThrough != null ? opts.canThrough : true;
this.opts.buttons.forEach(button => {
button._onclick = () => {
@ -92,25 +95,17 @@
this.refs.body.innerHTML = this.opts.text;
this.refs.bg.style.pointerEvents = 'auto';
Velocity(this.refs.bg, 'finish', true);
Velocity(this.refs.bg, {
opacity: 1
}, {
queue: false,
anime({
targets: this.refs.bg,
opacity: 1,
duration: 100,
easing: 'linear'
});
Velocity(this.refs.main, {
opacity: 0,
scale: 1.2
}, {
duration: 0
});
Velocity(this.refs.main, {
anime({
targets: this.refs.main,
opacity: 1,
scale: 1
}, {
scale: [1.2, 1],
duration: 300,
easing: [ 0, 0.5, 0.5, 1 ]
});
@ -118,25 +113,21 @@
this.close = () => {
this.refs.bg.style.pointerEvents = 'none';
Velocity(this.refs.bg, 'finish', true);
Velocity(this.refs.bg, {
opacity: 0
}, {
queue: false,
anime({
targets: this.refs.bg,
opacity: 0,
duration: 300,
easing: 'linear'
easing: 'linear'
});
this.refs.main.style.pointerEvents = 'none';
Velocity(this.refs.main, 'finish', true);
Velocity(this.refs.main, {
anime({
targets: this.refs.main,
opacity: 0,
scale: 0.8
}, {
queue: false,
scale: 0.8,
duration: 300,
easing: [ 0.5, -0.5, 1, 0.5 ],
complete: () => this.unmount()
complete: this.unmount
});
};

22
src/web/app/desktop/tags/home-widgets/tips.tag
View file

@ -29,6 +29,8 @@
</style>
<script>
import anime from 'animejs';
this.tips = [
'<kbd>t</kbd>でタイムラインにフォーカスできます',
'<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます',
@ -55,20 +57,22 @@
};
this.change = () => {
Velocity(this.refs.tip, {
opacity: 0
}, {
anime({
targets: this.refs.tip,
opacity: 0,
duration: 500,
easing: 'linear',
complete: this.set
});
Velocity(this.refs.tip, {
opacity: 1
}, {
duration: 500,
easing: 'linear'
});
setTimeout(() => {
anime({
targets: this.refs.tip,
opacity: 1,
duration: 500,
easing: 'linear'
});
}, 500);
};
</script>
</mk-tips-home-widget>

17
src/web/app/desktop/tags/image-dialog.tag
View file

@ -35,26 +35,27 @@
</style>
<script>
import anime from 'animejs';
this.image = this.opts.image;
this.on('mount', () => {
Velocity(this.root, {
opacity: 1
}, {
anime({
targets: this.root,
opacity: 1,
duration: 100,
easing: 'linear'
});
});
this.close = () => {
Velocity(this.root, {
opacity: 0
}, {
anime({
targets: this.root,
opacity: 0,
duration: 100,
easing: 'linear',
complete: () => this.unmount()
complete: this.unmount
});
};
</script>
</mk-image-dialog>

20
src/web/app/desktop/tags/ui-notification.tag
View file

@ -22,21 +22,23 @@
</style>
<script>
import anime from 'animejs';
this.on('mount', () => {
Velocity(this.root, {
top: '0px'
}, {
anime({
tagrets: this.root,
top: '0px',
duration: 500,
easing: 'ease-out'
easing: 'easeOutQuad'
})
setTimeout(() => {
Velocity(this.root, {
top: '-64px'
}, {
anime({
targets: this.root,
top: '-64px',
duration: 500,
easing: 'ease-out',
complete: () => this.unmount()
easing: 'easeOutQuad',
complete: this.unmount
});
}, 6000);
});

20
src/web/app/desktop/tags/user-preview.tag
View file

@ -99,6 +99,8 @@
</style>
<script>
import anime from 'animejs';
this.mixin('i');
this.mixin('api');
@ -124,23 +126,23 @@
});
this.open = () => {
Velocity(this.root, {
anime({
targets: this.root,
opacity: 1,
'margin-top': 0
}, {
'margin-top': 0,
duration: 200,
easing: 'ease-out'
easing: 'easeOutQuad'
});
};
this.close = () => {
Velocity(this.root, {
anime({
targets: this.root,
opacity: 0,
'margin-top': '-8px'
}, {
'margin-top': '-8px',
duration: 200,
easing: 'ease-out',
complete: () => this.unmount()
easing: 'easeOutQuad',
complete: this.unmount
});
};
</script>

39
src/web/app/desktop/tags/window.tag
View file

@ -173,6 +173,7 @@
</style>
<script>
import anime from 'animejs';
import contains from '../../common/scripts/contains';
this.minHeight = 40;
@ -222,26 +223,21 @@
if (this.isModal) {
this.refs.bg.style.pointerEvents = 'auto';
Velocity(this.refs.bg, 'finish', true);
Velocity(this.refs.bg, {
opacity: 1
}, {
queue: false,
anime({
targets: this.refs.bg,
opacity: 1,
duration: 100,
easing: 'linear'
});
}
this.refs.main.style.pointerEvents = 'auto';
Velocity(this.refs.main, 'finish', true);
Velocity(this.refs.main, { scale: 1.1 }, 0);
Velocity(this.refs.main, {
anime({
targets: this.refs.main,
opacity: 1,
scale: 1
}, {
queue: false,
scale: [1.1, 1],
duration: 200,
easing: 'ease-out'
easing: 'easeOutQuad'
});
//this.refs.main.focus();
@ -256,25 +252,22 @@
if (this.isModal) {
this.refs.bg.style.pointerEvents = 'none';
Velocity(this.refs.bg, 'finish', true);
Velocity(this.refs.bg, {
opacity: 0
}, {
queue: false,
anime({
targets: this.refs.bg,
opacity: 0,
duration: 300,
easing: 'linear'
});
}
this.refs.main.style.pointerEvents = 'none';
Velocity(this.refs.main, 'finish', true);
Velocity(this.refs.main, {
anime({
targets: this.refs.main,
opacity: 0,
scale: 0.8
}, {
queue: false,
scale: 0.8,
duration: 300,
easing: [ 0.5, -0.5, 1, 0.5 ]
easing: [0.5, -0.5, 1, 0.5]
});
setTimeout(() => {

18
src/web/app/mobile/tags/notify.tag
View file

@ -16,20 +16,22 @@
</style>
<script>
import anime from 'animejs';
this.on('mount', () => {
Velocity(this.root, {
bottom: '0px'
}, {
anime({
targets: this.root,
bottom: '0px',
duration: 500,
easing: 'ease-out'
easing: 'easeOutQuad'
});
setTimeout(() => {
Velocity(this.root, {
bottom: '-64px'
}, {
anime({
targets: this.root,
bottom: '-64px',
duration: 500,
easing: 'ease-out',
easing: 'easeOutQuad',
complete: () => this.unmount()
});
}, 6000);