自从我看到这个菜单拖动概念之后,我就一直很有兴趣想知道如何实现它。 那么我想知道如何在UIView中使用布料效果进行拖动呢?
我知道如何拖动物品,但如何给它们带上涟漪效果呢?
(更好的图片: http://dribbble.com/shots/899177-Slide-Concept/attachments/98219)
自从我看到这个菜单拖动概念之后,我就一直很有兴趣想知道如何实现它。 那么我想知道如何在UIView中使用布料效果进行拖动呢?
我知道如何拖动物品,但如何给它们带上涟漪效果呢?
(更好的图片: http://dribbble.com/shots/899177-Slide-Concept/attachments/98219)
CAMeshTransform
。它不仅将CALayer视为简单的四边形,还允许将CALayer转换为相互连接的网格面。这个类是苹果实现页面翻页和iBooks翻页效果的方式。然而,该API无法很好地容忍格式错误的输入,苹果也将其保留为私有API。
如果您继续阅读该博客文章,您会看到在提到它是私有API后的下一节内容。
实际上,他将内容视图转换为OpenGL纹理,然后显示出来。这使他可以随心所欲地进行操作。包括像这样...在CAMeshTransform的精神下,我创建了一个BCMeshTransform,几乎复制了原始类的所有功能。
...
没有直接、公共访问Core Animation渲染服务器,我被迫使用OpenGL来实现。这并不是一个完美的解决方案,因为它引入了一些原始类没有的缺点,但似乎是目前唯一可用的选项。
BCMeshTransformView:https://github.com/Ciechan/BCMeshTransformView
窗帘效果的示例实现:BCCurtainDemoViewController.m
BCMeshTransformView
。// From: https://github.com/Ciechan/BCMeshTransformView/blob/master/Demo/BCMeshTransformViewDemo/BCCurtainDemoViewController.m#L59
self.transformView.diffuseLightFactor = 0.5;
CATransform3D perspective = CATransform3DIdentity;
perspective.m34 = -1.0/2000.0;
self.transformView.supplementaryTransform = perspective;
// From: https://github.com/Ciechan/BCMeshTransformView/blob/master/Demo/BCMeshTransformViewDemo/BCCurtainDemoViewController.m#L91
self.transformView.meshTransform = [BCMutableMeshTransform curtainMeshTransformAtPoint:CGPointMake(point.x + self.surplus, point.y) boundsSize:self.transformView.bounds.size];
// From: https://github.com/Ciechan/BCMeshTransformView/blob/master/Demo/BCMeshTransformViewDemo/BCMeshTransform%2BDemoTransforms.m#L14
+ (instancetype)curtainMeshTransformAtPoint:(CGPoint)point boundsSize:(CGSize)boundsSize
{
const float Frills = 3;
point.x = MIN(point.x, boundsSize.width);
BCMutableMeshTransform *transform = [BCMutableMeshTransform identityMeshTransformWithNumberOfRows:20 numberOfColumns:50];
CGPoint np = CGPointMake(point.x/boundsSize.width, point.y/boundsSize.height);
[transform mapVerticesUsingBlock:^BCMeshVertex(BCMeshVertex vertex, NSUInteger vertexIndex) {
float dy = vertex.to.y - np.y;
float bend = 0.25f * (1.0f - expf(-dy * dy * 10.0f));
float x = vertex.to.x;
vertex.to.z = 0.1 + 0.1f * sin(-1.4f * cos(x * x * Frills * 2.0 * M_PI)) * (1.0 - np.x);
vertex.to.x = (vertex.to.x) * np.x + vertex.to.x * bend * (1.0 - np.x);
return vertex;
}];
return transform;
}