From d987acb6d9d6121113084ff5a00ae871a1e64187 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8A=B2=E9=B9=8F?= Date: Tue, 28 Apr 2020 11:46:05 +0800 Subject: [PATCH] add Path.app style menu button --- doric-demo/src/PathButtonDemo.ts | 156 +++++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 doric-demo/src/PathButtonDemo.ts diff --git a/doric-demo/src/PathButtonDemo.ts b/doric-demo/src/PathButtonDemo.ts new file mode 100644 index 00000000..7bb33e65 --- /dev/null +++ b/doric-demo/src/PathButtonDemo.ts @@ -0,0 +1,156 @@ +import { Panel, Group, LayoutSpec, layoutConfig, Color, vlayout, gravity, text, Gravity, animate, View, modal, stack } from "doric" +import { colors } from "./utils" + +@Entry +class PathButtonDemo extends Panel { + + collapse: boolean = false + dock?: View + menu1?: View + menu2?: View + menu3?: View + menu4?: View + + build(root: Group) { + let clockWise = async () => { + this.menu1?.let((it) => { + it.scaleX = 0 + it.scaleY = 0 + }) + this.menu2?.let((it) => { + it.scaleX = 0 + it.scaleY = 0 + }) + this.menu3?.let((it) => { + it.scaleX = 0 + it.scaleY = 0 + }) + this.menu4?.let((it) => { + it.scaleX = 0 + it.scaleY = 0 + }) + await animate(context)({ + animations: () => { + this.dock?.let((it) => {it.rotation = 0.5}) + this.menu1?.let((it) => { + it.translationX = -150 + it.scaleX = 1 + it.scaleY = 1 + }) + this.menu2?.let((it) => { + it.translationY = -150 + it.scaleX = 1 + it.scaleY = 1 + }) + this.menu3?.let((it) => { + it.translationX = -150 * Math.cos(1/6 * Math.PI) + it.translationY = -150 * Math.sin(1/6 * Math.PI) + it.scaleX = 1 + it.scaleY = 1 + }) + this.menu4?.let((it) => { + it.translationX = -150 * Math.cos(1/3 * Math.PI) + it.translationY = -150 * Math.sin(1/3 * Math.PI) + it.scaleX = 1 + it.scaleY = 1 + }) + }, + duration: 300, + }) + } + + let antiClockWise = async () => { + await animate(context)({ + animations: () => { + this.dock?.let((it) => {it.rotation = 0}) + this.menu1?.let((it) => { + it.translationX = 0 + it.scaleX = 0 + it.scaleY = 0 + }) + this.menu2?.let((it) => { + it.translationY = 0 + it.scaleX = 0 + it.scaleY = 0 + }) + this.menu3?.let((it) => { + it.translationX = 0 + it.translationY = 0 + it.scaleX = 0 + it.scaleY = 0 + }) + this.menu4?.let((it) => { + it.translationX = 0 + it.translationY = 0 + it.scaleX = 0 + it.scaleY = 0 + }) + }, + duration: 300, + }) + } + + stack([ + this.menu1 = stack([], { + width: 50, + height: 50, + layoutConfig: layoutConfig().just(), + corners: 25, + backgroundColor: Color.RED, + x: Environment.screenWidth - 100, + y: Environment.screenHeight - 140, + }), + this.menu2 = stack([], { + width: 50, + height: 50, + layoutConfig: layoutConfig().just(), + corners: 25, + backgroundColor: Color.RED, + x: Environment.screenWidth - 100, + y: Environment.screenHeight - 140, + }), + this.menu3 = stack([], { + width: 50, + height: 50, + layoutConfig: layoutConfig().just(), + corners: 25, + backgroundColor: Color.RED, + x: Environment.screenWidth - 100, + y: Environment.screenHeight - 140, + }), + this.menu4 = stack([], { + width: 50, + height: 50, + layoutConfig: layoutConfig().just(), + corners: 25, + backgroundColor: Color.RED, + x: Environment.screenWidth - 100, + y: Environment.screenHeight - 140, + }), + this.dock = text({ + text: '+', + textColor: Color.WHITE, + textSize: 40, + textAlignment: Gravity.Center, + layoutConfig: layoutConfig().just(), + backgroundColor: Color.RED, + corners: 25, + x: Environment.screenWidth - 100, + y: Environment.screenHeight - 140, + width: 50, + height: 50, + onClick: () => { + this.collapse = !this.collapse + if (this.collapse) { + clockWise() + } else { + antiClockWise() + } + } + }), + ], { + backgroundColor: colors[0], + layoutConfig: layoutConfig().most(), + }).in(root) + } +} \ No newline at end of file