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

2023年6月27日 318次阅读

你好动画专家！

我偶然发现了使用他们的Pop库为iOS的Facebook折纸.

Origami Examples

所有的教程(在他们网站上的其他地方都在线)似乎专注于掌握Quartz Composer方面.我对如何获取导出的代码感兴趣(单击QC中的Origami图标并选择Export iOS code.)
进入我的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中模拟“Swipe”输入补丁(见截图)

如果有人对我做错了什么以及如何正确调用动画有任何想法,我将非常感激.

非常感谢！

最佳答案 关键是将屏幕截图中的每个框/动画/设置命名为拥有自己的objectName,以便您知道它引用的是哪个CA层.然后,在导出代码时,每个popAnimation都将具有特定名称并应用于特定对象.

例：
代替

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

你会看到的

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