transformjs:让天下没有难做的生意!不对,是特效!
2014-09-24 10:51 【当耐特】 阅读(7675) 评论(6) 编辑 收藏 举报##写在前面
transform是css3新增的一个属性,可是令开发者费解的是,其内部又有大量的属性如旋转、缩放、扭曲、平移,这也就导致了获取或者是设置transform中一个或者多个属性变得异常麻烦。
transform.js意义
- 让前端没有难做的特效
- 告别style.xxxTransform= "xxx(xxdeg) xxx(xxx) "
- 直接element.scaleX=0.5,element.ratation=30.....,更加pure和友好;
- 自动更新元素的显示状态
当然这里transformjs没有提供诸如:animate({scaleX:2,ratation:60},500)的方法,开发者可以基于transform.js自行去封装,transformjs都这么便利了,结合tween也好,或者利用transition也好,封装一个animate方法应该非常简单。说白了,transformjs只负责让开发者通过简单的赋值操作,让dom变化。
5分钟精通transform.js
这里是没有使用任何模块化开发框架,直接暴露在window下的使用代码:
var element = document.querySelector("#testTransform");
//只需这一行代码
transform.mix(element);
//element就能够72变
element.rotation++;
element.scaleX = 2;
element.scaleY = 3;
当然还可以设置诸如:x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY等属性。
其中x对应translateX、y对应translateY、rotation对应rotateZ,regX和regY相当于设置transform-origin。其余属性和transform一致。目前不支持3d
transform.js原理
transformjs依赖 observablejs用于响应属性改变,自动更新元素显示状态。
transformjs依赖 matrix2D用于将元素的transform属性转换为2*3的矩阵,然后赋值给dom的style的transform属性。见核心代码:
observer.propertyChangedHandler = function () {
var mtx = self.element.matrix2D.identity().appendTransform(self.element.x, self.element.y, self.element.scaleX, self.element.scaleY, self.element.rotation, self.element.skewX, self.element.skewY, self.element.regX, self.element.regY);
self.element.style.transform = self.element.style.msTransform = self.element.style.OTransform = self.element.style.MozTransform = self.element.style.webkitTransform = "matrix(" + [mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty].join(",") + ")";
}
在线演示
http://kmdjs.github.io/transformjs/
Github
https://github.com/kmdjs/kmdjs
有问题反馈
在使用中有任何问题,欢迎反馈给我,可以用以下联系方式跟我交流
- mail:(kmdjs#qq.com, 把#换成@)
- qq: 644213943
- weibo: @当耐特