研究CAKeyframeAnimation和贝塞尔曲线以及数学函

2017-04-25  本文已影响208人  26b5cc676194

效果演示:

bubble.gif

原理图分析:


Snip20161212_1.png

代码片段演示:
x1 = _view_R1.center.x;
y1 = _view_R1.center.y;
x2 = self.view_R2.center.x;
y2 = self.view_R2.center.y;
/*
* 两个圆心之间的距离
/
d_R1_R2 = sqrtf((x2-x1)
(x2-x1) + (y2-y1)*(y2-y1));

if (d_R1_R2 == 0) {
    _cosθ = 1;
    _sinθ = 0;
}else{
    _cosθ = (y2-y1)/d_R1_R2;
    _sinθ = (x2-x1)/d_R1_R2;
}
/*
 * 圆一的半径和手指移动距离有关   
 */
r1 = oldBackViewFrame.size.width / 2 - d_R1_R2/self.viscosity;

point_A = CGPointMake(x1-r1*_cosθ, y1+r1*_sinθ);  // A
point_B = CGPointMake(x1+r1*_cosθ, y1-r1*_sinθ);  // B
point_C = CGPointMake(x2+r2*_cosθ, y2-r2*_sinθ);  // C
point_D = CGPointMake(x2-r2*_cosθ, y2+r2*_sinθ);  // D

point_O = CGPointMake(point_A.x + (d_R1_R2 / 2)*_sinθ, point_A.y + (d_R1_R2 / 2)*_cosθ);
point_P = CGPointMake(point_B.x + (d_R1_R2 / 2)*_sinθ, point_B.y + (d_R1_R2 / 2)*_cosθ);

_view_R1.center = _point_oldBackViewCenter;
_view_R1.bounds = CGRectMake(0, 0, r1*2, r1*2);
_view_R1.layer.cornerRadius = r1;

/*
 * A->O->D->C->P->B-A
 */
bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint:point_A];
[bezierPath addQuadCurveToPoint:point_D controlPoint:point_O];
[bezierPath addLineToPoint:point_C];
[bezierPath addQuadCurveToPoint:point_B controlPoint:point_P];
[bezierPath moveToPoint:point_A];

NO.2->BK下拉刷新的小球动画
效果演示:

运用CAKeyframeAnimation以及CABasicAnimation完成
代码片段演示:
/*

CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = keypath;
//    animation.repeatCount=MAXFLOAT;
animation.repeatCount=1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.duration = duration;
animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.delegate=self;
animation.values =
[self transform_basicAnimationValues:fromValue toValue:toValue duration:duration];
return animation;

}

/*

依次调用。
如果喜欢,欢迎下载:https://git.oschina.net/VanCamp/BKLoading

上一篇 下一篇

猜你喜欢

热点阅读