我在Facebook Paper应用中看到了这个动画/变形效果,他们将菜单按钮(下拉菜单时出现的那个按钮)变形成X形,当你点击它时再变回原来的样子。我录制了它,因为我不知道如何以其他方式展示它。
https://www.youtube.com/watch?v=y6j_mVgv-NM
有人能解释一下这是如何完成的吗?我想在我的应用程序中使用这个。
我在Facebook Paper应用中看到了这个动画/变形效果,他们将菜单按钮(下拉菜单时出现的那个按钮)变形成X形,当你点击它时再变回原来的样子。我录制了它,因为我不知道如何以其他方式展示它。
https://www.youtube.com/watch?v=y6j_mVgv-NM
有人能解释一下这是如何完成的吗?我想在我的应用程序中使用这个。
这太棒了,我以前没见过。
我创建了一个快速的代码片段来实现这个:
https://gist.github.com/mnmaraes/9458421
编辑:这不仅是一个链接,关键的概念是两种方法:
-(void)morphToX
{
CGFloat angle = M_PI_4;
CGPoint center = CGPointMake(120., 120.);
__weak TUIViewController *weakSelf = self;
[UIView animateWithDuration:0.8 delay:0.0 usingSpringWithDamping:0.6 initialSpringVelocity:2.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
TUIViewController *strongSelf = weakSelf;
strongSelf.topLineView.transform = CGAffineTransformMakeRotation(-angle*5);
strongSelf.topLineView.center = center;
strongSelf.bottomLineView.transform = CGAffineTransformMakeRotation(angle*5);
strongSelf.bottomLineView.center = center;
strongSelf.centerLineView.transform = CGAffineTransformMakeScale(0., 1.0);
} completion:^(BOOL finished) {
}];
}
并且:
-(void)morphToLine
{
__weak TUIViewController *weakSelf = self;
[UIView animateWithDuration:0.8 delay:0.0 usingSpringWithDamping:0.6 initialSpringVelocity:2.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
TUIViewController *strongSelf = weakSelf;
strongSelf.topLineView.transform = CGAffineTransformIdentity;
strongSelf.topLineView.center = CGPointMake(120., 2.);
strongSelf.bottomLineView.transform = CGAffineTransformIdentity;
strongSelf.bottomLineView.center = CGPointMake(120., 238.);
strongSelf.centerLineView.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
}];
}