探索创新 UI 的新纪元：UILayer

在前端开发的世界里，我们常常被繁杂的DOM操作所困扰。但是，有了UILayer，这一切都将变得简单而直观。这是一个基于WebKit的JavaScript库，它引入了一种全新的层（Layer）概念，让你可以集中精力于你的应用程序逻辑，而不是底层的技术细节。

演示与示例

想要先睹为快吗？尝试以下炫酷的交互式Demo：

• 移动的疯狂层
• 翻页书
• 互动3D透视
• 更多精彩例子...

注意：由于依赖WebKit，所以UILayer仅支持Apple的iOS、OS X以及Android的web视图，以及Google Chrome和Safari浏览器。

下面是一个简单的示例：一个内含子层的层，在触碰时向右移动50像素，并旋转内部子层，就像轮子一样：

layer1 = UILayer({ x:10, y:10, width:300, height:300, animated:true });
layer2 = UILayer({ x:50, y:50, width:200, height:200, animated:true });
layer1.addSublayer(layer2);
layer1.backgroundColor = 'salmon';
layer1.on('touchstart', function () {
  layer1.frame.x += 50;
  layer2.rotation.z += 20;
});
document.body.appendChild(layer1.element);

查看Move版本实现 或者 查看JavaScript版本实现，自己动手试试看！

开始使用

如果你已经在使用Move，可以直接引用预编译的uilayer.js，或者直接从"src"目录导入源文件。

不使用Move的话，可以使用uilayer-standalone.js独立JavaScript库。

<script src="https://raw.github.com/rsms/uilayer/master/uilayer-standalone.js"></script>
<script>
var UILayer = Move.require('UILayer');
...
</script>

如果需要构建自定义版本的JavaScript库，确保安装了move(>=0.4.4)，然后运行：

move compile -d src -o uilayer.js

强大的API

UILayer提供了一系列强大的几何和样式属性，例如frame用于控制位置和大小，rotation用于旋转，scale进行缩放，transformOrigin决定变换原点，以及丰富的样式属性如backgroundColor、opacity等。

此外，UIFrame对象提供了可变代理，允许直接修改层的位置，如layer.frame.x += 50。对于多轴变化，可以选择性地设置rotation和scaleBy，并监听事件以响应这些变化。

应用场景

• 创建复杂的动画效果，如翻页、3D旋转。
• 简化触摸事件处理，实现更流畅的用户交互。
• 在高性能设备上创建高性能的游戏或应用，利用硬件加速的优势。
• 快速构建原型，方便调试和设计验证。

项目特点

1. 简化DOM操作：通过单一、清晰的API，降低前端开发复杂度。
2. 面向WebKit环境：专为WebKit优化，提供卓越的性能表现。
3. 丰富的功能集：包括旋转、缩放、锚点定位等多种特性。
4. 易于集成：支持Move和JavaScript，适应不同开发需求。
5. 可扩展性：通过事件系统和自定义样式，轻松添加新功能和定制视觉效果。

现在，是时候用UILayer来提升你的Web应用体验，让它超越传统DOM操作的限制，为你带来前所未有的开发乐趣和应用性能！