项目中涉及到一个动画,之前对动画很头疼,感觉很难。然后百度+百度,算是了解了一点点。现在写点心得,希望对你有帮助。
CABasicAnimation类的使用方式就是基本的关键帧动画。
所谓关键帧动画,就是将Layer的属性作为KeyPath来注册,指定动画的起始帧和结束帧,然后自动计算和实现中间的过渡动画的一种动画方式。
CABasicAnimation的基本使用顺序
1.引用QuartzCore.framework
将"QuartzCore.framework"这个库添加到项目中。并且在需要使用CABaseAnimation类的地方import头文件。项目需求,有时可能还需要引入"UIKit/UIKit"。
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
2.CABaseAnimation的实例化以及关键路径的注册
使用"animationWithKeyPath:"方法进行CABasicAnimation的实例化,并指定Layer的属性作为关键路径来注册。
// 指定strokeEnd属性
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
3.设定动画
设定动画的属性,一般常用的。
duration:动画时长
repeatCount:重复次数
fromValue:开始值
toValue:结束值
autoreverses:动画结束时是否执行逆动画
4.实例
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
@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
这是项目中,写的一个连续动画类。你可以参照或者修改用来满足你的需求。
调用上面的类方法,可以实现上边的动画。具体实现可以自己尝试写一下,注意把握延迟时间的控制。已写好DEMO,上传GitHub,下载地址。内含上边的动画,还有闪烁,移动,缩放旋转,组合动画,线的运动轨迹。里边的布局可能涉及到PureLayout,具体可以参考另一篇文章PureLayout的使用方法。