CABasicAnimation-自定义动画

项目中涉及到一个动画,之前对动画很头疼,感觉很难。然后百度+百度,算是了解了一点点。现在写点心得,希望对你有帮助。

CABasicAnimation类的使用方式就是基本的关键帧动画。
所谓关键帧动画,就是将Layer的属性作为KeyPath来注册,指定动画的起始帧和结束帧,然后自动计算和实现中间的过渡动画的一种动画方式。

CABasicAnimation的基本使用顺序
1.引用QuartzCore.framework
将"QuartzCore.framework"这个库添加到项目中。并且在需要使用CABaseAnimation类的地方import头文件。项目需求,有时可能还需要引入"UIKit/UIKit"。

#import 
#import 

2.CABaseAnimation的实例化以及关键路径的注册
使用"animationWithKeyPath:"方法进行CABasicAnimation的实例化,并指定Layer的属性作为关键路径来注册。

// 指定strokeEnd属性
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

3.设定动画
设定动画的属性,一般常用的。
duration:动画时长
repeatCount:重复次数
fromValue:开始值
toValue:结束值
autoreverses:动画结束时是否执行逆动画
4.实例

#import 

#import 

#import 

@interface AnimationLineTool : NSObject

/**
 *  通过设置点,划其运动轨迹
 *
 *  @param pointA 点A
 *  @param pointB 点B
 *  @param pointC 点C
 *  @param view   当前哪个View
 */
+ (void)moveA:(CGPoint)pointA andMoveB:(CGPoint)pointB andMoveC:(CGPoint)pointC andView:(UIView *)view;


/**
 *  放大的动画
 *
 *  @param view 添加到哪个view
 */
+(void)circleScaleAndZoomInView:(UIView *)view;


/**
 *  移动速度的动画
 *
 *  @param fromValue 开始点
 *  @param toValue   结束点
 *  @param duration  运行时间
 *  @return 速度轨迹
 */
+ (CABasicAnimation *)animationSpeedViewWithFromValue:(id)fromValue andToValue:(id)toValue andTimeDuration:(int)duration;
@end

#import "AnimationLineTool.h"

@implementation AnimationLineTool

+ (void)moveA:(CGPoint)pointA andMoveB:(CGPoint)pointB andMoveC:(CGPoint)pointC andView:(UIView *)view{
    CAShapeLayer *linePath = [CAShapeLayer layer];
    linePath=[CAShapeLayer layer];
    linePath.lineCap=kCALineCapRound;
    linePath.lineJoin=kCALineJoinBevel;
    linePath.lineWidth=1;
    linePath.fillColor=[UIColor clearColor].CGColor;
    [view.layer addSublayer:linePath];
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 0.7;
    path.lineCapStyle = kCGLineCapRound;//线条拐角
    path.lineJoinStyle = kCGLineCapRound;//线条终点
    
    [path moveToPoint:pointA];
    [path addLineToPoint:pointB];
    [path addLineToPoint:pointC];
    
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 0.5;
    pathAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    pathAnimation.fromValue=[NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue=[NSNumber numberWithFloat:1.0f];
    pathAnimation.autoreverses=NO;
    linePath.path=path.CGPath;
    //线条颜色
    linePath.strokeColor=[UIColor orangeColor].CGColor;
    [linePath addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
    linePath.strokeEnd = 1.0;
}

+(void)circleScaleAndZoomInView:(UIView *)view{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    //动画持续时间
    animation.duration = 0.3;
    // 动画结束时执行逆动画
    animation.autoreverses = NO;
    // 开始时的倍率
    animation.fromValue = [NSNumber numberWithFloat:-0.5];
    // 结束时的倍率
    animation.toValue = [NSNumber numberWithFloat:-1.0];
    // 添加动画
    [view.layer addAnimation:animation forKey:@"scale-layer"];
}

+ (CABasicAnimation *)animationSpeedViewWithFromValue:(id)fromValue andToValue:(id)toValue andTimeDuration:(int)duration
{
    CABasicAnimation *animation2 = [CABasicAnimation animation];
    animation2.keyPath = @"position.x";
    animation2.fromValue = fromValue;
    animation2.toValue = toValue;
    animation2.duration = duration;
    //两个view的运动速率
    animation2.timingFunction    = [CAMediaTimingFunction functionWithControlPoints:0 :0.7:0 :0.7];
    animation2.fillMode = kCAFillModeForwards;
    animation2.removedOnCompletion = NO;
    
    return animation2;
}

@end

这是项目中,写的一个连续动画类。你可以参照或者修改用来满足你的需求。

CABasicAnimation-自定义动画_第1张图片

调用上面的类方法,可以实现上边的动画。具体实现可以自己尝试写一下,注意把握延迟时间的控制。已写好DEMO,上传GitHub, 下载地址。内含上边的动画,还有闪烁,移动,缩放旋转,组合动画,线的运动轨迹。里边的布局可能涉及到PureLayout,具体可以参考另一篇文章 PureLayout的使用方法。

你可能感兴趣的:(CABasicAnimation-自定义动画)