研究CAKeyframeAnimation和贝塞尔曲线以及数学函数的结合,用纯代码完成BK下拉刷新的小球动画和气泡链式回弹效果

效果演示:

研究CAKeyframeAnimation和贝塞尔曲线以及数学函数的结合,用纯代码完成BK下拉刷新的小球动画和气泡链式回弹效果_第1张图片
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 *)transform_Anima:(NSString *)keypath
    duration:(CFTimeInterval)duration
    fromValue:(id)fromValue
    toValue:(id)toValue{
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;

}

/*

  • 小球旋转
    */
  • (CAKeyframeAnimation *)spin_Anima:(NSString *)keypath
    duration:(CFTimeInterval)duration{

    CAKeyframeAnimation orbit = [CAKeyframeAnimation animation];
    orbit.keyPath = keypath;
    orbit.path = CFAutorelease(CGPathCreateWithEllipseInRect(CGRectMake(0, 0, 1, 1), NULL));
    orbit.duration = duration;
    orbit.additive = YES;
    // orbit.delegate=self;
    // orbit.repeatCount = HUGE_VALF;
    orbit.repeatCount = 3;
    orbit.calculationMode = kCAAnimationPaced;
    orbit.rotationMode = kCAAnimationRotateAuto;
    return orbit;
    }
    /

  • 小球下降
    */
  • (CAKeyframeAnimation *)down_Anima:(NSString *)keypath
    duration:(CFTimeInterval)duration
    fromValue:(id)fromValue
    toValue:(id)toValue{
    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 down_basicAnimationValues:fromValue toValue:toValue duration:duration];
    return animation;
    }
    动画连动的实现:
    将动画组放进数组_marr_anim_imgV,然后在代理方法{- (void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag}里:
    [_imgV.layer addAnimation:[_marr_anim_imgV objectAtIndex:0] forKey:nil];
    [_view_shadow.layer addAnimation:[_marr_anim_shadow objectAtIndex:0] forKey:nil];
    [_marr_anim_imgV removeObjectAtIndex:0];
    [_marr_anim_shadow removeObjectAtIndex:0];

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

你可能感兴趣的:(研究CAKeyframeAnimation和贝塞尔曲线以及数学函数的结合,用纯代码完成BK下拉刷新的小球动画和气泡链式回弹效果)