像眨眼应用一样翻转贺卡

Posted 2023-03-08

【中文标题】像眨眼应用一样翻转贺卡

【英文标题】：flip greeting card like just wink app

【发布时间】：2013-12-24 15:52:24

【问题描述】：

谁能帮助我制作像我们在 Just Wink 应用程序中一样的动画。我想要与在 Just Wink 中相同的预览动画。 here is the animation which i want to have

我已经尝试了好几个小时，但没有发现任何有用的东西。我使用 CATransform3D 尝试了类似的动画，但也无法获得确切的动画。这是我尝试过的代码

intialTransform = CATransform3DIdentity;
intialTransform.m34 = 1.0 / -500;
intialTransform = CATransform3DRotate(intialTransform, DEGREES_TO_RADIANS(70), 1.0f, 0.0f, 0.0f);
_myView1.layer.transform = intialTransform;

我像 _myView2 和 _myview3 一样采用上面的三个视图，并且每个人都有 CATransform3DIdentity。我能够像在 Just Wink 中一样旋转不同的视图，但无法获得确切的动画。 尝试了很多样品，但这也没有解决我的问题。 请帮忙！！！！

【参考方案1】：

使用此代码示例查看适用于我的实现中的“打开卡片”动画。 只需将代码插入新的“单一视图”项目并运行即可。

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@property (strong, nonatomic) UIView *insideView;
@property (strong, nonatomic) UIView *pageView;
@property (strong, nonatomic) UIView *backPageView;
@property (assign, nonatomic) CGRect cardFrame;

@end

@implementation ViewController

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

  UITouch *touch = [touches anyObject];
  if ([touch locationInView:[self view]].x <= CGRectGetMaxX(_cardFrame)) 

    float dx = ([touch locationInView:[self view]].x - CGRectGetMaxX(_cardFrame)) / _cardFrame.size.width;

    //create perspective
    CATransform3D mt = CATransform3DIdentity;
    mt.m34 = 1.0/-500.;

    //create rotation
    CATransform3D open = CATransform3DMakeRotation( -dx * M_PI_2, 0, - 1, 0);

    //create result transform
    CATransform3D openTransform = CATransform3DConcat(open, mt);

    //apply transforms
    [[_pageView layer] setTransform:openTransform];
    [[_backPageView layer] setTransform:openTransform];
  


- (void)viewDidLoad

  [super viewDidLoad];
  [[self view] setBackgroundColor:[UIColor grayColor]];

  //create frame for 2 test views
  CGFloat size = 200.0;
  _cardFrame = CGRectMake([[self view] center].x - size / 2, [[self view] center].y - size / 2 , size, size);

  //lower view
  _insideView = [[UIView alloc] initWithFrame: _cardFrame];
  [_insideView setBackgroundColor:[UIColor redColor]];

  //upper view
  _pageView = [[UIView alloc] initWithFrame:_cardFrame];
  [_pageView setBackgroundColor:[UIColor greenColor]];

  //upper view back side
  _backPageView = [[UIView alloc] initWithFrame:_cardFrame];
  [_backPageView setBackgroundColor:[UIColor blueColor]];

  [[self view] addSubview:_insideView];
  [[self view] addSubview:_pageView];
  [[self view] insertSubview:_backPageView belowSubview:_pageView];

  //get layer of upper view and set needed property
  CALayer *viewLayer = [_pageView layer];
  CALayer *viewBackLayer = [_backPageView layer];

  [viewLayer setAnchorPoint:(CGPoint)0.0 , 0.5];
  [viewLayer setFrame:_cardFrame];
  [viewLayer setDoubleSided:NO];
  [viewBackLayer setAnchorPoint:(CGPoint)0.0 , 0.5];
  [viewBackLayer setFrame:_cardFrame];

  //create perspective
  CATransform3D mt = CATransform3DIdentity;
  mt.m34 = 1.0/-500.;

  //create rotation
  CATransform3D open = CATransform3DMakeRotation(3 * M_PI_4, 0, - 1, 0);

  //create result transform
  CATransform3D openTransform = CATransform3DConcat(open, mt);

  [UIView animateWithDuration:1.0 animations:^
   
     //close animation
     [viewLayer setTransform:openTransform];
     [viewBackLayer setTransform:openTransform];
    completion:^(BOOL finished)
   
     [UIView animateWithDuration:1.0 animations:^
      
        //close animation
        [viewLayer setTransform:CATransform3DIdentity];
        [viewBackLayer setTransform:CATransform3DIdentity];
      ];
   ];


@end

【讨论】：

@ankyy 您需要制作正确的图层层次结构（UIView 可以包含超过 1 个图层）。例如：layer 将包含页面内部的镜像，以及sublayer（添加到layer） - 外部正常图像。作为替代方案：使用两个 UIView（第一个高于第二个使用 insertSubview:aboveSubview: 或 insertSubview: belowSubview:）同步动画并包含不同的图像。

@ankyy 您可以添加手势或使用touchesBegan:、touchesMoved: 和touchesEnded: 方法来处理触摸或同时使用这两种方法。在touchesMoved:可以获取当前位置和之前的触摸位置，用于页面变换角度计算。

不幸的是，在这些计算中，很大程度上取决于对象的位置。唯一可以绑定的东西 - 坐标边缘种类，它相对于 page 旋转。当触摸的 X 轴坐标和边缘相同时，这对应于 90 度的旋转。如果触摸X轴坐标上的坐标比边缘-角度小于90度，如果触摸X轴坐标上的坐标小于边缘-角度大于90度。需要三角学知识来对齐旋转角度和移动触摸。

@ankyy 我正在更改答案中的代码。现在您可以看到如何使用“卡片”进行用户交互以及如何制作不同的“页面”面。这不是一个完美的例子 - 但它的目的只是为了展示解决问题的可能方法。

@ankyy 如果我理解您需要的问题，请使用touchesBegan: 或touchesEnded:（第二个首选）。检查触摸位置使用CGRectContainsPoint (rect_of_page, point_of_touch )。