我想用CoreAnimation做一个类似Flipboard那样的翻页效果,但是现在有一个问题搞不定所以想请教一下大家啊?

2014-01-01 23:25:47 +08:00
 adow
我想做一个类似Flipboard那样的上下翻页的效果,我使用CoreAnimation,把屏幕分成上下两部分,各是一个CALayer,通过设置transform来实现翻转的效果。

比如我现在按住屏幕下半部分的那个CALayer往上拖动的时候,根据拖动的距离来计算往上翻转的角度,设置transform,当我松开的时候,他会根据当前已经翻转的角度来继续下面的动画,如果翻转角度超过90度,那他会翻转到屏幕上半部分去(翻转完成了),也就是翻转到180度,如果没有超过90度,那就回到原来的位置,也就是0度(翻转没有完成),这个过程是一个动画,我使用CABasicAnimation来实现,设置fromValue和toValue就可以了。

现在的问题是,假定我翻转没有超过90度(还是拖动屏幕下半部分的那个CALayer),松开的时候,这时应该一个动画使得这个CALayer回到0度的状态,如果这个动画的过程中(还为结束),我又想去拖动这个页面时,应该怎么办呢?(我开始时没想到过这个问题,理所当然的觉得应该是这个layer的动画完成后才可以继续操作的,后来我发现Flipboard的确是可以在翻页未完成的情况下继续拖动这个页面的,所有又很想实现他了)他应该停止当前那个动画,并从当前的这个角度来继续处理手指拖动的过程(重新计算角度)。那问题是,我如何停止当前的这个动画并且知道现在现在的翻转位置呢?我可以通过CALayer的removeAnimationForKey来停止动画,但是这个会直接变成动画结束的状态,也就是他会立刻使得这个CALayer变成CABasicAnimation中的toValue的那个位置,同时他也会触发CATransaction的completionBlock,而此时我又不知道这个调用是否是因为正常的动画完成的。

我google了一下看到有人说CALayer的presentationLayer中的transform是会在动画播放过程中实时修改的,所以我在removeAnimationForKey之前先记录了他的transform,然后再给这个layer赋值当时的transform,可是感觉并不是这么回事。我想请教一下大家,要实现这样的效果应该如何来做呢?
3252 次点击
所在节点    iDev
1 条回复
doskoi
2014-01-02 22:07:10 +08:00
使用byValue从当前状态开始动画

从Presentation Layer取当前状态

设置speed为0 停止动画

设置动画的fillMode控制结束状态

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/95321

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX