ios隐性动画

原创
2015/07/15 15:34
阅读数 193

CAKeyframeAnimation->CAPropertyAnimation->CAAnimation 继承关系

CABasicAnimation->CAPropertyAnimation->CAAnimation 继承关系

示例动画(从某一点移动到另一点)

- (CAKeyframeAnimation *)getMoveAnimation:(CGPoint)tpoint fromPoint:(CGPoint)fpoint index:(int)index {
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    // 设定动画起始帧和结束帧
    animation.calculationMode = kCAAnimationPaced;
    animation.fillMode = kCAFillModeForwards; //当动画结束后,layer会一直保持着动画最后的状态.
    animation.removedOnCompletion = NO;       //当动画结束后,是否保留显示隐性层
    animation.repeatCount = 0;                //重复次数,无限使用INFINITY
    animation.delegate = self;
    [animation setValue:@(index) forKey:@"AnimationViewIndex"];
    
    float d = sqrtf ((fpoint.x-tpoint.x)*(fpoint.x-tpoint.x)+(fpoint.y-tpoint.y)*(fpoint.y-tpoint.y));
    animation.duration = d/500;               //所用时间
    
    CGMutablePathRef curvedPath = CGPathCreateMutable();
    CGPathMoveToPoint(curvedPath, 0, fpoint.x, fpoint.y);
    CGPathAddLineToPoint(curvedPath, 0, tpoint.x, tpoint.y);
    animation.path = curvedPath;
    CGPathRelease(curvedPath);

    return animation;
}
caleculatuinMode:
    kCAAnimationLinear calculationMode的默认值,表示当关键帧为座标点的时候,关键帧之间直接直线相连进行插值计算;
    
kCAAnimationDiscrete 离散的,就是不进行插值计算,所有关键帧直接逐个进行显示; 
    
kCAAnimationPaced 使得动画均匀进行,而不是按keyTimes设置的或者按关键帧平分时间,此时keyTimes和timingFunctions无效; 
    
kCAAnimationCubic 对关键帧为座标点的关键帧进行圆滑曲线相连后插值计算,这里的主要目的是使得运行的轨迹变得圆滑;
    kCAAnimationCubicPaced 看这个名字就知道和kCAAnimationCubic有一定联系,其实就是在kCAAnimationCubic的基础上使得动画运行变得均匀,就是系统时间内运动的距离相同,此时keyTimes以及timingFunctions也是无效的.
fillMode:
    kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
.
    kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态.
    
kCAFillModeBackwards 在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始. 你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态 

    kCAFillModeBoth 这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状
@interface NSObject (CAAnimationDelegate)

/* Called when the animation begins its active duration. */

- (void)animationDidStart:(CAAnimation *)anim;

/* Called when the animation either completes its active duration or
 * is removed from the object it is attached to (i.e. the layer). 'flag'
 * is true if the animation reached the end of its active duration
 * without being removed. */

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

@end

动画开始和结束都会有delegate回调,具体回调内容可以使用setvalue的方式带参过去!

[animation setValue:@(index) forKey:@"AnimationViewIndex"];

另外可以通过下面函数来画出想要的行动轨迹。

CGPathMoveToPoint、CGPathAddLineToPoint、CGPathAddArc、CGPathAddRect

------------------------------------凌乱的分割线----------------------------------------

如果你只是想简单的移动某点到某点的话,可以使用CABasicAnimation能更简单点

- (CABasicAnimation *)getMoveAnimation:(CGPoint)tpoint fromPoint:(CGPoint)fpoint index:(int)index type:(NSString *)type {
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    // 设定动画起始帧和结束帧
    animation.fromValue = [NSValue valueWithCGPoint:fpoint]; // 起始点
    animation.toValue = [NSValue valueWithCGPoint:tpoint];   // 终点
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    animation.repeatCount = 0;
    animation.delegate = self;
    [animation setValue:@(index) forKey:@"AnimationViewIndex"];
    [animation setValue:type forKey:@"AnimationKeyType"];
    
    float d = sqrtf ((fpoint.x-tpoint.x)*(fpoint.x-tpoint.x)+(fpoint.y-tpoint.y)*(fpoint.y-tpoint.y));
    animation.duration = d/500;
    return animation;
}
 速度控制函数(CAMediaTimingFunction)
    1> kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉
    2> kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开
    3> kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地
    4> kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。        这个是默认的动画行为。

移动简单的移动外还有启动的动画,只需要修改keyPath值就行

@"position":位置移动
@"transform.scale":缩放
@"transform.rotation.x":x轴旋转
@"transform.rotation.y":y轴旋转
@"transform.rotation.z":z轴旋转
默认以layer中心为圆心,可以通过下面方式修改
[yourView.layer setAnchorPoint:CGPointMake(0.5, 0.5)];

组合动画

/* 动画组 */
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.delegate = self;
    group.duration = 5.0;
    group.repeatCount = 1;
 
    // 动画结束后不变回初始状态
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
 
    // 添加动画
    group.animations = [NSArray arrayWithObjects:animation1, animation2, nil];
    [imageView.layer addAnimation:group forKey:@"move-rotate-layer"];

------------------------------------凌乱的分割线----------------------------------------

加贝塞尔曲线运动

 CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        
 positionAnimation.calculationMode = kCAAnimationPaced;
 positionAnimation.fillMode = kCAFillModeForwards;
 positionAnimation.removedOnCompletion = NO;
 positionAnimation.repeatCount = 0;

 CGMutablePathRef curvedPath = CGPathCreateMutable();
 UIBezierPath *cutePath = [UIBezierPath bezierPath];
 [cutePath moveToPoint:fpoint];
 [cutePath addCurveToPoint:tpoint controlPoint1:point1 controlPoint2:point2]; //贝塞尔曲线
 CGPathAddPath(curvedPath, 0, cutePath.CGPath);
 positionAnimation.path = curvedPath;
 CGPathRelease(curvedPath);


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部