iOS仿ofo小黄人动态效果

故事

最新版的ofo小黄人的动态效果简直帅爆了O(∩_∩)O哈哈~为ofo公司的码农、产品、UI点个赞，做为一个一线码农当然关注这个功能是怎么实现的，随后研究了下贴上自己的Demo传送门

思路

• 基于CoreMotion这个框架通过重力感应传感器(加速计、陀螺仪、磁力计还有其他可自行研究)传回iOS设备x、y、z三个方向的数据改变，然后重新计算小黄人眼睛的center值即可实现该效果。
• 本Demo使用的是Accelerometer加速计实现的，各位大神有其他的方法欢迎留言贴图。
• Demo必须真机调试才有用。

核心代码

• MinionsEyesView文件

- (void)updateAccelerometer
{
    self.motionManager = [[CMMotionManager alloc] init];
    //加速计可用
    if (self.motionManager.isAccelerometerAvailable) {
        //设置更新时间
        self.motionManager.accelerometerUpdateInterval = 0.01;
        [self.motionManager startAccelerometerUpdatesToQueue:[NSOperationQueue mainQueue] withHandler:^(CMAccelerometerData * _Nullable accelerometerData, NSError * _Nullable error) {
            CMAcceleration acceleration = accelerometerData.acceleration;
            //NSLog(@"x:%f+++y:%f+++z:%f",acceleration.x,acceleration.y,acceleration.z);
            if (!error) {
                CGFloat x = self.eyeImageView.center.x + acceleration.x * self.velocity;
                CGFloat y = self.eyeImageView.center.y + acceleration.y * self.velocity;
                if (x < self.eyeImageView.width / 2) {
                    x = self.eyeImageView.width / 2;
                }else if (x > self.width - self.eyeImageView.width / 2){
                    x = self.width - self.eyeImageView.width / 2;
                }
                
                if (y < self.eyeImageView.height / 2) {
                    y = self.eyeImageView.height / 2;
                }else if (y > self.height - self.eyeImageView.height / 2)
                {
                    y = self.height - self.eyeImageView.height / 2;
                }
                self.eyeImageView.center = CGPointMake(x, y);
            }
            
            CGFloat r = self.width /2 - self.eyeImageView.width /2;
            CGPoint center = CGPointMake(self.width /2, self.height/2);
            CGPoint currentPoint = self.eyeImageView.center;
            CGFloat x = 0;
            CGFloat y = 0;
            //斜边
            CGFloat c = sqrt(pow(center.x - currentPoint.x, 2) + pow(currentPoint.y - center.y, 2));
            if (c > r) {
                //邻边
                CGFloat b = fabs(r * (center.x - currentPoint.x) / c);
                //对边
                CGFloat a = fabs(r * (currentPoint.y - center.y) / c);
                if (currentPoint.x > center.x) {
                    x = center.x + b;
                }else {
                    x = center.x - b;
                }
                if (currentPoint.y > center.y) {
                    y = center.y + a;
                }else {
                    y = center.y - a;
                }
                self.eyeImageView.center = CGPointMake(x, y);
            }
        }];
    }
}

一开始在限制眼睛活动范围花了点时间，已知eye的center点和self.center可求出两点的距离再利用余弦和正弦分别求出邻边和对边的值，即可算出eye最适合范围。

• 注意eye的中心点和self.center两点之间的距离始终小于或者上面的半径r，这个轨迹是最适合eye的运动轨迹。

• 感兴趣的朋友可下载我的Github-Demo研究下

• 感兴趣的朋友可以试试陀螺仪实现，如果实现了可以共享出来O(∩_∩)O哈哈~

• 有问题的朋友请联系我的QQ578545715或者留言，我会第一时间回复