From bf1e57374fd4eaf857c311ffb2438a029860ed9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=A3=8A?= Date: Fri, 23 Dec 2016 08:48:37 +0800 Subject: [PATCH] transform.js 1.1.1 --- transformjs/asset/to.js | 4 +- transformjs/example/as_tool.html | 69 ++++++++++++++++++++++++ transformjs/example/get_matrix3d.html | 24 +++++++++ transformjs/transform.js | 75 ++++++++++++++++++++------- transformjs/transform.min.js | 4 +- 5 files changed, 153 insertions(+), 23 deletions(-) create mode 100644 transformjs/example/as_tool.html create mode 100644 transformjs/example/get_matrix3d.html diff --git a/transformjs/asset/to.js b/transformjs/asset/to.js index dc7f2ff..0354532 100644 --- 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 new file mode 100644 index 0000000..6a5346e --- /dev/null +++ b/transformjs/example/as_tool.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/transformjs/example/get_matrix3d.html b/transformjs/example/get_matrix3d.html new file mode 100644 index 0000000..05875d8 --- /dev/null +++ b/transformjs/example/get_matrix3d.html @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/transformjs/transform.js b/transformjs/transform.js index c293a79..7c57f9e 100644 --- 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 index 9e1c207..2e66335 100644 --- a/transformjs/transform.min.js +++ b/transformjs/transform.min.js @@ -1,5 +1,5 @@ -/* transformjs 1.0.1 +/* transformjs 1.1.1 * By dntzhang * Github: https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs */ -;(function(){function t(n,t,r){for(var e,u=0,f=t.length;u