natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#299 Use Anime instead of Velocity

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

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

@ -3,7 +3,6 @@
*/ */
import * as riot from 'riot'; import * as riot from 'riot';
require('velocity-animate');
import api from './common/scripts/api'; import api from './common/scripts/api';
import signout from './common/scripts/signout'; import signout from './common/scripts/signout';
import checkForUpdate from './common/scripts/check-for-update'; 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> <mk-reaction-picker>
<div class="backdrop" onclick={ unmount }></div> <div class="backdrop" ref="backdrop" onclick={ close }></div>
<div class="popover" ref="popover"> <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, '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> <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 1px solid rgba(27, 31, 35, 0.15)
border-radius 4px border-radius 4px
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15) box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
transform scale(0.5)
opacity 0
> button > button
width 40px width 40px
@ -46,6 +48,8 @@
</style> </style>
<script> <script>
import anime from 'animejs';
this.mixin('api'); this.mixin('api');
this.post = this.opts.post; this.post = this.opts.post;
@ -60,6 +64,13 @@
const height = this.refs.popover.offsetHeight; const height = this.refs.popover.offsetHeight;
this.refs.popover.style.left = (x - (width / 2)) + 'px'; this.refs.popover.style.left = (x - (width / 2)) + 'px';
this.refs.popover.style.top = (y - (height / 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 => { this.react = reaction => {
@ -71,5 +82,25 @@
this.unmount(); 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> </script>
</mk-reaction-picker> </mk-reaction-picker>

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

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

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

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

41
src/web/app/desktop/tags/dialog.tag
View File

@ -36,6 +36,7 @@
padding 32px 42px padding 32px 42px
width 480px width 480px
background #fff background #fff
opacity 0
> header > header
margin 1em 0 margin 1em 0
@ -79,6 +80,8 @@
</style> </style>
<script> <script>
import anime from 'animejs';
this.canThrough = opts.canThrough != null ? opts.canThrough : true; this.canThrough = opts.canThrough != null ? opts.canThrough : true;
this.opts.buttons.forEach(button => { this.opts.buttons.forEach(button => {
button._onclick = () => { button._onclick = () => {
@ -92,25 +95,17 @@
this.refs.body.innerHTML = this.opts.text; this.refs.body.innerHTML = this.opts.text;
this.refs.bg.style.pointerEvents = 'auto'; this.refs.bg.style.pointerEvents = 'auto';
Velocity(this.refs.bg, 'finish', true); anime({
Velocity(this.refs.bg, { targets: this.refs.bg,
opacity: 1 opacity: 1,
}, {
queue: false,
duration: 100, duration: 100,
easing: 'linear' easing: 'linear'
}); });
Velocity(this.refs.main, { anime({
opacity: 0, targets: this.refs.main,
scale: 1.2
}, {
duration: 0
});
Velocity(this.refs.main, {
opacity: 1, opacity: 1,
scale: 1 scale: [1.2, 1],
}, {
duration: 300, duration: 300,
easing: [ 0, 0.5, 0.5, 1 ] easing: [ 0, 0.5, 0.5, 1 ]
}); });
@ -118,25 +113,21 @@
this.close = () => { this.close = () => {
this.refs.bg.style.pointerEvents = 'none'; this.refs.bg.style.pointerEvents = 'none';
Velocity(this.refs.bg, 'finish', true); anime({
Velocity(this.refs.bg, { targets: this.refs.bg,
opacity: 0 opacity: 0,
}, {
queue: false,
duration: 300, duration: 300,
easing: 'linear' easing: 'linear'
}); });
this.refs.main.style.pointerEvents = 'none'; this.refs.main.style.pointerEvents = 'none';
Velocity(this.refs.main, 'finish', true); anime({
Velocity(this.refs.main, { targets: this.refs.main,
opacity: 0, opacity: 0,
scale: 0.8 scale: 0.8,
}, {
queue: false,
duration: 300, duration: 300,
easing: [ 0.5, -0.5, 1, 0.5 ], 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> </style>
<script> <script>
import anime from 'animejs';
this.tips = [ this.tips = [
'<kbd>t</kbd>でタイムラインにフォーカスできます', '<kbd>t</kbd>でタイムラインにフォーカスできます',
'<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます', '<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます',
@ -55,20 +57,22 @@
}; };
this.change = () => { this.change = () => {
Velocity(this.refs.tip, { anime({
opacity: 0 targets: this.refs.tip,
}, { opacity: 0,
duration: 500, duration: 500,
easing: 'linear', easing: 'linear',
complete: this.set complete: this.set
}); });
Velocity(this.refs.tip, { setTimeout(() => {
opacity: 1 anime({
}, { targets: this.refs.tip,
duration: 500, opacity: 1,
easing: 'linear' duration: 500,
}); easing: 'linear'
});
}, 500);
}; };
</script> </script>
</mk-tips-home-widget> </mk-tips-home-widget>

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

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

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

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

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

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

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

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

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

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