5

最近越来越多的应用程序正在使用新型视图之间的过渡。很难定义它,但过渡看起来像预览视图正在淡出,变低(向下平移)并缩小一点 - 所有这些都是同时发生的。它真的很微妙和优雅。

您可以在 Facebook 应用程序中以慢动作观察这种过渡 - 在墙上找到某人的照片,点击查看它,然后将全屏图像慢慢向下拖动,您会注意到墙壁从后面升起 - 褪色和缩放​​一点. 这就是过渡。过渡还涉及状态栏淡出。

过渡状态

当您从左窗格打开设置时,此转换也出现在 Gmail 2.0 中。

我认为有一个特定的框架或准备好的方法,因为越来越多的应用程序实现了这个。但也许我也错了,因为我在过渡的轨迹中看到了一些应用程序的一些细微差别——例如。Gmail 使用了一点轮播效果,但 facebook 只是缩小到中间。

无论如何,这似乎是一种新趋势。

我正在寻找一些参考或框架或实现这种转换的诀窍。

感谢您提供任何有用的东西。

4

3 回答 3

7

试试这个链接。我认为这正是你正在寻找的东西https://github.com/kentnguyen/KNSemiModalViewController

于 2012-12-07T11:45:52.187 回答
3

我第一次看到它在国家地理应用程序中使用...尝试使用这两种方法,第一种“将其放回”,第二种“将其带回”。过去它对我来说效果很好,只需进行一些调整以满足您的需求。

- (void)dropItBack:(id)sender
{
    // Position
    CABasicAnimation *posAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    posAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 284)];//center point

    // Opacity
    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.toValue = [NSNumber numberWithFloat:0.5f];

    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.toValue = [NSNumber numberWithDouble:0.8];

    // Dramaticism of the Z rotation
    // A lower number is more dramatic
    float distance = 1000;
    CATransform3D trans = CATransform3DIdentity;
    trans.m34 = 1.f / -distance;

    // Rotate Back
    CABasicAnimation *rockBack = [CABasicAnimation animationWithKeyPath:@"transform"];
    rockBack.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, 1.f, 0.f, 0.f)];
    rockBack.beginTime = 0.f;

    // Rotate forward
    trans.m34 = 0.f;
    CABasicAnimation *rockForward = [CABasicAnimation animationWithKeyPath:@"transform"];
    rockForward.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, -1.f, 0.f, 0.f)];
    rockForward.beginTime = 0.25f;

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.duration = 0.5f;
    animationGroup.repeatCount = 0.f;
    animationGroup.removedOnCompletion = NO;
    animationGroup.autoreverses = NO;
    animationGroup.fillMode = kCAFillModeForwards;
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [animationGroup setAnimations:[NSArray arrayWithObjects:rockBack, rockForward, scaleAnimation, posAnimation, opacityAnimation, nil]];

    [self.navigationController.view.layer addAnimation:animationGroup forKey:nil];

    popsheet = [UIButton buttonWithType:UIButtonTypeCustom];
    [popsheet setBackgroundColor:[UIColor blueColor]];
    [popsheet setFrame:CGRectMake(0, 580, 320, 400)];
    [popsheet addTarget:self action:@selector(bringItForward:) forControlEvents:UIControlEventTouchUpInside];
    [self.tabBarController.view addSubview:popsheet];

    [UIView animateWithDuration:0.3 animations:^{
        [popsheet setFrame: CGRectMake(0, 180, 320, 400)];
    }];
}

- (void)bringItForward:(id)sender
{
    // Position
    CABasicAnimation *posAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    posAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 284)];

    // Opacity
    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.toValue = [NSNumber numberWithFloat:1.f];

    // Scale
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.toValue = [NSNumber numberWithDouble:1.f];

    // Dramaticism of the Z rotation
    // A lower number is more dramatic
    float distance = 1000;
    CATransform3D trans = CATransform3DIdentity;
    trans.m34 = 1.f / distance;

    // Rotate back
    CABasicAnimation *rockBack = [CABasicAnimation animationWithKeyPath:@"transform"];
    rockBack.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, 1.f, 0.f, 0.f)];
    rockBack.beginTime = 0.f;

    // Rotate forward
    trans.m34 = 0.f;
    CABasicAnimation *rockForward = [CABasicAnimation animationWithKeyPath:@"transform"];
    rockForward.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, -1.f, 0.f, 0.f)];
    rockForward.beginTime = 0.25f;

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.duration = 0.5f;
    animationGroup.repeatCount = 0.f;
    animationGroup.removedOnCompletion = NO;
    animationGroup.autoreverses = NO;
    animationGroup.fillMode = kCAFillModeForwards;
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [animationGroup setAnimations:[NSArray arrayWithObjects:posAnimation, rockBack, rockForward, opacityAnimation, nil]];

    [self.navigationController.view.layer addAnimation:animationGroup forKey:nil];
    [UIView animateWithDuration:0.3 animations:^{
        [popsheet setFrame: CGRectMake(0, 580, 320, 400)];
    }];

}
于 2012-12-07T07:19:26.747 回答
0

我认为你应该试试这个库:

https://github.com/michaelhenry/MHFacebookImageViewer

于 2013-07-09T04:42:28.070 回答