LiveThumbView

今年的App行業，應該就是直播軟體最火了。但凡是一個社交App，直播功能似乎已經是最基礎的功能了。 這個只是一個點讚的小功能，並不是全部的直播

愛心圖形

-(void)drawHeartInRect:(CGRect)rect{
    [self.strokeColor setStroke];
    [self.fillColor setFill];
    
    CGFloat drawingPadding = 4.0;
    CGFloat curveRadius = floor((CGRectGetWidth(rect) - 2*drawingPadding) / 4.0);
    
    //貝賽爾曲線
    UIBezierPath *heartPath = [UIBezierPath bezierPath];
    //愛心的最底部的定點
    CGPoint tipLocation =  CGPointMake(floor(CGRectGetWidth(rect) / 2.0), CGRectGetHeight(rect) - drawingPadding);
    //曲線的起點
    [heartPath moveToPoint:tipLocation];
    
    //Move to top left start of curve
    CGPoint topLeftCurveStart = CGPointMake(drawingPadding, floor(CGRectGetHeight(rect) / 2.4));
    
    [heartPath addQuadCurveToPoint:topLeftCurveStart controlPoint:CGPointMake(topLeftCurveStart.x, topLeftCurveStart.y + curveRadius)];
    
    //Create top left curve
    [heartPath addArcWithCenter:CGPointMake(topLeftCurveStart.x + curveRadius, topLeftCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];
    
    //Create top right curve
    CGPoint topRightCurveStart = CGPointMake(topLeftCurveStart.x + 2*curveRadius, topLeftCurveStart.y);
    [heartPath addArcWithCenter:CGPointMake(topRightCurveStart.x + curveRadius, topRightCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];
    
    //Final curve to bottom heart tip
    CGPoint topRightCurveEnd = CGPointMake(topLeftCurveStart.x + 4*curveRadius, topRightCurveStart.y);
    [heartPath addQuadCurveToPoint:tipLocation controlPoint:CGPointMake(topRightCurveEnd.x, topRightCurveEnd.y + curveRadius)];
    
    [heartPath fill];
    
    heartPath.lineWidth = 1;
    heartPath.lineCapStyle = kCGLineCapRound;
    heartPath.lineJoinStyle = kCGLineCapRound;
    [heartPath stroke];
}

複製程式碼

點讚的愛心圖形不是圖片，而是通過貝塞爾曲線畫的。

動畫效果

//動畫時間持續6秒
    NSTimeInterval totalAinmationDuration = 6;
    
    CGFloat heartSize = CGRectGetWidth(self.bounds);
    CGFloat heartCenterX = self.center.x;
    CGFloat viewHeight = CGRectGetHeight(view.bounds);
    
    //動畫開始前的準備,設定透明度為0，僅通過設定縮放比例就可實現檢視撲面而來和縮排頻幕的效果。
    self.transform = CGAffineTransformMakeScale(0, 0);
    self.alpha = 0;
    
    //動畫開始
    
    [UIView animateWithDuration:0.5      //動畫時長
                          delay:0.0      //延遲時間
         usingSpringWithDamping:0.6      //dampingRatio （阻尼係數）範圍 0~1 當它設定為1時，動畫是平滑的沒有振動的達到靜止狀態，越接近0 振動越大
          initialSpringVelocity:0.8      //velocity （彈性速率）
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^{
                         //每次變換前都要置位，不然你變換用的座標系統不是螢幕座標系統（即絕對座標系統），而是上一次變換後的座標系統
                         self.transform = CGAffineTransformIdentity;
                         self.alpha = 0.9;
    }
                     completion:NULL];
    //rotationDirection的賦值只會是1 or -1
    NSInteger i = arc4random_uniform(2);
    NSInteger rotationDirection = 1 - (2*i);
    NSInteger rotationFraction = arc4random_uniform(10);
    
    [UIView animateWithDuration:totalAinmationDuration animations:^{
        //CGAffineTransformMakeRotation(CGFloat angle)（旋轉:設定旋轉角度)
        self.transform = CGAffineTransformMakeRotation(rotationDirection * M_PI/(16 + rotationFraction*0.2));
    }completion:NULL];
    
    //貝賽爾曲線
    UIBezierPath *heartTravelPath = [UIBezierPath bezierPath];
    //設定起始位置
    [heartTravelPath moveToPoint:self.center];
    //設定結束的位置的點
    CGPoint endPoint = CGPointMake(heartCenterX + (rotationDirection) * arc4random_uniform(2*heartSize), viewHeight/6.0 + arc4random_uniform(viewHeight/4.0));
    //travelDirection = 1 or -1
    NSInteger j = arc4random_uniform(2);
    NSInteger travelDirection = 1- (2*j);
    
    CGFloat xDelta = (heartSize/2.0 + arc4random_uniform(2*heartSize)) * travelDirection;
    CGFloat yDelta = MAX(endPoint.y ,MAX(arc4random_uniform(8*heartSize), heartSize));
    CGPoint controlPoint1 = CGPointMake(heartCenterX + xDelta, viewHeight - yDelta);
    CGPoint controlPoint2 = CGPointMake(heartCenterX - 2*xDelta, yDelta);
    
    //繪製一個s形狀的貝賽爾曲線，
    [heartTravelPath addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
    
    
    //關鍵幀動畫
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    keyFrameAnimation.path = heartTravelPath.CGPath;
    //動畫的一種方式
    keyFrameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    //動畫時長
    keyFrameAnimation.duration = totalAinmationDuration + endPoint.y/viewHeight;
    //新增動畫
    [self.layer addAnimation:keyFrameAnimation forKey:@"positionOnPath"];
    
    [UIView animateWithDuration:totalAinmationDuration animations:^{
        self.alpha = 0.0;
    } completion:^(BOOL finished) {
        [self removeFromSuperview];
    }];
複製程式碼

建立方式

    ThumbView* heart = [[ThumbView alloc]initWithFrame:CGRectMake(0, 0, 36, 36)];
    [self.view addSubview:heart];
    CGPoint fountainSource = CGPointMake(36 + 36/2.0, self.view.bounds.size.height - 36/2.0 - 10);
    heart.center = fountainSource;
    [heart thumbINView:self.view];
複製程式碼

效果

傳送門

github.com/cAibDe/Live…