transform.js 1.1.1

interactive-app · Dec 23, 2016 · bf1e573 · bf1e573
1 parent 05fd0c7
commit bf1e573
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 23 deletions.
diff --git a/transformjs/asset/to.js b/transformjs/asset/to.js
@@ -61,8 +61,8 @@
         To.List.push(this);
     };
 
-    To.go = function (el, property, value, time, setting) {
-        return new _To(el, property, value, time, setting);
+    To.go = function (el, property, value, time, ease,setting) {
+        return new _To(el, property, value, time, ease,setting);
     };
 
     To.List = [];

diff --git a/transformjs/example/as_tool.html b/transformjs/example/as_tool.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+    <img  src="../asset/alloy.png" id="test" style="display: block; width: 210px;height: 210px;position: absolute;left: 50%;margin-left: -105px;margin-top: -105px;top:50%;">
+    <a href="https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs" target="_blank" style="position: absolute; right: 0; top: 0;">
+        <img src="http://alloyteam.github.io/AlloyGameEngine/AlloyPaper/example/asset/img/github.png" alt="" />
+    </a>
+
+    <script src="../transform.min.js" ></script>
+    <script src="../asset/to.js"></script>
+    <script src="../asset/alloy_flow.js"></script>
+    <script>
+
+        var element = document.querySelector("#test"),
+            obj = {};
+        Transform(obj);
+        obj.originY = 100;
+        obj.skewX = -20;
+
+        function sineInOut(a) {
+            return 0.5 * (1 - Math.cos(Math.PI * a));
+        }
+
+        var setting = {
+            onChange: function () {
+                element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = obj.transform;
+            }
+        };
+
+        var alloyFlow = new AlloyFlow({
+            workflow: [
+                {
+                    work: function () {
+                        To.go(obj, "scaleY", .8, 450, sineInOut, setting);
+                        To.go(obj, "skewX", 20, 900, sineInOut, setting)
+                    },
+                    start: 0
+                }, {
+                    work: function () {
+                        To.go(obj, "scaleY", 1, 450, sineInOut, setting)
+                    },
+                    start: 450
+                }, {
+                    work: function () {
+                        To.go(obj, "scaleY", .8, 450, sineInOut, setting);
+                        To.go(obj, "skewX", -20, 900, sineInOut, setting)
+                    },
+                    start: 900
+                }, {
+                    work: function () {
+                        To.go(obj, "scaleY", 1, 450, sineInOut, setting);
+                    },
+                    start: 1350
+                }, {
+                    work: function () {
+                        this.start();
+                    },
+                    start: 1800
+                }
+            ]
+        }).start();
+
+    </script>
+</body>
+</html>
diff --git a/transformjs/example/get_matrix3d.html b/transformjs/example/get_matrix3d.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+    <img  src="../asset/alloy.png" id="test" style="display: block; width: 210px;height: 210px;position: absolute;left: 50%;margin-left: -105px;margin-top: -105px;top:50%;">
+    <a href="https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs" target="_blank" style="position: absolute; right: 0; top: 0;">
+        <img src="http://alloyteam.github.io/AlloyGameEngine/AlloyPaper/example/asset/img/github.png" alt="" />
+    </a>
+
+    <script src="../transform.min.js" ></script>
+
+    <script>
+        var matrix3d = Transform.getMatrix3d({
+            translateX: 0,
+            translateY: 100,
+            scaleX:2
+        });
+        console.log(matrix3d)
+    </script>
+</body>
+</html>
diff --git a/transformjs/transform.js b/transformjs/transform.js
@@ -1,4 +1,4 @@
-/* transformjs 1.0.1
+/* transformjs 1.1.1
  * By dntzhang
  * Github: https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs
  */
@@ -153,33 +153,70 @@
         });
     }
 
-    function Transform(element, notPerspective) {
+    function isElement(o) {
+        return (
+          typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
+          o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string"
+      );
+    }
 
+    function Transform(obj, notPerspective) {
+
+        var observeProps = ["translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"],
+            objIsElement = isElement(obj);
+        if (!notPerspective) {
+            observeProps.push("perspective");
+        }
+
         observe(
-            element,
-            ["translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"],
+            obj,
+            observeProps,
             function () {
-                var mtx = element.matrix3D.identity().appendTransform(element.translateX, element.translateY, element.translateZ, element.scaleX, element.scaleY, element.scaleZ, element.rotateX, element.rotateY, element.rotateZ, element.skewX, element.skewY, element.originX, element.originY, element.originZ);
-                element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = (notPerspective ? "" : "perspective(" + (element.perspective === undefined ? 500 : element.perspective) + "px) ") + "matrix3d(" + Array.prototype.slice.call(mtx.elements).join(",") + ")";
+                var mtx = obj.matrix3d.identity().appendTransform(obj.translateX, obj.translateY, obj.translateZ, obj.scaleX, obj.scaleY, obj.scaleZ, obj.rotateX, obj.rotateY, obj.rotateZ, obj.skewX, obj.skewY, obj.originX, obj.originY, obj.originZ);
+                var transform = (notPerspective ? "" : "perspective(" + obj.perspective + "px) ") + "matrix3d(" + Array.prototype.slice.call(mtx.elements).join(",") + ")";
+                if (objIsElement) {
+                    obj.style.transform = obj.style.msTransform = obj.style.OTransform = obj.style.MozTransform = obj.style.webkitTransform = transform;
+                } else {
+                    obj.transform = transform;
+                }
             });
-
-        element.matrix3D = new Matrix3D();
-
+
+        obj.matrix3d = new Matrix3D();
         if (!notPerspective) {
-            observe(
-                element,
-                ["perspective"],
-                function () {
-                    element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = "perspective(" + element.perspective + "px) matrix3d(" + Array.prototype.slice.call(element.matrix3D.elements).join(",") + ")";
-                });
-            element.perspective = 500;
+            obj.perspective = 500;
         }
-
-        element.scaleX = element.scaleY = element.scaleZ = 1;
+        obj.scaleX = obj.scaleY = obj.scaleZ = 1;
         //由于image自带了x\y\z，所有加上translate前缀
-        element.translateX = element.translateY = element.translateZ = element.rotateX = element.rotateY = element.rotateZ = element.skewX = element.skewY = element.originX = element.originY = element.originZ = 0;
+        obj.translateX = obj.translateY = obj.translateZ = obj.rotateX = obj.rotateY = obj.rotateZ = obj.skewX = obj.skewY = obj.originX = obj.originY = obj.originZ = 0;
     }
 
+    Transform.getMatrix3d = function (option) {
+        var defaultOption = {
+            translateX: 0,
+            translateY: 0,
+            translateZ: 0,
+            rotateX: 0,
+            rotateY: 0,
+            rotateZ: 0,
+            skewX: 0,
+            skewY: 0,
+            originX: 0,
+            originY: 0,
+            originZ: 0,
+            scaleX: 1,
+            scaleY: 1,
+            scaleZ: 1
+        };
+        for (var key in option) {
+            if (option.hasOwnProperty(key)) {
+                defaultOption[key] = option[key];
+            }
+        }
+        return new Matrix3D().identity().appendTransform(defaultOption.translateX, defaultOption.translateY, defaultOption.translateZ, defaultOption.scaleX, defaultOption.scaleY, defaultOption.scaleZ, defaultOption.rotateX, defaultOption.rotateY, defaultOption.rotateZ, defaultOption.skewX, defaultOption.skewY, defaultOption.originX, defaultOption.originY, defaultOption.originZ).elements;
+
+    }
+
+
     if (typeof module !== 'undefined' && typeof exports === 'object') {
         module.exports = Transform;
     }else {

diff --git a/transformjs/transform.min.js b/transformjs/transform.min.js