diff --git a/demo/src/AnimatorDemo.ts b/demo/src/AnimatorDemo.ts index 9a7c7572..fe44d5b2 100644 --- a/demo/src/AnimatorDemo.ts +++ b/demo/src/AnimatorDemo.ts @@ -1,4 +1,4 @@ -import { Group, Panel, popover, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network, animator, View, stack } from "doric"; +import { animate, Group, Panel, gravity, Color, LayoutSpec, vlayout, scroller, layoutConfig, IVLayout, modal, IText, network, View, stack } from "doric"; import { title, label, colors, box } from "./utils"; @Entry @@ -16,14 +16,15 @@ class AnimatorDemo extends Panel { layoutConfig: layoutConfig().exactly(), } as IText).also(v => { v.onClick = () => { - animator(this)({ + animate(this)({ animations: () => { view.width = view.height = 20 }, duration: 3000, - complete: () => { - modal(context).toast('Fininshed') - }, + }).then(() => { + modal(context).toast('Fininshed') + }, (e: any) => { + modal(context).toast(`${e}`) }) } }), @@ -36,14 +37,15 @@ class AnimatorDemo extends Panel { layoutConfig: layoutConfig().exactly(), } as IText).also(v => { v.onClick = () => { - animator(this)({ + animate(this)({ animations: () => { view.width = 300 }, duration: 3000, - complete: () => { - modal(context).toast('Fininshed') - }, + }).then(() => { + modal(context).toast('Fininshed') + }, (e: any) => { + modal(context).toast(`${e}`) }) } }), @@ -56,14 +58,15 @@ class AnimatorDemo extends Panel { layoutConfig: layoutConfig().exactly(), } as IText).also(v => { v.onClick = () => { - animator(this)({ + animate(this)({ animations: () => { - view.height = 500 + view.height = 300 }, duration: 3000, - complete: () => { - modal(context).toast('Fininshed') - } + }).then(() => { + modal(context).toast('Fininshed') + }, (e: any) => { + modal(context).toast(`${e}`) }) } }), diff --git a/iOS/Pod/Classes/DoricRegistry.m b/iOS/Pod/Classes/DoricRegistry.m index 86f1f800..4ffefa29 100644 --- a/iOS/Pod/Classes/DoricRegistry.m +++ b/iOS/Pod/Classes/DoricRegistry.m @@ -41,6 +41,7 @@ #import "DoricFlowLayoutItemNode.h" #import "DoricFlowLayoutNode.h" #import "DoricPopoverPlugin.h" +#import "DoricAnimatePlugin.h" @interface DoricRegistry () @@ -70,6 +71,7 @@ - (void)innerRegister { [self registerNativePlugin:DoricNavigatorPlugin.class withName:@"navigator"]; [self registerNativePlugin:DoricNavBarPlugin.class withName:@"navbar"]; [self registerNativePlugin:DoricPopoverPlugin.class withName:@"popover"]; + [self registerNativePlugin:DoricAnimatePlugin.class withName:@"animate"]; [self registerViewNode:DoricStackNode.class withName:@"Stack"]; [self registerViewNode:DoricVLayoutNode.class withName:@"VLayout"]; diff --git a/iOS/Pod/Classes/Plugin/DoricAnimatePlugin.h b/iOS/Pod/Classes/Plugin/DoricAnimatePlugin.h new file mode 100644 index 00000000..484284a9 --- /dev/null +++ b/iOS/Pod/Classes/Plugin/DoricAnimatePlugin.h @@ -0,0 +1,10 @@ +// +// Created by pengfei.zhou on 2019/11/29. +// + +#import + +#import "DoricNativePlugin.h" + +@interface DoricAnimatePlugin : DoricNativePlugin +@end \ No newline at end of file diff --git a/iOS/Pod/Classes/Plugin/DoricAnimatePlugin.m b/iOS/Pod/Classes/Plugin/DoricAnimatePlugin.m new file mode 100644 index 00000000..317e38a7 --- /dev/null +++ b/iOS/Pod/Classes/Plugin/DoricAnimatePlugin.m @@ -0,0 +1,33 @@ +// +// Created by pengfei.zhou on 2019/11/29. +// + +#import "DoricAnimatePlugin.h" +#import "DoricRootNode.h" + +@implementation DoricAnimatePlugin + +- (void)submit:(NSDictionary *)args withPromise:(DoricPromise *)promise { + [promise resolve:nil]; +} + +- (void)animateRender:(NSDictionary *)args withPromise:(DoricPromise *)promise { + NSNumber *duration = args[@"duration"]; + dispatch_async(dispatch_get_main_queue(), ^{ + NSString *viewId = args[@"id"]; + [UIView animateWithDuration:[duration floatValue] / 1000 + animations:^{ + if (self.doricContext.rootNode.viewId == nil) { + self.doricContext.rootNode.viewId = viewId; + [self.doricContext.rootNode blend:args[@"props"]]; + } else { + DoricViewNode *viewNode = [self.doricContext targetViewNode:viewId]; + [viewNode blend:args[@"props"]]; + } + } + completion:^(BOOL finished) { + [promise resolve:nil]; + }]; + }); +} +@end \ No newline at end of file diff --git a/iOS/Pod/Classes/Plugin/DoricShaderPlugin.m b/iOS/Pod/Classes/Plugin/DoricShaderPlugin.m index d7dbd985..62fe12f2 100644 --- a/iOS/Pod/Classes/Plugin/DoricShaderPlugin.m +++ b/iOS/Pod/Classes/Plugin/DoricShaderPlugin.m @@ -140,27 +140,4 @@ - (id)findClass:(Class)clz target:(id)target method:(NSString *)name promise:(Do return ret; } -- (void)animator:(NSDictionary *)args withPromise:(DoricPromise *)promise { - [promise resolve:nil]; -} - -- (void)animateRender:(NSDictionary *)args withPromise:(DoricPromise *)promise { - NSNumber *duration = args[@"duration"]; - dispatch_async(dispatch_get_main_queue(), ^{ - NSString *viewId = args[@"id"]; - [UIView animateWithDuration:[duration floatValue] / 1000 - animations:^{ - if (self.doricContext.rootNode.viewId == nil) { - self.doricContext.rootNode.viewId = viewId; - [self.doricContext.rootNode blend:args[@"props"]]; - } else { - DoricViewNode *viewNode = [self.doricContext targetViewNode:viewId]; - [viewNode blend:args[@"props"]]; - } - } - completion:^(BOOL finished) { - [promise resolve:nil]; - }]; - }); -} @end diff --git a/js-framework/src/native/animate.ts b/js-framework/src/native/animate.ts new file mode 100644 index 00000000..0db48e91 --- /dev/null +++ b/js-framework/src/native/animate.ts @@ -0,0 +1,48 @@ +/* + * 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. + */ +import { Panel } from "../ui/panel" +import { takeLet } from "../pattern/candies" + +export function animate(panel: Panel) { + return (args: { + animations: () => void, + duration: number, + }) => { + return takeLet(panel.context.animate)(it => { + return it.submit().then(() => { + args.animations() + return takeLet(panel.getRootView())(root => { + if (root.isDirty()) { + const model = root.toModel(); + (model as any).duration = args.duration + const ret = it.animateRender(model) + root.clean() + return ret + } + for (let v of panel.allHeadViews()) { + if (v.isDirty()) { + const model = v.toModel() + const ret = it.animateRender(model) + it.clean() + return ret + } + } + throw new Error('Cannot find any animated elements') + }) + }) + }) as Promise + } +} \ No newline at end of file diff --git a/js-framework/src/native/index.native.ts b/js-framework/src/native/index.native.ts index be12d2eb..777af1e3 100644 --- a/js-framework/src/native/index.native.ts +++ b/js-framework/src/native/index.native.ts @@ -19,3 +19,4 @@ export * from './navigator' export * from './network' export * from './storage' export * from './popover' +export * from './animate' diff --git a/js-framework/src/ui/animation.ts b/js-framework/src/ui/animation.ts index 40ffb071..1a5d753a 100644 --- a/js-framework/src/ui/animation.ts +++ b/js-framework/src/ui/animation.ts @@ -1,8 +1,3 @@ -import { Panel } from "./panel" -import { takeLet } from "../pattern/candies" -import { O_TRUNC } from "constants" -import { modal } from "../native/modal" - /* * Copyright [2019] [Doric.Pub] * @@ -157,38 +152,3 @@ export class AnimationSet { }) } } - -export function animator(panel: Panel) { - return (args: { - animations: () => void, - duration: number, - complete?: () => void - }) => { - takeLet(panel.context.shader)(it => { - it.animator().then(() => { - args.animations() - return takeLet(panel.getRootView())(root => { - if (root.isDirty()) { - const model = root.toModel(); - (model as any).duration = args.duration - const ret = it.animateRender(model) - root.clean() - return ret - } - for (let v of panel.allHeadViews()) { - if (v.isDirty()) { - const model = v.toModel() - const ret = it.animateRender(model) - it.clean() - return ret - } - } - }) - }).then(() => { - if (args.complete) { - args.complete() - } - }) - }) - } -} \ No newline at end of file