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];
CGPoint topLeftCurveStart = CGPointMake(drawingPadding, floor(CGRectGetHeight(rect) / 2.4));
[heartPath addQuadCurveToPoint:topLeftCurveStart controlPoint:CGPointMake(topLeftCurveStart.x, topLeftCurveStart.y + curveRadius)];
[heartPath addArcWithCenter:CGPointMake(topLeftCurveStart.x + curveRadius, topLeftCurveStart.y) radius:curveRadius startAngle:M_PI endAngle:0 clockwise:YES];
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];
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];
}
点赞的爱心图形不是图片,而是通过贝塞尔曲线画的。
动画效果
NSTimeInterval totalAinmationDuration = 6;
CGFloat heartSize = CGRectGetWidth(self.bounds);
CGFloat heartCenterX = self.center.x;
CGFloat viewHeight = CGRectGetHeight(view.bounds);
self.transform = CGAffineTransformMakeScale(0, 0);
self.alpha = 0;
[UIView animateWithDuration:0.5
delay:0.0
usingSpringWithDamping:0.6
initialSpringVelocity:0.8
options:UIViewAnimationOptionCurveEaseOut
animations:^{
self.transform = CGAffineTransformIdentity;
self.alpha = 0.9;
}
completion:NULL];
NSInteger i = arc4random_uniform(2);
NSInteger rotationDirection = 1 - (2*i);
NSInteger rotationFraction = arc4random_uniform(10);
[UIView animateWithDuration:totalAinmationDuration animations:^{
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));
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);
[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…