From a0a11fcb8203ec2986dddcbb234a84b8d6131229 Mon Sep 17 00:00:00 2001 From: "pengfei.zhou" Date: Fri, 29 Nov 2019 00:36:20 +0800 Subject: [PATCH] feat:add animation --- js-framework/src/ui/animation.ts | 154 +++++++++++++++++++++++++++++++ js-framework/src/ui/index.ui.ts | 3 +- 2 files changed, 156 insertions(+), 1 deletion(-) create mode 100644 js-framework/src/ui/animation.ts diff --git a/js-framework/src/ui/animation.ts b/js-framework/src/ui/animation.ts new file mode 100644 index 00000000..2bdce10b --- /dev/null +++ b/js-framework/src/ui/animation.ts @@ -0,0 +1,154 @@ +/* + * Copyright [2019] [Doric.Pub] + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export enum RepeatMode { + RESTART, + REVERSE, +} + +export class Animation { + duration = 100 + startDelay = 0 + repeatCount = 1 + repeatMode = RepeatMode.RESTART +} + +export class AnimationSetBuilder { + currentNode: Node + group: AnimationSet + + constructor(group: AnimationSet, anim: Animation) { + this.currentNode = group.getNodeForAnimation(anim) + this.group = group + } + + with(animation: Animation) { + const node = this.group.getNodeForAnimation(animation) + this.currentNode.addSibling(node) + return this + } + + after(animation: Animation) { + const node = this.group.getNodeForAnimation(animation) + this.currentNode.addParent(node) + return this + } + + before(animation: Animation) { + const node = this.group.getNodeForAnimation(animation) + this.currentNode.addChild(node) + return this + } +} +class Node { + children: Set = new Set + siblings: Set = new Set + parents: Set = new Set + animation: Animation + built = false + + constructor(anim: Animation) { + this.animation = anim + } + + addParent(node: Node) { + if (!this.parents.has(node)) { + this.parents.add(node); + node.addChild(this); + } + } + + addSibling(node: Node) { + if (!this.siblings.has(node)) { + this.siblings.add(node); + node.addSibling(this); + } + } + + addChild(node: Node) { + if (!this.children.has(node)) { + this.children.add(node) + node.addParent(this) + } + } +} +export class AnimationSet { + nodeMap: Map = new Map + nodes: Node[] = [] + + getNodeForAnimation(anim: Animation) { + let node = this.nodeMap.get(anim) + if (node === undefined) { + node = new Node(anim) + this.nodeMap.set(anim, node) + this.nodes.push(node) + } + return node; + } + play(animation: Animation) { + return new AnimationSetBuilder(this, animation) + } + + playTogether(animations: Animation[]) { + if (animations.length == 1) { + this.play(animations[0]); + } else { + for (let i = 0; i < animations.length - 1; i++) { + this.play(animations[i]).with(animations[i + 1]) + } + } + } + + playSequentially(animations: Animation[]) { + if (animations.length == 1) { + this.play(animations[0]); + } else { + for (let i = 0; i < animations.length - 1; i++) { + this.play(animations[i]).before(animations[i + 1]) + } + } + } + findSiblings(node: Node, siblings: Set) { + if (!siblings.has(node)) { + siblings.add(node) + node.siblings.forEach(e => { + this.findSiblings(e, siblings) + }) + } + } + createDependencyGraph() { + this.nodes.forEach(node => { + if (node.built) { + return + } + this.findSiblings(node, node.siblings) + node.siblings.delete(node) + node.siblings.forEach(e => { + e.parents.forEach(p => { + node.addParent(p) + }) + }) + node.built = true + + node.siblings.forEach(s => { + node.parents.forEach(p => { + s.addParent(p) + }) + s.built = true + }) + }) + } +} \ No newline at end of file diff --git a/js-framework/src/ui/index.ui.ts b/js-framework/src/ui/index.ui.ts index 8d13b760..5a56545f 100644 --- a/js-framework/src/ui/index.ui.ts +++ b/js-framework/src/ui/index.ui.ts @@ -14,4 +14,5 @@ * limitations under the License. */ export * from './view' -export * from './panel' \ No newline at end of file +export * from './panel' +export * from './animation' \ No newline at end of file