Michcio/lost-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #1916 from acid-chicken/acid-chicken-patch-1

Browse source 
Proposal: Smooth Clock
This commit is contained in:
syuilo 2018-07-17 18:45:21 +09:00 committed by GitHub
commit f65fbf9d55
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/client/app/common/views/components/analog-clock.vue
View file

@ -45,7 +45,7 @@ export default Vue.extend({
data() { data() {
return { return {
now: new Date(), now: new Date(),
clock: null, enabled: true,
graduationsPadding: 0.5, graduationsPadding: 0.5,
handsPadding: 1, handsPadding: 1,
@ -74,6 +74,9 @@ export default Vue.extend({
return themeColor; return themeColor;
}, },
ms(): number {
return this.now.getMilliseconds();
}
s(): number { s(): number {
return this.now.getSeconds(); return this.now.getSeconds();
}, },
@ -85,13 +88,13 @@ export default Vue.extend({
}, },
hAngle(): number { hAngle(): number {
return Math.PI * (this.h % 12 + this.m / 60) / 6; return Math.PI * (this.h % 12 + (this.m + (this.s + this.ms / 1000) / 60) / 60) / 6;
}, },
mAngle(): number { mAngle(): number {
return Math.PI * (this.m + this.s / 60) / 30; return Math.PI * (this.m + (this.s + this.ms / 1000) / 60) / 30;
}, },
sAngle(): number { sAngle(): number {
return Math.PI * this.s / 30; return Math.PI * (this.s + this.ms / 1000) / 30;
}, },
graduations(): any { graduations(): any {
@ -106,11 +109,17 @@ export default Vue.extend({
}, },
mounted() { mounted() {
this.clock = setInterval(this.tick, 1000); const update = () => {
if (this.enabled) {
this.tick();
requestAnimationFrame(update);
}
});
update();
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.clock); enabled = false;
}, },
methods: { methods: {