feat: add API clearAnimation

doric-js/lib/src/ui/animation.d.ts

@@ -7,6 +7,7 @@ export declare enum RepeatMode {
 export interface IAnimation extends Modeling {
     duration: number;
     delay?: number;
+    id: string;
 }
 export interface Changeable {
     fromValue: number;
@@ -63,6 +64,7 @@ declare abstract class Animation implements IAnimation {
     delay?: number;
     fillMode: FillMode;
     timingFunction?: TimingFunction;
+    id: string;
     toModel(): {
         type: string;
         delay: number | undefined;
@@ -76,6 +78,7 @@ declare abstract class Animation implements IAnimation {
         repeatMode: RepeatMode | undefined;
         fillMode: FillMode;
         timingFunction: TimingFunction | undefined;
+        id: string;
     };
 }
 export declare class ScaleAnimation extends Animation {
@@ -132,12 +135,14 @@ export declare class AnimationSet implements IAnimation {
     private animations;
     private _duration;
     delay?: number;
+    id: string;
     addAnimation(anim: IAnimation): void;
     get duration(): number;
     set duration(v: number);
     toModel(): {
         animations: Model;
         delay: number | undefined;
+        id: string;
     };
 }
 export {};

doric-js/lib/src/ui/animation.js

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { uniqueId } from "../util/uniqueId";
 export var RepeatMode;
 (function (RepeatMode) {
     RepeatMode[RepeatMode["RESTART"] = 1] = "RESTART";
@@ -65,6 +66,7 @@ class Animation {
         this.changeables = new Map;
         this.duration = 0;
         this.fillMode = FillMode.Forward;
+        this.id = uniqueId("Animation");
     }
     toModel() {
         const changeables = [];
@@ -83,7 +85,8 @@ class Animation {
             repeatCount: this.repeatCount,
             repeatMode: this.repeatMode,
             fillMode: this.fillMode,
-            timingFunction: this.timingFunction
+            timingFunction: this.timingFunction,
+            id: this.id,
         };
     }
 }
@@ -133,13 +136,13 @@ export class TranslationAnimation extends Animation {
         super();
         this.translationXChangeable = {
             key: "translationX",
-            fromValue: 1,
-            toValue: 1,
+            fromValue: 0,
+            toValue: 0,
         };
         this.translationYChangeable = {
             key: "translationY",
-            fromValue: 1,
-            toValue: 1,
+            fromValue: 0,
+            toValue: 0,
         };
         this.changeables.set("translationX", this.translationXChangeable);
         this.changeables.set("translationY", this.translationYChangeable);
@@ -242,6 +245,7 @@ export class AnimationSet {
     constructor() {
         this.animations = [];
         this._duration = 0;
+        this.id = uniqueId("AnimationSet");
     }
     addAnimation(anim) {
         this.animations.push(anim);
@@ -259,6 +263,7 @@ export class AnimationSet {
                 return e.toModel();
             }),
             delay: this.delay,
+            id: this.id,
         };
     }
 }

doric-js/lib/src/ui/view.d.ts

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

doric-js/lib/src/ui/view.js

@@ -199,6 +199,15 @@ export class View {
             }
         });
     }
+    cancelAnimation(context, animation) {
+        return this.nativeChannel(context, "cancelAnimation")(animation.id).then(() => {
+            this.__dirty_props__.translationX = this.translationX || 0;
+            this.__dirty_props__.translationY = this.translationY || 0;
+            this.__dirty_props__.scaleX = this.scaleX || 1;
+            this.__dirty_props__.scaleY = this.scaleY || 1;
+            this.__dirty_props__.rotation = this.rotation || 0;
+        });
+    }
 }
 __decorate([
     Property,