diff --git a/doric-android/doric/src/main/java/pub/doric/plugin/CoordinatorPlugin.java b/doric-android/doric/src/main/java/pub/doric/plugin/CoordinatorPlugin.java
index f6793fce..c39ba954 100644
--- a/doric-android/doric/src/main/java/pub/doric/plugin/CoordinatorPlugin.java
+++ b/doric-android/doric/src/main/java/pub/doric/plugin/CoordinatorPlugin.java
@@ -18,6 +18,7 @@ package pub.doric.plugin;
 import android.graphics.Color;
 import android.view.View;
 
+import com.github.pengfeizhou.jscore.JSNumber;
 import com.github.pengfeizhou.jscore.JSObject;
 import com.github.pengfeizhou.jscore.JSValue;
 
@@ -163,21 +164,13 @@ public class CoordinatorPlugin extends DoricJavaPlugin {
     }
 
     private void setValue(ViewNode viewNode, boolean isNavBar, String name, float value) {
-        if ("backgroundColor".equals(name)) {
-            if (isNavBar) {
-                getDoricContext().getDoricNavBar().setBackgroundColor((int) value);
-            } else {
-                viewNode.setBackgroundColor((int) value);
-            }
-        } else if ("width".equals(name)) {
-            viewNode.setWidth(value);
-        } else if ("height".equals(name)) {
-            viewNode.setHeight(value);
-        } else if ("x".equals(name)) {
-            viewNode.setX(value);
-        } else if ("y".equals(name)) {
-            viewNode.setY(value);
+        if ("backgroundColor".equals(name) && isNavBar) {
+            getDoricContext().getDoricNavBar().setBackgroundColor((int) value);
+        } else {
+            JSNumber jsNumber = new JSNumber(value);
+            JSObject jsObject = new JSObject();
+            jsObject.setProperty(name, jsNumber);
+            viewNode.blend(jsObject);
         }
-
     }
 }
diff --git a/doric-iOS/Pod/Classes/Plugin/DoricCoordinatorPlugin.m b/doric-iOS/Pod/Classes/Plugin/DoricCoordinatorPlugin.m
index 02ad690f..72db4bbc 100644
--- a/doric-iOS/Pod/Classes/Plugin/DoricCoordinatorPlugin.m
+++ b/doric-iOS/Pod/Classes/Plugin/DoricCoordinatorPlugin.m
@@ -92,6 +92,7 @@ - (void)verticalScrolling:(NSDictionary *)params withPromise:(DoricPromise *)pro
                                                 green:startG + (endG - startG) * rate
                                                  blue:startB + (endB - startB) * rate
                                                 alpha:startA + (endA - startA) * rate];
+                        value = DoricColorToNumber(value);
                     } else {
                         value = @([changingStart floatValue] + ([changingEnd floatValue] - [changingStart floatValue]) * rate);
                     }
@@ -105,24 +106,11 @@ - (void)verticalScrolling:(NSDictionary *)params withPromise:(DoricPromise *)pro
 }
 
 - (void)setValue:(DoricViewNode *)viewNode isNavBar:(BOOL)isNavBar name:(NSString *)name value:(id)value {
-    if ([@"backgroundColor" isEqualToString:name]) {
-        if ([value isKindOfClass:[NSNumber class]]) {
-            value = DoricColor(value);
-        }
-        if (isNavBar) {
-            [self.doricContext.navBar doric_navBar_setBackgroundColor:value];
-        } else {
-            viewNode.view.backgroundColor = value;
-        }
-    } else if ([@"width" isEqualToString:name]) {
-        viewNode.view.width = [value floatValue];
-    } else if ([@"height" isEqualToString:name]) {
-        viewNode.view.height = [value floatValue];
-    } else if ([@"x" isEqualToString:name]) {
-        viewNode.view.left = [value floatValue];
-    } else if ([@"y" isEqualToString:name]) {
-        viewNode.view.top = [value floatValue];
+    if ([@"backgroundColor" isEqualToString:name] && isNavBar) {
+        [self.doricContext.navBar doric_navBar_setBackgroundColor:DoricColor(value)];
+    } else {
+        [viewNode blend:@{name: value}];
     }
 }
 
-@end
\ No newline at end of file
+@end
diff --git a/doric-iOS/Pod/Classes/Util/DoricUtil.h b/doric-iOS/Pod/Classes/Util/DoricUtil.h
index 11634c9c..e04430d2 100644
--- a/doric-iOS/Pod/Classes/Util/DoricUtil.h
+++ b/doric-iOS/Pod/Classes/Util/DoricUtil.h
@@ -27,6 +27,8 @@ void DoricLog(NSString *_Nonnull format, ...);
 
 UIColor *_Nonnull DoricColor(NSNumber *_Nonnull number);
 
+NSNumber *_Nonnull DoricColorToNumber(UIColor *_Nonnull color);
+
 NSBundle *_Nonnull DoricBundle(void);
 
 #ifndef DC_LOCK
@@ -39,4 +41,4 @@ NSBundle *_Nonnull DoricBundle(void);
 
 void ShowToast(NSString *_Nonnull text, DoricGravity gravity);
 
-UIImage *_Nonnull UIImageWithColor(UIColor * _Nonnull color);
+UIImage *_Nonnull UIImageWithColor(UIColor *_Nonnull color);
diff --git a/doric-iOS/Pod/Classes/Util/DoricUtil.m b/doric-iOS/Pod/Classes/Util/DoricUtil.m
index bf41f236..a84eec6c 100644
--- a/doric-iOS/Pod/Classes/Util/DoricUtil.m
+++ b/doric-iOS/Pod/Classes/Util/DoricUtil.m
@@ -41,6 +41,15 @@ void DoricLog(NSString *_Nonnull format, ...) {
     return [UIColor colorWithRed:r green:g blue:b alpha:a];
 }
 
+NSNumber *DoricColorToNumber(UIColor *color) {
+    CGFloat r, g, b, a;
+    [color getRed:&r green:&g blue:&b alpha:&a];
+    return @((((long) (a * 225) & 0xff) << 24)
+            | (((long) (r * 225) & 0xff) << 16)
+            | (((long) (g * 225) & 0xff) << 8)
+            | (((long) (b * 225) & 0xff) << 0));
+}
+
 NSBundle *DoricBundle() {
     NSBundle *bundle = [NSBundle bundleForClass:[DoricContext class]];
     NSURL *url = [bundle URLForResource:@"Doric" withExtension:@"bundle"];
diff --git a/doric-js/index.d.ts b/doric-js/index.d.ts
index e5475dac..4bff5aa0 100644
--- a/doric-js/index.d.ts
+++ b/doric-js/index.d.ts
@@ -929,7 +929,7 @@ declare module 'doric/lib/src/native/coordinator' {
             };
             target: View | "NavBar";
             changing: {
-                name: "width" | "height" | "x" | "y" | "backgroundColor";
+                name: "width" | "height" | "x" | "y" | "backgroundColor" | "alpha";
                 start: number | Color;
                 end: number | Color;
             };
diff --git a/doric-js/lib/src/native/coordinator.d.ts b/doric-js/lib/src/native/coordinator.d.ts
index 867333fc..b0888a4b 100644
--- a/doric-js/lib/src/native/coordinator.d.ts
+++ b/doric-js/lib/src/native/coordinator.d.ts
@@ -13,7 +13,7 @@ export declare function coordinator(context: BridgeContext): {
         };
         target: View | "NavBar";
         changing: {
-            name: "width" | "height" | "x" | "y" | "backgroundColor";
+            name: "width" | "height" | "x" | "y" | "backgroundColor" | "alpha";
             start: number | Color;
             end: number | Color;
         };
diff --git a/doric-js/src/native/coordinator.ts b/doric-js/src/native/coordinator.ts
index a24c5b7b..6d76801b 100644
--- a/doric-js/src/native/coordinator.ts
+++ b/doric-js/src/native/coordinator.ts
@@ -42,7 +42,7 @@ export function coordinator(context: BridgeContext) {
                 },
                 target: View | "NavBar",
                 changing: {
-                    name: "backgroundColor" | "width" | "height" | "x" | "y",
+                    name: "backgroundColor" | "width" | "height" | "x" | "y" | "alpha",
                     start: number | Color
                     end: number | Color
                 },