高仿摩拜单车我的贴纸效果

昨天在看摩拜单车APP时发现了一个有趣的地方，如下图。多个小球可以随手机的晃动而滚动，并有碰撞的效果，很有趣，我昨天玩这个玩了半个小时😄，玩的过程中大概想到了实现思路，仿真动画+重力感应。但是在仿真动画这一点存在一个疑惑，我在很早的时候写过一个模拟牛顿摆的demo，但是因为view都是矩形的，所以看起来碰撞的过程很不自然，这个问题当时并没有得到解决。今天我在尝试使用这个思路做的时候，我想到系统可能提供有解决的方法，于是我进入到碰撞<code>UICollisionBehavior</code>的头文件中去查找，并没有找到我想要的方法，然后我又到<code>UIDynamicItem</code>协议中，发现了这个方法：<code>@property (nonatomic, readonly) UIDynamicItemCollisionBoundsType collisionBoundsType NS_AVAILABLE_IOS(9_0);</code>，这是一个枚举值，用来定义碰撞的边界类型，有矩形，椭圆和path，其中<code> UIDynamicItemCollisionBoundsTypePath </code>对应的是这个方法

<code> @property (nonatomic, readonly) UIBezierPath *collisionBoundingPath NS_AVAILABLE_IOS(9_0); </code>

typedef NS_ENUM(NSUInteger, UIDynamicItemCollisionBoundsType) {
    UIDynamicItemCollisionBoundsTypeRectangle,
    UIDynamicItemCollisionBoundsTypeEllipse, // radii will be determined from the items bounds width, height
    UIDynamicItemCollisionBoundsTypePath
} NS_ENUM_AVAILABLE_IOS(9_0);

这样就需要自定义一个view，并实现协议方法：

- (UIDynamicItemCollisionBoundsType)collisionBoundsType {
    return UIDynamicItemCollisionBoundsTypeEllipse;
}

摩拜单车-我的贴纸

代码如下

@property (strong, nonatomic) UIDynamicAnimator *animator;

@property (strong, nonatomic) UIGravityBehavior *gravity;

@property (strong, nonatomic) UICollisionBehavior *collision;

@property (strong, nonatomic) UIDynamicItemBehavior *itemBehavior;

@property (strong, nonatomic) CMMotionManager *motionManager;

_animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];
    
    NSInteger count = 35;
    CGFloat itemW = 30;
    NSMutableArray <UIView *>* items = [NSMutableArray array];
    for (NSInteger i = 0; i < count; i ++) {
        CGFloat X = i % 10 * itemW;
        CGFloat Y = 200 + (35 + i / 10);
        
        YYView *view = [[YYView alloc] initWithFrame:CGRectMake(X, Y, itemW, itemW)];
        view.layer.cornerRadius = itemW / 2;
        view.layer.borderWidth = 1;
        view.layer.borderColor = UIColor.lightGrayColor.CGColor;
        view.layer.masksToBounds = YES;
        [self.view addSubview:view];
        
        [items addObject:view];
    }
    _gravity = [[UIGravityBehavior alloc] initWithItems:items];
    [_animator addBehavior:_gravity];
    
    _collision = [[UICollisionBehavior alloc] initWithItems:items];
    [_collision addBoundaryWithIdentifier:@"view" forPath:[UIBezierPath bezierPathWithRect:[UIScreen mainScreen].bounds]];
    [_animator addBehavior:_collision];
    
_itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:items];
    _itemBehavior.elasticity = 0.5;
    _itemBehavior.allowsRotation = YES;
    [_animator addBehavior:_itemBehavior];
    
    _motionManager = [[CMMotionManager alloc] init];
    
    if (_motionManager.deviceMotionAvailable) {
        NSOperationQueue *queue = [[NSOperationQueue alloc] init];
        
        [_motionManager startDeviceMotionUpdatesToQueue:queue withHandler:^(CMDeviceMotion * _Nullable motion, NSError * _Nullable error) {
            if (!error) {
                dispatch_async(dispatch_get_main_queue(), ^{
                    _gravity.gravityDirection = CGVectorMake(motion.gravity.x, -motion.gravity.y);
                });
            }
        }];
    }else{
        NSLog(@"deviceMotion不可用");
    }

- (IBAction)addButtonClick:(UIButton *)sender {
    NSInteger count = 10;
    CGFloat itemW = 30;
    
    for (NSInteger i = 0; i < count; i ++) {
        CGFloat X = i % 10 * itemW;
        CGFloat Y = (35 + i / 10);
        
        YYView *view = [[YYView alloc] initWithFrame:CGRectMake(X, Y, itemW, itemW)];
        view.layer.cornerRadius = itemW / 2;
        view.layer.borderWidth = 1;
        view.layer.borderColor = UIColor.lightGrayColor.CGColor;
        view.layer.masksToBounds = YES;
        [self.view insertSubview:view belowSubview:_funcView];
        
        [_collision addItem:view];
        [_gravity addItem:view];
        [_itemBehavior addItem:view];
    }
    
}

在模拟器上无法使用重力感应，此处进行简单模拟

#if TARGET_IPHONE_SIMULATOR

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    CGVector ve0 = CGVectorMake(0, 1);
    CGVector ve1 = CGVectorMake(1, 0);
    CGVector ve2 = CGVectorMake(0, -1);
    CGVector ve3 = CGVectorMake(-1, 0);
    if (CGVectorEqualToVector(_gravity.gravityDirection, ve0)) {
        _gravity.gravityDirection = ve1;
    } else if (CGVectorEqualToVector(_gravity.gravityDirection, ve1)) {
        _gravity.gravityDirection = ve2;
    } else if (CGVectorEqualToVector(_gravity.gravityDirection, ve2)) {
        _gravity.gravityDirection = ve3;
    } else if (CGVectorEqualToVector(_gravity.gravityDirection, ve3)) {
        _gravity.gravityDirection = ve0;
    }
}

NS_INLINE BOOL CGVectorEqualToVector(CGVector vector0, CGVector vector1) {
    return (vector0.dx == vector1.dx) && (vector0.dy == vector1.dy);
}

#endif

效果图

effect.gif