DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

optimization omi-transform

This commit is contained in:
张磊 2018-10-25 08:36:49 +08:00
parent ca19092aa9
commit f2d27e3452
4 changed files with 17 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/omi/examples/css3transform/b.js
View File

@ -1281,7 +1281,7 @@
};
options.root.Omi = omi;
options.root.Omi.version = "4.0.6";
options.root.Omi.version = "4.0.7";
/* transformjs 1.1.6
* By dntzhang
@ -1624,32 +1624,7 @@
};
CSS3Transform.prototype.render = function render$$1(props, data) {
var mtx = Transform.getMatrix3D(this.props);
var transform = "matrix3d(" + Array.prototype.slice.call(mtx).join(",") + ")";
if (this.props.hasOwnProperty('perspective')) {
if (typeof this.props.perspective === 'number') {
transform = "perspective(" + this.props.perspective + "px) " + transform;
} else {
transform = "perspective(" + this.props.perspective + ") " + transform;
}
}
var vd = this.props.children[0];
if (!vd.attributes) vd.attributes = {};
if (!vd.attributes.style) vd.attributes.style = {};
if (typeof vd.attributes.style === 'string') {
vd.attributes.style += "transform:" + transform + ";";
} else {
vd.attributes.style.transform = transform;
}
return vd;
// return Omi.cloneElement(this.props.children[0], {
// style :"transform:"+transform+";"
// });
return props.children[0];
};
return CSS3Transform;
@ -1678,7 +1653,7 @@
this.data.rotateZ = 30;
this.linkRef = function (e) {
_this2.trDiv = e;
_this2.animDiv = e;
};
};
@ -1689,14 +1664,15 @@
MyApp.prototype.installed = function installed() {
var _this3 = this;
var tk = setInterval(function () {
setInterval(function () {
//slow
// this.data.rotateZ += 2
// this.update()
//fast
_this3.trDiv.rotateZ += 2;
_this3.data.rotateZ = _this3.trDiv.rotateZ;
_this3.animDiv.rotateZ += 2;
//sync for update call of any scenario
_this3.data.rotateZ = _this3.animDiv.rotateZ;
}, 16);
};

2
packages/omi/examples/css3transform/b.js.map
View File

File diff suppressed because one or more lines are too long

9
packages/omi/examples/css3transform/main.js
View File

@ -7,7 +7,7 @@ class MyApp extends WeElement {
this.data.rotateZ = 30
this.linkRef = (e) => {
this.trDiv = e
this.animDiv = e
}
}
@ -26,14 +26,15 @@ class MyApp extends WeElement {
}
installed() {
const tk = setInterval(() => {
setInterval(() => {
//slow
// this.data.rotateZ += 2
// this.update()
//fast
this.trDiv.rotateZ += 2
this.data.rotateZ = this.trDiv.rotateZ
this.animDiv.rotateZ += 2
//sync for update call of any scenario
this.data.rotateZ = this.animDiv.rotateZ
}, 16)

33
packages/omi/examples/css3transform/omi-transform.js
View File

@ -13,12 +13,12 @@ class CSS3Transform extends WeElement {
this.transformByProps()
}
afterUpdate(){
afterUpdate() {
this.transformByProps()
}
transformByProps(){
transformByProps() {
["translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ", "perspective"].forEach(item => {
if (this.props.hasOwnProperty(item)) {
this.host[item] = this.props[item]
@ -28,31 +28,6 @@ class CSS3Transform extends WeElement {
render(props, data) {
const mtx = Transform.getMatrix3D(this.props)
let transform = "matrix3d(" + Array.prototype.slice.call(mtx).join(",") + ")"
if (this.props.hasOwnProperty('perspective')) {
if (typeof this.props.perspective === 'number') {
transform = "perspective(" + this.props.perspective + "px) " + transform
} else {
transform = "perspective(" + this.props.perspective + ") " + transform
}
}
const vd = this.props.children[0]
if (!vd.attributes) vd.attributes = {}
if (!vd.attributes.style) vd.attributes.style = {}
if (typeof vd.attributes.style === 'string') {
vd.attributes.style += "transform:" + transform + ";"
} else {
vd.attributes.style.transform = transform
}
return vd
// return Omi.cloneElement(this.props.children[0], {
// style :"transform:"+transform+";"
// });
return props.children[0]
}
}