feat:when cancel Animation,sync the properties from native

This commit is contained in:
pengfei.zhou 2021-04-22 14:54:25 +08:00 committed by osborn
parent 819feb1617
commit cdd25caa7d
12 changed files with 377 additions and 324 deletions

View File

@ -956,7 +956,11 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
if (animator != null) {
animator.cancel();
}
promise.resolve();
JSONBuilder jsonBuilder = new JSONBuilder();
for (String key : animatedKeys) {
jsonBuilder.put(key, getAnimatedValue(key));
}
promise.resolve(jsonBuilder.toValue());
}
private Animator parseAnimator(JSValue value) {

View File

@ -579,7 +579,14 @@ - (void)cancelAnimation:(NSString *)animationId withPromise:(DoricPromise *)prom
((AnimationCallback *) caAnimation.delegate).cancelBlock();
}
[self.view.layer removeAnimationForKey:animationId];
[promise resolve:nil];
CGAffineTransform affineTransform = self.view.layer.presentationLayer.affineTransform;
self.translationX = @(affineTransform.tx);
self.translationY = @(affineTransform.ty);
CGFloat angle = atan2f((float) affineTransform.b, (float) affineTransform.a);
self.rotation = @(angle / M_PI);
self.scaleX = @(affineTransform.a);
self.scaleY = @(affineTransform.d);
[promise resolve:self.transformation];
}
- (CFTimeInterval)computeDurationOfAnimations:(NSArray<CAAnimation *> *)animations {

View File

@ -410,7 +410,13 @@ var View = /** @class */ (function () {
});
};
View.prototype.cancelAnimation = function (context, animation) {
return this.nativeChannel(context, "cancelAnimation")(animation.id);
var _this = this;
return this.nativeChannel(context, "cancelAnimation")(animation.id).then(function (args) {
for (var key in args) {
Reflect.set(_this, key, Reflect.get(args, key, args), _this);
Reflect.deleteProperty(_this.__dirty_props__, key);
}
});
};
__decorate$d([
Property,

View File

@ -116,6 +116,110 @@ function logw(...message) {
nativeLog('w', out);
}
const SPECIFIED = 1;
const START = 1 << 1;
const END = 1 << 2;
const SHIFT_X = 0;
const SHIFT_Y = 4;
const LEFT = (START | SPECIFIED) << SHIFT_X;
const RIGHT = (END | SPECIFIED) << SHIFT_X;
const TOP = (START | SPECIFIED) << SHIFT_Y;
const BOTTOM = (END | SPECIFIED) << SHIFT_Y;
const CENTER_X = SPECIFIED << SHIFT_X;
const CENTER_Y = SPECIFIED << SHIFT_Y;
const CENTER = CENTER_X | CENTER_Y;
class Gravity {
constructor() {
this.val = 0;
}
left() {
const val = this.val | LEFT;
const ret = new Gravity;
ret.val = val;
return ret;
}
right() {
const val = this.val | RIGHT;
const ret = new Gravity;
ret.val = val;
return ret;
}
top() {
const val = this.val | TOP;
const ret = new Gravity;
ret.val = val;
return ret;
}
bottom() {
const val = this.val | BOTTOM;
const ret = new Gravity;
ret.val = val;
return ret;
}
center() {
const val = this.val | CENTER;
const ret = new Gravity;
ret.val = val;
return ret;
}
centerX() {
const val = this.val | CENTER_X;
const ret = new Gravity;
ret.val = val;
return ret;
}
centerY() {
const val = this.val | CENTER_Y;
const ret = new Gravity;
ret.val = val;
return ret;
}
toModel() {
return this.val;
}
}
Gravity.origin = new Gravity;
Gravity.Center = Gravity.origin.center();
Gravity.CenterX = Gravity.origin.centerX();
Gravity.CenterY = Gravity.origin.centerY();
Gravity.Left = Gravity.origin.left();
Gravity.Right = Gravity.origin.right();
Gravity.Top = Gravity.origin.top();
Gravity.Bottom = Gravity.origin.bottom();
function gravity() {
return new Gravity;
}
function modal(context) {
return {
toast: (msg, gravity = Gravity.Bottom) => {
context.callNative('modal', 'toast', {
msg,
gravity: gravity.toModel(),
});
},
alert: (arg) => {
if (typeof arg === 'string') {
return context.callNative('modal', 'alert', { msg: arg });
}
else {
return context.callNative('modal', 'alert', arg);
}
},
confirm: (arg) => {
if (typeof arg === 'string') {
return context.callNative('modal', 'confirm', { msg: arg });
}
else {
return context.callNative('modal', 'confirm', arg);
}
},
prompt: (arg) => {
return context.callNative('modal', 'prompt', arg);
},
};
}
var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@ -324,7 +428,13 @@ class View {
});
}
cancelAnimation(context, animation) {
return this.nativeChannel(context, "cancelAnimation")(animation.id);
return this.nativeChannel(context, "cancelAnimation")(animation.id).then((args) => {
for (let key in args) {
Reflect.set(this, key, Reflect.get(args, key, args), this);
//Reflect.deleteProperty(this.__dirty_props__, key)
}
modal(context).alert(JSON.stringify(this.__dirty_props__));
});
}
}
__decorate$d([
@ -507,80 +617,6 @@ class Group extends Superview {
}
}
const SPECIFIED = 1;
const START = 1 << 1;
const END = 1 << 2;
const SHIFT_X = 0;
const SHIFT_Y = 4;
const LEFT = (START | SPECIFIED) << SHIFT_X;
const RIGHT = (END | SPECIFIED) << SHIFT_X;
const TOP = (START | SPECIFIED) << SHIFT_Y;
const BOTTOM = (END | SPECIFIED) << SHIFT_Y;
const CENTER_X = SPECIFIED << SHIFT_X;
const CENTER_Y = SPECIFIED << SHIFT_Y;
const CENTER = CENTER_X | CENTER_Y;
class Gravity {
constructor() {
this.val = 0;
}
left() {
const val = this.val | LEFT;
const ret = new Gravity;
ret.val = val;
return ret;
}
right() {
const val = this.val | RIGHT;
const ret = new Gravity;
ret.val = val;
return ret;
}
top() {
const val = this.val | TOP;
const ret = new Gravity;
ret.val = val;
return ret;
}
bottom() {
const val = this.val | BOTTOM;
const ret = new Gravity;
ret.val = val;
return ret;
}
center() {
const val = this.val | CENTER;
const ret = new Gravity;
ret.val = val;
return ret;
}
centerX() {
const val = this.val | CENTER_X;
const ret = new Gravity;
ret.val = val;
return ret;
}
centerY() {
const val = this.val | CENTER_Y;
const ret = new Gravity;
ret.val = val;
return ret;
}
toModel() {
return this.val;
}
}
Gravity.origin = new Gravity;
Gravity.Center = Gravity.origin.center();
Gravity.CenterX = Gravity.origin.centerX();
Gravity.CenterY = Gravity.origin.centerY();
Gravity.Left = Gravity.origin.left();
Gravity.Right = Gravity.origin.right();
Gravity.Top = Gravity.origin.top();
Gravity.Bottom = Gravity.origin.bottom();
function gravity() {
return new Gravity;
}
exports.LayoutSpec = void 0;
(function (LayoutSpec) {
/**
@ -2241,36 +2277,6 @@ function switchView(config) {
return ret;
}
function modal(context) {
return {
toast: (msg, gravity = Gravity.Bottom) => {
context.callNative('modal', 'toast', {
msg,
gravity: gravity.toModel(),
});
},
alert: (arg) => {
if (typeof arg === 'string') {
return context.callNative('modal', 'alert', { msg: arg });
}
else {
return context.callNative('modal', 'alert', arg);
}
},
confirm: (arg) => {
if (typeof arg === 'string') {
return context.callNative('modal', 'confirm', { msg: arg });
}
else {
return context.callNative('modal', 'confirm', arg);
}
},
prompt: (arg) => {
return context.callNative('modal', 'prompt', arg);
},
};
}
function navbar(context) {
const entity = context.entity;
let panel = undefined;

View File

@ -1637,6 +1637,110 @@ class Mutable {
}
}
const SPECIFIED = 1;
const START = 1 << 1;
const END = 1 << 2;
const SHIFT_X = 0;
const SHIFT_Y = 4;
const LEFT = (START | SPECIFIED) << SHIFT_X;
const RIGHT = (END | SPECIFIED) << SHIFT_X;
const TOP = (START | SPECIFIED) << SHIFT_Y;
const BOTTOM = (END | SPECIFIED) << SHIFT_Y;
const CENTER_X = SPECIFIED << SHIFT_X;
const CENTER_Y = SPECIFIED << SHIFT_Y;
const CENTER = CENTER_X | CENTER_Y;
class Gravity {
constructor() {
this.val = 0;
}
left() {
const val = this.val | LEFT;
const ret = new Gravity;
ret.val = val;
return ret;
}
right() {
const val = this.val | RIGHT;
const ret = new Gravity;
ret.val = val;
return ret;
}
top() {
const val = this.val | TOP;
const ret = new Gravity;
ret.val = val;
return ret;
}
bottom() {
const val = this.val | BOTTOM;
const ret = new Gravity;
ret.val = val;
return ret;
}
center() {
const val = this.val | CENTER;
const ret = new Gravity;
ret.val = val;
return ret;
}
centerX() {
const val = this.val | CENTER_X;
const ret = new Gravity;
ret.val = val;
return ret;
}
centerY() {
const val = this.val | CENTER_Y;
const ret = new Gravity;
ret.val = val;
return ret;
}
toModel() {
return this.val;
}
}
Gravity.origin = new Gravity;
Gravity.Center = Gravity.origin.center();
Gravity.CenterX = Gravity.origin.centerX();
Gravity.CenterY = Gravity.origin.centerY();
Gravity.Left = Gravity.origin.left();
Gravity.Right = Gravity.origin.right();
Gravity.Top = Gravity.origin.top();
Gravity.Bottom = Gravity.origin.bottom();
function gravity() {
return new Gravity;
}
function modal(context) {
return {
toast: (msg, gravity = Gravity.Bottom) => {
context.callNative('modal', 'toast', {
msg,
gravity: gravity.toModel(),
});
},
alert: (arg) => {
if (typeof arg === 'string') {
return context.callNative('modal', 'alert', { msg: arg });
}
else {
return context.callNative('modal', 'alert', arg);
}
},
confirm: (arg) => {
if (typeof arg === 'string') {
return context.callNative('modal', 'confirm', { msg: arg });
}
else {
return context.callNative('modal', 'confirm', arg);
}
},
prompt: (arg) => {
return context.callNative('modal', 'prompt', arg);
},
};
}
var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@ -1845,7 +1949,13 @@ class View {
});
}
cancelAnimation(context, animation) {
return this.nativeChannel(context, "cancelAnimation")(animation.id);
return this.nativeChannel(context, "cancelAnimation")(animation.id).then((args) => {
for (let key in args) {
Reflect.set(this, key, Reflect.get(args, key, args), this);
//Reflect.deleteProperty(this.__dirty_props__, key)
}
modal(context).alert(JSON.stringify(this.__dirty_props__));
});
}
}
__decorate$d([
@ -2028,80 +2138,6 @@ class Group extends Superview {
}
}
const SPECIFIED = 1;
const START = 1 << 1;
const END = 1 << 2;
const SHIFT_X = 0;
const SHIFT_Y = 4;
const LEFT = (START | SPECIFIED) << SHIFT_X;
const RIGHT = (END | SPECIFIED) << SHIFT_X;
const TOP = (START | SPECIFIED) << SHIFT_Y;
const BOTTOM = (END | SPECIFIED) << SHIFT_Y;
const CENTER_X = SPECIFIED << SHIFT_X;
const CENTER_Y = SPECIFIED << SHIFT_Y;
const CENTER = CENTER_X | CENTER_Y;
class Gravity {
constructor() {
this.val = 0;
}
left() {
const val = this.val | LEFT;
const ret = new Gravity;
ret.val = val;
return ret;
}
right() {
const val = this.val | RIGHT;
const ret = new Gravity;
ret.val = val;
return ret;
}
top() {
const val = this.val | TOP;
const ret = new Gravity;
ret.val = val;
return ret;
}
bottom() {
const val = this.val | BOTTOM;
const ret = new Gravity;
ret.val = val;
return ret;
}
center() {
const val = this.val | CENTER;
const ret = new Gravity;
ret.val = val;
return ret;
}
centerX() {
const val = this.val | CENTER_X;
const ret = new Gravity;
ret.val = val;
return ret;
}
centerY() {
const val = this.val | CENTER_Y;
const ret = new Gravity;
ret.val = val;
return ret;
}
toModel() {
return this.val;
}
}
Gravity.origin = new Gravity;
Gravity.Center = Gravity.origin.center();
Gravity.CenterX = Gravity.origin.centerX();
Gravity.CenterY = Gravity.origin.centerY();
Gravity.Left = Gravity.origin.left();
Gravity.Right = Gravity.origin.right();
Gravity.Top = Gravity.origin.top();
Gravity.Bottom = Gravity.origin.bottom();
function gravity() {
return new Gravity;
}
exports.LayoutSpec = void 0;
(function (LayoutSpec) {
/**
@ -3762,36 +3798,6 @@ function switchView(config) {
return ret;
}
function modal(context) {
return {
toast: (msg, gravity = Gravity.Bottom) => {
context.callNative('modal', 'toast', {
msg,
gravity: gravity.toModel(),
});
},
alert: (arg) => {
if (typeof arg === 'string') {
return context.callNative('modal', 'alert', { msg: arg });
}
else {
return context.callNative('modal', 'alert', arg);
}
},
confirm: (arg) => {
if (typeof arg === 'string') {
return context.callNative('modal', 'confirm', { msg: arg });
}
else {
return context.callNative('modal', 'confirm', arg);
}
},
prompt: (arg) => {
return context.callNative('modal', 'prompt', arg);
},
};
}
function navbar(context) {
const entity = context.entity;
let panel = undefined;

2
doric-js/index.d.ts vendored
View File

@ -299,7 +299,7 @@ declare module 'doric/lib/src/ui/view' {
flexConfig?: FlexConfig;
doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
clearAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
cancelAnimation(context: BridgeContext, animation: IAnimation): Promise<any>;
cancelAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
}
export abstract class Superview extends View {
subviewById(id: string): View | undefined;

View File

@ -131,7 +131,7 @@ export declare abstract class View implements Modeling {
flexConfig?: FlexConfig;
doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
clearAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
cancelAnimation(context: BridgeContext, animation: IAnimation): Promise<any>;
cancelAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
}
export declare abstract class Superview extends View {
subviewById(id: string): View | undefined;

View File

@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
import { obj2Model } from "../util/types";
import { uniqueId } from "../util/uniqueId";
import { loge } from "../util/log";
import { modal } from "../native/modal";
const PROP_CONSIST = 1;
const PROP_INCONSIST = 2;
export function Property(target, propKey) {
@ -209,7 +210,13 @@ export class View {
});
}
cancelAnimation(context, animation) {
return this.nativeChannel(context, "cancelAnimation")(animation.id);
return this.nativeChannel(context, "cancelAnimation")(animation.id).then((args) => {
for (let key in args) {
Reflect.set(this, key, Reflect.get(args, key, args), this);
//Reflect.deleteProperty(this.__dirty_props__, key)
}
modal(context).alert(JSON.stringify(this.__dirty_props__));
});
}
}
__decorate([

View File

@ -354,7 +354,12 @@ export abstract class View implements Modeling {
}
cancelAnimation(context: BridgeContext, animation: IAnimation) {
return this.nativeChannel(context, "cancelAnimation")(animation.id)
return this.nativeChannel(context, "cancelAnimation")(animation.id).then((args) => {
for (let key in args) {
Reflect.set(this, key, Reflect.get(args, key, args), this)
Reflect.deleteProperty(this.__dirty_props__, key)
}
})
}
}

View File

@ -21,6 +21,7 @@ import { BridgeContext } from "../runtime/global";
import { LayoutConfig } from '../util/layoutconfig'
import { IAnimation } from "./animation";
import { FlexConfig } from "../util/flexbox";
import { modal } from "../native/modal";
const PROP_CONSIST = 1;
const PROP_INCONSIST = 2;
@ -363,7 +364,12 @@ export abstract class View implements Modeling {
}
cancelAnimation(context: BridgeContext, animation: IAnimation) {
return this.nativeChannel(context, "cancelAnimation")(animation.id)
return this.nativeChannel(context, "cancelAnimation")(animation.id).then((args) => {
for (let key in args) {
Reflect.set(this, key, Reflect.get(args, key, args), this)
Reflect.deleteProperty(this.__dirty_props__, key)
}
})
}
}

View File

@ -1691,6 +1691,110 @@ function logw(...message) {
nativeLog('w', out);
}
const SPECIFIED = 1;
const START = 1 << 1;
const END = 1 << 2;
const SHIFT_X = 0;
const SHIFT_Y = 4;
const LEFT = (START | SPECIFIED) << SHIFT_X;
const RIGHT = (END | SPECIFIED) << SHIFT_X;
const TOP = (START | SPECIFIED) << SHIFT_Y;
const BOTTOM = (END | SPECIFIED) << SHIFT_Y;
const CENTER_X = SPECIFIED << SHIFT_X;
const CENTER_Y = SPECIFIED << SHIFT_Y;
const CENTER = CENTER_X | CENTER_Y;
class Gravity {
constructor() {
this.val = 0;
}
left() {
const val = this.val | LEFT;
const ret = new Gravity;
ret.val = val;
return ret;
}
right() {
const val = this.val | RIGHT;
const ret = new Gravity;
ret.val = val;
return ret;
}
top() {
const val = this.val | TOP;
const ret = new Gravity;
ret.val = val;
return ret;
}
bottom() {
const val = this.val | BOTTOM;
const ret = new Gravity;
ret.val = val;
return ret;
}
center() {
const val = this.val | CENTER;
const ret = new Gravity;
ret.val = val;
return ret;
}
centerX() {
const val = this.val | CENTER_X;
const ret = new Gravity;
ret.val = val;
return ret;
}
centerY() {
const val = this.val | CENTER_Y;
const ret = new Gravity;
ret.val = val;
return ret;
}
toModel() {
return this.val;
}
}
Gravity.origin = new Gravity;
Gravity.Center = Gravity.origin.center();
Gravity.CenterX = Gravity.origin.centerX();
Gravity.CenterY = Gravity.origin.centerY();
Gravity.Left = Gravity.origin.left();
Gravity.Right = Gravity.origin.right();
Gravity.Top = Gravity.origin.top();
Gravity.Bottom = Gravity.origin.bottom();
function gravity() {
return new Gravity;
}
function modal(context) {
return {
toast: (msg, gravity = Gravity.Bottom) => {
context.callNative('modal', 'toast', {
msg,
gravity: gravity.toModel(),
});
},
alert: (arg) => {
if (typeof arg === 'string') {
return context.callNative('modal', 'alert', { msg: arg });
}
else {
return context.callNative('modal', 'alert', arg);
}
},
confirm: (arg) => {
if (typeof arg === 'string') {
return context.callNative('modal', 'confirm', { msg: arg });
}
else {
return context.callNative('modal', 'confirm', arg);
}
},
prompt: (arg) => {
return context.callNative('modal', 'prompt', arg);
},
};
}
var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@ -1899,7 +2003,13 @@ class View {
});
}
cancelAnimation(context, animation) {
return this.nativeChannel(context, "cancelAnimation")(animation.id);
return this.nativeChannel(context, "cancelAnimation")(animation.id).then((args) => {
for (let key in args) {
Reflect.set(this, key, Reflect.get(args, key, args), this);
//Reflect.deleteProperty(this.__dirty_props__, key)
}
modal(context).alert(JSON.stringify(this.__dirty_props__));
});
}
}
__decorate$d([
@ -2082,80 +2192,6 @@ class Group extends Superview {
}
}
const SPECIFIED = 1;
const START = 1 << 1;
const END = 1 << 2;
const SHIFT_X = 0;
const SHIFT_Y = 4;
const LEFT = (START | SPECIFIED) << SHIFT_X;
const RIGHT = (END | SPECIFIED) << SHIFT_X;
const TOP = (START | SPECIFIED) << SHIFT_Y;
const BOTTOM = (END | SPECIFIED) << SHIFT_Y;
const CENTER_X = SPECIFIED << SHIFT_X;
const CENTER_Y = SPECIFIED << SHIFT_Y;
const CENTER = CENTER_X | CENTER_Y;
class Gravity {
constructor() {
this.val = 0;
}
left() {
const val = this.val | LEFT;
const ret = new Gravity;
ret.val = val;
return ret;
}
right() {
const val = this.val | RIGHT;
const ret = new Gravity;
ret.val = val;
return ret;
}
top() {
const val = this.val | TOP;
const ret = new Gravity;
ret.val = val;
return ret;
}
bottom() {
const val = this.val | BOTTOM;
const ret = new Gravity;
ret.val = val;
return ret;
}
center() {
const val = this.val | CENTER;
const ret = new Gravity;
ret.val = val;
return ret;
}
centerX() {
const val = this.val | CENTER_X;
const ret = new Gravity;
ret.val = val;
return ret;
}
centerY() {
const val = this.val | CENTER_Y;
const ret = new Gravity;
ret.val = val;
return ret;
}
toModel() {
return this.val;
}
}
Gravity.origin = new Gravity;
Gravity.Center = Gravity.origin.center();
Gravity.CenterX = Gravity.origin.centerX();
Gravity.CenterY = Gravity.origin.centerY();
Gravity.Left = Gravity.origin.left();
Gravity.Right = Gravity.origin.right();
Gravity.Top = Gravity.origin.top();
Gravity.Bottom = Gravity.origin.bottom();
function gravity() {
return new Gravity;
}
exports.LayoutSpec = void 0;
(function (LayoutSpec) {
/**
@ -3816,36 +3852,6 @@ function switchView(config) {
return ret;
}
function modal(context) {
return {
toast: (msg, gravity = Gravity.Bottom) => {
context.callNative('modal', 'toast', {
msg,
gravity: gravity.toModel(),
});
},
alert: (arg) => {
if (typeof arg === 'string') {
return context.callNative('modal', 'alert', { msg: arg });
}
else {
return context.callNative('modal', 'alert', arg);
}
},
confirm: (arg) => {
if (typeof arg === 'string') {
return context.callNative('modal', 'confirm', { msg: arg });
}
else {
return context.callNative('modal', 'confirm', arg);
}
},
prompt: (arg) => {
return context.callNative('modal', 'prompt', arg);
},
};
}
function navbar(context) {
const entity = context.entity;
let panel = undefined;

File diff suppressed because one or more lines are too long