Transform.js 移动端 Web 网页开发动画库 - 文章教程

Transform.js 移动端 Web 网页开发动画库

发布于 2018-07-12 字数 1878 浏览 2540 评论 0

Transform.js 是一个移动端 Web 网页开发动画库,它扩展的是 animate() 与 css() 方法的功能。通过其引入的 CSS3 属性你可以完成一系列的动画效果,当然 transform.js 不仅仅支持移动设备,支持 CSS3 3D Transforms 的浏览器都能正常使用 transform.js。

特点

  • transformjs 作为腾讯AlloyTeam移动开发利器之一,广泛应用于手Q Web、微信 Web 相关业务开发
  • transformjs 专注于 CSS3 transform 读取和设置的一个超轻量级 JS 库,大大提高了 CSS3 transform 的可编程性
  • transformjs 高度抽象,不与任何时间、运动框架捆绑,所以可以和任意时间、和运动框架轻松搭配使用
  • transformjs 使用 matrix3d 为最终输出给 dom 对象,硬件加速的同时,不失去可编程性
  • transformjs 拥有超级易用的 API,一分钟轻松上手,二分钟嵌入真实项目实战
  • transformjs 扩展了 transform 本身的能力,让 transform origin 更加方便

安装

npm install css3transform

API

Transform(domElement, [notPerspective]);

Usage

Transform(domElement);//or Transform(domElement, true);

//set "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
domElement.translateX = 100;
domElement.scaleX = 0.5;
domElement.originX = 0.5;

//get "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
//console.log(domElement.translateX )

官方网站:http://alloyteam.github.io/AlloyTouch/transformjs/
Github地址:https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论