ios - 如何使用从 Facebook Origami 导出的 iOS 代码？

Question

各位动画专家您好!

我偶然发现了 Facebook 的 Origami，它使用他们的 iOS Pop 库。

Origami Examples

所有教程(在他们的网站上以及其他任何地方的在线教程)似乎都专注于掌握它的 Quartz Composer 方面。我对如何获取导出的代码很感兴趣(单击 QC 中的折纸图标并选择导出 iOS 代码。) 进入我的 iOS 应用。

所以我开始下载“2D Waggle”示例:2D Waggle Example

导出的代码如下所示:

#import "ViewController.h"
#import <POP/POP.h>
#import <POP/POPLayerExtras.h>

@interface ViewController ()
@property (nonatomic) CGFloat popAnimationProgress;
@property (nonatomic) CGFloat popAnimationProgress;
@end

@implementation ViewController

// popAnimation transition

- (void)togglePopAnimation:(BOOL)on {
  POPSpringAnimation *animation = [self pop_animationForKey:@"popAnimation"];

  if (!animation) {
    animation = [POPSpringAnimation animation];
    animation.springBounciness = 5;
    animation.springSpeed = 10;
    animation.property = [POPAnimatableProperty propertyWithName:@"popAnimationProgress" initializer:^(POPMutableAnimatableProperty *prop) {
      prop.readBlock = ^(ViewController *obj, CGFloat values[]) {
        values[0] = obj.popAnimationProgress;
      };
      prop.writeBlock = ^(ViewController *obj, const CGFloat values[]) {
        obj.popAnimationProgress = values[0];
      };
      prop.threshold = 0.001;
    }];

    [self pop_addAnimation:animation forKey:@"popAnimation"];
  }

  animation.toValue = on ? @(1.0) : @(0.0);
}

- (void)setPopAnimationProgress:(CGFloat)progress {
    _popAnimationProgress = progress;
    POPLayerSetTranslationX(self.layer.layer, POPPixelsToPoints(progress));
}

// popAnimation transition

- (void)togglePopAnimation:(BOOL)on {
  POPSpringAnimation *animation = [self pop_animationForKey:@"popAnimation"];

  if (!animation) {
    animation = [POPSpringAnimation animation];
    animation.springBounciness = 5;
    animation.springSpeed = 10;
    animation.property = [POPAnimatableProperty propertyWithName:@"popAnimationProgress" initializer:^(POPMutableAnimatableProperty *prop) {
      prop.readBlock = ^(ViewController *obj, CGFloat values[]) {
        values[0] = obj.popAnimationProgress;
      };
      prop.writeBlock = ^(ViewController *obj, const CGFloat values[]) {
        obj.popAnimationProgress = values[0];
      };
      prop.threshold = 0.001;
    }];

    [self pop_addAnimation:animation forKey:@"popAnimation"];
  }

  animation.toValue = on ? @(1.0) : @(0.0);
}

- (void)setPopAnimationProgress:(CGFloat)progress {
    _popAnimationProgress = progress;
    POPLayerSetTranslationY(self.layer.layer, POPPixelsToPoints(-progress));
}

// Utilities

static inline CGFloat POPPixelsToPoints(CGFloat pixels) {
    static CGFloat scale = -1;
    if (scale < 0) {
        scale = [UIScreen mainScreen].scale;
    }
    return pixels / scale;
}

这是我尝试用来与生成的东西交互的代码:

-(void)awakeFromNib
{
    UIPanGestureRecognizer* pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(move:)];
    [self addGestureRecognizer:pan];
}


static float firstX=0,firstY=0;



-(void)move:(id)sender {
    [self bringSubviewToFront:[(UIPanGestureRecognizer*)sender view]];
    CGPoint translatedPoint = [(UIPanGestureRecognizer*)sender translationInView:self];

    if ([(UIPanGestureRecognizer*)sender state] == UIGestureRecognizerStateBegan) {
        firstX = [[sender view] center].x;
        firstY = [[sender view] center].y;

        [self togglePopAnimationX:YES];
        [self togglePopAnimationY:YES];
    }
    else    if ([(UIPanGestureRecognizer*)sender state] == UIGestureRecognizerStateEnded) {
        [self togglePopAnimationX:NO];
        [self togglePopAnimationY:NO];
    }



    translatedPoint = CGPointMake(firstX+translatedPoint.x, firstY+translatedPoint.y);

    //

    if ([(UIPanGestureRecognizer*)sender state] == UIGestureRecognizerStateChanged) {

        POPLayerSetTranslationX(self.layer, translatedPoint.x);
        POPLayerSetTranslationY(self.layer, translatedPoint.y);
        //[[sender view] setCenter:translatedPoint];
    }
}

我只想说，这行不通:(

所以我想我的问题是如何启动动画？

我想做的是在 QC Origami 中模拟“滑动”输入补丁(见屏幕截图)

如果有人对我做错了什么以及如何正确调用动画有任何想法，我将不胜感激。

非常感谢!

Answer 1

关键是命名屏幕截图中的每个框/动画/设置，使其具有自己的 objectName，这样您就知道它指的是哪个 CA 层。然后，在导出代码时，每个 popAnimation 都会有一个特定的名称并应用于特定的对象。

例子: 而不是

@property (nonatomic) CGFloat popAnimationProgress;
self.layer.layer

你会看到

@property (nonatomic) CGFloat popAnimationProgress_Object1;
self.object2.layer