diff --git a/packages/uni-api/src/service/context/canvas.ts b/packages/uni-api/src/service/context/canvas.ts
index f1465d7b1fc6fbc68a6f9cc936cc6375ce730339..05ab5d7494e9aba36eebd3664a9189d62a0011d1 100644
--- a/packages/uni-api/src/service/context/canvas.ts
+++ b/packages/uni-api/src/service/context/canvas.ts
@@ -352,9 +352,11 @@ const defaultState = {
   fontFamily: 'sans-serif',
 }
 
+type ActionsItemType = string | number | boolean | undefined | Array<number>
+type ActionsItemData = Array<ActionsItemType>
 type ActionsItem = {
   method: string
-  data: Array<string | number | boolean>
+  data: ActionsItemData | Array<ActionsItem>
 }
 type DefaultState = typeof defaultState
 type Callback = (result: any) => void | undefined
@@ -793,21 +795,20 @@ export class CanvasContext implements UniApp.CanvasContext {
 
 ;[...methods1, ...methods2].forEach(function (method) {
   function get(method: string) {
+    // @ts-ignore
+    let _this = this as CanvasContext
     switch (method) {
       case 'fill':
       case 'stroke':
         return function () {
-          // @ts-ignore
-          this.actions.push({
+          _this.actions.push({
             method: method + 'Path',
-            // @ts-ignore
-            data: [...this.path],
+            data: [..._this.path],
           })
         }
       case 'fillRect':
         return function (x: number, y: number, width: number, height: number) {
-          // @ts-ignore
-          this.actions.push({
+          _this.actions.push({
             method: 'fillPath',
             data: [
               {
@@ -819,8 +820,7 @@ export class CanvasContext implements UniApp.CanvasContext {
         }
       case 'strokeRect':
         return function (x: number, y: number, width: number, height: number) {
-          // @ts-ignore
-          this.actions.push({
+          _this.actions.push({
             method: 'strokePath',
             data: [
               {
@@ -837,8 +837,7 @@ export class CanvasContext implements UniApp.CanvasContext {
           if (typeof maxWidth === 'number') {
             data.push(maxWidth)
           }
-          // @ts-ignore
-          this.actions.push({
+          _this.actions.push({
             method,
             data,
           })
@@ -865,7 +864,7 @@ export class CanvasContext implements UniApp.CanvasContext {
             dWidth = undefined
             dHeight = undefined
           }
-          var data
+          let data: ActionsItemData
 
           function isNumber(e: any) {
             return typeof e === 'number'
@@ -889,16 +888,14 @@ export class CanvasContext implements UniApp.CanvasContext {
               : isNumber(sWidth) && isNumber(sHeight)
               ? [imageResource, sx, sy, sWidth, sHeight]
               : [imageResource, sx, sy]
-          // @ts-ignore
-          this.actions.push({
+          _this.actions.push({
             method,
             data,
           })
         }
       default:
-        return function (...data: any) {
-          // @ts-ignore
-          this.actions.push({
+        return function (...data: ActionsItemData) {
+          _this.actions.push({
             method,
             data,
           })
@@ -909,29 +906,32 @@ export class CanvasContext implements UniApp.CanvasContext {
 })
 methods3.forEach(function (method) {
   function get(method: string) {
+    // @ts-ignore
+    let _this = this as CanvasContext
     switch (method) {
       case 'setFillStyle':
       case 'setStrokeStyle':
         return function (color: string | Data) {
           if (typeof color !== 'object') {
-            // @ts-ignore
-            this.actions.push({
+            _this.actions.push({
               method,
               data: ['normal', checkColor(color)],
             })
           } else {
-            // @ts-ignore
-            this.actions.push({
+            _this.actions.push({
               method,
-              data: [color.type, color.data, color.colorStop],
+              data: [
+                color.type as ActionsItemType,
+                color.data as ActionsItemType,
+                color.colorStop as ActionsItemType,
+              ],
             })
           }
         }
       case 'setGlobalAlpha':
         return function (alpha: number) {
           alpha = Math.floor(255 * parseFloat(alpha as unknown as string))
-          // @ts-ignore
-          this.actions.push({
+          _this.actions.push({
             method,
             data: [alpha],
           })
@@ -943,52 +943,41 @@ methods3.forEach(function (method) {
           blur: number,
           color: string
         ) {
-          color = checkColor(color) as any
-          // @ts-ignore
-          this.actions.push({
+          let _color = checkColor(color)
+          _this.actions.push({
             method,
             data: [offsetX, offsetY, blur, color],
           })
-          // @ts-ignore
-          this.state.shadowBlur = blur
-          // @ts-ignore
-          this.state.shadowColor = color
-          // @ts-ignore
-          this.state.shadowOffsetX = offsetX
-          // @ts-ignore
-          this.state.shadowOffsetY = offsetY
+          _this.state.shadowBlur = blur
+          _this.state.shadowColor = _color
+          _this.state.shadowOffsetX = offsetX
+          _this.state.shadowOffsetY = offsetY
         }
       case 'setLineDash':
         return function (pattern: Array<number> | undefined, offset: number) {
           pattern = pattern || [0, 0]
           offset = offset || 0
-          // @ts-ignore
-          this.actions.push({
+          _this.actions.push({
             method,
             data: [pattern, offset],
           })
-          // @ts-ignore
-          this.state.lineDash = pattern
+          _this.state.lineDash = pattern
         }
       case 'setFontSize':
         return function (fontSize: number) {
-          // @ts-ignore
-          this.state.font = this.state.font.replace(
+          _this.state.font = _this.state.font.replace(
             /\d+\.?\d*px/,
             fontSize + 'px'
           )
-          // @ts-ignore
-          this.state.fontSize = fontSize
-          // @ts-ignore
-          this.actions.push({
+          _this.state.fontSize = fontSize
+          _this.actions.push({
             method,
             data: [fontSize],
           })
         }
       default:
-        return function (...data: any) {
-          // @ts-ignore
-          this.actions.push({
+        return function (...data: ActionsItemData) {
+          _this.actions.push({
             method,
             data,
           })
diff --git a/packages/uni-api/src/service/ui/createAnimation.ts b/packages/uni-api/src/service/ui/createAnimation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6b4e23e22f6b01199eeb0bff00696033b6da0782
--- /dev/null
+++ b/packages/uni-api/src/service/ui/createAnimation.ts
@@ -0,0 +1,153 @@
+const defaultOption: Option = {
+  duration: 400,
+  timingFunction: 'linear',
+  delay: 0,
+  transformOrigin: '50% 50% 0',
+}
+
+type Option = UniApp.CreateAnimationOptions
+type AnimatesArgs = string[]
+type Action = {
+  animates: string[]
+  option: ReturnType<MPAnimation['_getOption']>
+}
+
+class MPAnimation implements UniApp.Animation {
+  actions: Array<Action>
+  currentTransform: Data
+  currentStepAnimates: Array<{ type: string; args: AnimatesArgs }>
+  option: Option
+
+  constructor(option: Option) {
+    this.actions = []
+    this.currentTransform = {}
+    this.currentStepAnimates = []
+    this.option = Object.assign({}, defaultOption, option)
+  }
+
+  _getOption(option: Option) {
+    const _option: {
+      transition: Option
+      transformOrigin: Option['transformOrigin']
+    } = {
+      transition: Object.assign({}, this.option, option),
+      transformOrigin: '',
+    }
+    _option.transformOrigin = _option.transition.transformOrigin
+    delete _option.transition.transformOrigin
+    return _option
+  }
+
+  _pushAnimates(type: string, args: AnimatesArgs) {
+    this.currentStepAnimates.push({
+      type: type,
+      args: args,
+    })
+  }
+
+  _converType(type: string) {
+    return type.replace(/[A-Z]/g, (text) => {
+      return `-${text.toLowerCase()}`
+    })
+  }
+
+  _getValue(value: string | number) {
+    return typeof value === 'number' ? `${value}px` : value
+  }
+
+  export() {
+    const actions = this.actions
+    this.actions = []
+    return {
+      actions,
+    }
+  }
+
+  step(option: Option) {
+    this.currentStepAnimates.forEach((animate) => {
+      if (animate.type !== 'style') {
+        this.currentTransform[animate.type] = animate
+      } else {
+        this.currentTransform[`${animate.type}.${animate.args[0]}`] = animate
+      }
+    })
+    this.actions.push({
+      animates: Object.values(this.currentTransform) as Action['animates'],
+      option: this._getOption(option),
+    })
+    this.currentStepAnimates = []
+    return this
+  }
+
+  'matrix': UniApp.Animation['matrix']
+  'matrix3d': UniApp.Animation['matrix3d']
+  'rotate': UniApp.Animation['rotate']
+  'rotate3d': UniApp.Animation['rotate3d']
+  'rotateX': UniApp.Animation['rotateX']
+  'rotateY': UniApp.Animation['rotateY']
+  'rotateZ': UniApp.Animation['rotateZ']
+  'scale': UniApp.Animation['scale']
+  'scale3d': UniApp.Animation['scale3d']
+  'scaleX': UniApp.Animation['scaleX']
+  'scaleY': UniApp.Animation['scaleY']
+  'scaleZ': UniApp.Animation['scaleZ']
+  'skew': UniApp.Animation['skew']
+  'skewX': UniApp.Animation['skewX']
+  'skewY': UniApp.Animation['skewY']
+  'translate': UniApp.Animation['translate']
+  'translate3d': UniApp.Animation['translate3d']
+  'translateX': UniApp.Animation['translateX']
+  'translateY': UniApp.Animation['translateY']
+  'translateZ': UniApp.Animation['translateZ']
+  'opacity': UniApp.Animation['opacity']
+  'backgroundColor': UniApp.Animation['backgroundColor']
+  'width': UniApp.Animation['width']
+  'height': UniApp.Animation['height']
+  'right': UniApp.Animation['right']
+  'top': UniApp.Animation['top']
+  'bottom': UniApp.Animation['bottom']
+  'left': UniApp.Animation['left']
+}
+
+const animateTypes1 = [
+  'matrix',
+  'matrix3d',
+  'rotate',
+  'rotate3d',
+  'rotateX',
+  'rotateY',
+  'rotateZ',
+  'scale',
+  'scale3d',
+  'scaleX',
+  'scaleY',
+  'scaleZ',
+  'skew',
+  'skewX',
+  'skewY',
+  'translate',
+  'translate3d',
+  'translateX',
+  'translateY',
+  'translateZ',
+]
+const animateTypes2 = ['opacity', 'backgroundColor']
+const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
+animateTypes1.concat(animateTypes2, animateTypes3).forEach((type) => {
+  ;(MPAnimation.prototype as any)[type] = function (...args: AnimatesArgs) {
+    let _this = this as MPAnimation
+    if (animateTypes2.concat(animateTypes3).includes(type)) {
+      _this._pushAnimates('style', [
+        _this._converType(type),
+        animateTypes3.includes(type) ? _this._getValue(args[0]) : args[0],
+      ])
+    } else {
+      _this._pushAnimates(type, args)
+    }
+    return this
+  }
+})
+
+export function createAnimation(option: Option) {
+  return new MPAnimation(option)
+}
diff --git a/packages/uni-h5/dist/uni-h5.es.js b/packages/uni-h5/dist/uni-h5.es.js
index ebe930cf423d67fabdd2c7035245caf17531c592..7e8c0684988fc12c545a31f4dca9a2638cc2b761 100644
--- a/packages/uni-h5/dist/uni-h5.es.js
+++ b/packages/uni-h5/dist/uni-h5.es.js
@@ -2762,18 +2762,19 @@ class CanvasContext {
 }
 [...methods1, ...methods2].forEach(function(method) {
   function get(method2) {
+    let _this = this;
     switch (method2) {
       case "fill":
       case "stroke":
         return function() {
-          this.actions.push({
+          _this.actions.push({
             method: method2 + "Path",
-            data: [...this.path]
+            data: [..._this.path]
           });
         };
       case "fillRect":
         return function(x, y, width, height) {
-          this.actions.push({
+          _this.actions.push({
             method: "fillPath",
             data: [
               {
@@ -2785,7 +2786,7 @@ class CanvasContext {
         };
       case "strokeRect":
         return function(x, y, width, height) {
-          this.actions.push({
+          _this.actions.push({
             method: "strokePath",
             data: [
               {
@@ -2802,7 +2803,7 @@ class CanvasContext {
           if (typeof maxWidth === "number") {
             data.push(maxWidth);
           }
-          this.actions.push({
+          _this.actions.push({
             method: method2,
             data
           });
@@ -2819,7 +2820,7 @@ class CanvasContext {
             dWidth = void 0;
             dHeight = void 0;
           }
-          var data;
+          let data;
           function isNumber(e2) {
             return typeof e2 === "number";
           }
@@ -2834,14 +2835,14 @@ class CanvasContext {
             dWidth,
             dHeight
           ] : isNumber(sWidth) && isNumber(sHeight) ? [imageResource, sx, sy, sWidth, sHeight] : [imageResource, sx, sy];
-          this.actions.push({
+          _this.actions.push({
             method: method2,
             data
           });
         };
       default:
         return function(...data) {
-          this.actions.push({
+          _this.actions.push({
             method: method2,
             data
           });
@@ -2852,64 +2853,69 @@ class CanvasContext {
 });
 methods3.forEach(function(method) {
   function get(method2) {
+    let _this = this;
     switch (method2) {
       case "setFillStyle":
       case "setStrokeStyle":
         return function(color) {
           if (typeof color !== "object") {
-            this.actions.push({
+            _this.actions.push({
               method: method2,
               data: ["normal", checkColor(color)]
             });
           } else {
-            this.actions.push({
+            _this.actions.push({
               method: method2,
-              data: [color.type, color.data, color.colorStop]
+              data: [
+                color.type,
+                color.data,
+                color.colorStop
+              ]
             });
           }
         };
       case "setGlobalAlpha":
         return function(alpha) {
           alpha = Math.floor(255 * parseFloat(alpha));
-          this.actions.push({
+          _this.actions.push({
             method: method2,
             data: [alpha]
           });
         };
       case "setShadow":
         return function(offsetX, offsetY, blur, color) {
-          color = checkColor(color);
-          this.actions.push({
+          let _color = checkColor(color);
+          _this.actions.push({
             method: method2,
             data: [offsetX, offsetY, blur, color]
           });
-          this.state.shadowBlur = blur;
-          this.state.shadowColor = color;
-          this.state.shadowOffsetX = offsetX;
-          this.state.shadowOffsetY = offsetY;
+          _this.state.shadowBlur = blur;
+          _this.state.shadowColor = _color;
+          _this.state.shadowOffsetX = offsetX;
+          _this.state.shadowOffsetY = offsetY;
         };
       case "setLineDash":
         return function(pattern, offset) {
           pattern = pattern || [0, 0];
           offset = offset || 0;
-          this.actions.push({
+          _this.actions.push({
             method: method2,
             data: [pattern, offset]
           });
-          this.state.lineDash = pattern;
+          _this.state.lineDash = pattern;
         };
       case "setFontSize":
         return function(fontSize) {
-          this.state.font = this.state.font.replace(/\d+\.?\d*px/, fontSize + "px");
-          this.state.fontSize = fontSize;
-          this.actions.push({
+          _this.state.font = _this.state.font.replace(/\d+\.?\d*px/, fontSize + "px");
+          _this.state.fontSize = fontSize;
+          _this.actions.push({
             method: method2,
             data: [fontSize]
           });
         };
       default:
         return function(...data) {
-          this.actions.push({
+          _this.actions.push({
             method: method2,
             data
           });