【iOS开发系列】简单动画效果

最新推荐文章于 2022-08-14 20:57:17 发布

付国良丶

最新推荐文章于 2022-08-14 20:57:17 发布

阅读量858

点赞数 1

分类专栏： iOS 文章标签：动画 animation iOS

本文链接：https://blog.csdn.net/u013457022/article/details/47019879

版权

iOS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

CABasicAnimation 自己只有三个property

fromValue toValue ByValue

当你创建一个 CABasicAnimation 时,你需要通过-setFromValue 和-setToValue 来指定一个开始值和结束值。当你增加基础动画到层中的时候,它开始运行。当用属性做动画完成时,例如用位置属性做动画,层就会立刻返回到它的初始位置 .

记住当你做动画时,你至少使用了 2 个对象。这些对象都是层本身,一个层或者层继承的对象,和在先前的例子中你分配给层的 CABasicAnimation 对象。因为你给动画对象设定了最后的值(目的地),但是并不意味着当动画完成的时候,层的属性就改变成了最后的值。当动画完成时,你必须显示的设定层的属性,这样动画结束后,你的层才能真正的到你设定的属性值上。

你可以简单的停止动画到你结束的点上,但是这仅仅是一个视觉效果。层实际的值仍然是一样的。要真的改变内部的值,就像刚才所说的你必须显示的设定那个属性。例如,显示的设定位置的属性,你需要在层中调用-setPosition 方法。但是,这会造成一点问题。

如果你通过-set 这个方法显示的设定了层属性的值,那么默认的动画将被执行,而非之前你设定的动画。注意到了,我们使用 position 已经创建了基础动画,但是我们在层上显示的调用了-setPosition 方法,就覆盖了我们设定的动画,使我们设定的基础动画完全没用了。如果你使用了这个代码,你会看到虽然我们的层结束的时候放到了正确的位置,但是它使用的是默认的 0.25 秒,而非我们在动画里显示设定的 5 秒钟。

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
[animation setFromValue:[NSValue valueWithPoint:startPoint]];
[animation setToValue:[NSValue valueWithPoint:endPoint]];
[animation setDuration:5.0];
[layer setPosition:endpoint];
[layer addAnimation:animation forKey:nil];

因此现在问题出来了,你怎么能使用我们设定的动画呢?注意到 forKey:这个参数是被设定为 nil。这就是为什么动画不能覆盖默认动画的原因。如果你改变最后一行为[layer addAnimation:animation forKey:@"position"],动画将会按照我们设定的时间工作。这告诉了层当需要做动画时, 使用我们给关键路径指定的新动画。

下面是一些继承的有用的属性

Autoreverses

当你设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到开始的值。

Duration
Duration 这个参数你已经相当熟悉了。它设定开始值到结束值花费的时间。期间会被速度的属性所影响。 RemovedOnCompletion 这个属性默认为 YES,那意味着,在指定的时间段完成后,动画就自动的从层上移除了。这个一般不用。假如你想要再次用这个动画时,你需要设定这个属性为 NO。这样的话,下次你在通过-set 方法设定动画的属性时,它将再次使用你的动画,而非默认的动画。

Speed

默认的值为 1.0.这意味着动画播放按照默认的速度。如果你改变这个值为 2.0,动画会用 2 倍的速度播放。这样的影响就是使持续时间减半。如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟---一半的持续时间。

BeginTime

这个属性在组动画中很有用。它根据父动画组的持续时间,指定了开始播放动画的时间。默认的是 0.0.组动画在下个段落中讨论“Animation Grouping”。

TimeOffset

如果一个时间偏移量是被设定,动画不会真正的可见,直到根据父动画组中的执行时间得到的时间都流逝了。

RepeatCount

默认的是 0,意味着动画只会播放一次。如果指定一个无限大的重复次数,使用 1e100f。这个不应该和 repeatDration 属性一块使用。

RepeatDuration

这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间流逝完。它不应该和 repeatCount 一起使用。

下面这段英文摘自苹果官方文档，说的是fromValue toValue ByValue 怎么使用

/* The interpolation values are used as follows: */
/**
  *  Both fromValue and toValue are non-nil. Interpolates between fromValue and toValue.
  *  fromValue and byValue are non-nil. Interpolates between fromValue and (fromValue + byValue).
  *  byValue and toValue are non-nil. Interpolates between (toValue - byValue) and toValue.
  *  fromValue is non-nil. Interpolates between fromValue and the current presentation value of the property.
  *  toValue is non-nil. Interpolates between the current value of keyPath in the target layer’s presentation layer andtoValue.
  *  byValue is non-nil. Interpolates between the current value of keyPath in the target layer’s presentation layer and that value
  *  plus byValue.
  *  All properties are nil. Interpolates between the previous value of keyPath in the target layer’s presentation layer and the
  * current value of keyPath in the target layer’s presentation layer.
  */

/*--------------------------------------------------
 *  其他的方法,还是属性等，都是继承而来的。
 *  我们可以通过animationWithKeyPath键值对的方式来改变动画。
 ----------------------------------------------------*/

/* animationWithKeyPath的值 */
transform.scale         // 比例转换
transform.scale.x       // 宽度比例转换
transform.scale.y       // 高度比例转换
transform.rotation.z    // 平面图的转换


margin          // 边缘
zPosition       // z轴位置
backgroundColor // 背景颜色
cornerRadius    // 圆角
borderWidth     // 边框宽度
bounds          // 边界
contents        // 内容
contentsRect    // 内容矩形
frame           // 框架
hidden          // 隐藏的
mask            // 面具
masksToBounds   // 面具界限
opacity         // 透明度
position        // 位置
shadowColor     // 阴影颜色
shadowOffset    // 阴影偏移
shadowOpacity   // 阴影不透明
shadowRadius    // 阴影半径

下面是一些例子：

/**
 *  transform.scale 比例缩放
 */
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
animation.duration = 0.5 + (rand() % 10) * 0.05;
animation.repeatCount = 1;
animation.autoreverses = YES;
animation.fromValue = [NSNumber numberWithFloat:.8];
animation.toValue = [NSNumber numberWithFloat:1.2];
[self.ui_View.layer addAnimation:animation forKey:nil];


/**
 *  bounds 边界
 */
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds"];
animation.duration = 1.f;
animation.fromValue = [NSValue valueWithCGRect:CGRectMake(0,0,10,10)];
animation.toValue = [NSValue valueWithCGRect:CGRectMake(10,10,200,200)];
animation.byValue  = [NSValue valueWithCGRect:self. ui_View.bounds];
// anim.toValue = (id)[UIColor redColor].CGColor;
// anim.fromValue = (id)[UIColor blackColor].CGColor;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = 1;
animation.autoreverses = YES;
[ui_View.layer addAnimation:animation forKey:nil];


/**
 *  cornerRadius 圆弧半径
 */
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
animation.duration = 1.f;
animation.fromValue = [NSNumber numberWithFloat:0.f];
animation.toValue = [NSNumber numberWithFloat:20.f];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = CGFLOAT_MAX;
animation.autoreverses = YES;
[ui_View.layer addAnimation:animation forKey:@"cornerRadius"];


/**
 *  contents 内容
 */
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"contents"];
animation.duration = 1.f;
animation.fromValue = (id)[UIImage imageNamed:@"1.jpg"].CGImage;
animation.toValue = (id)[UIImage imageNamed:@"2.png"].CGImage;
// animation.byValue  = (id)[UIImage imageNamed:@"3.png"].CGImage;
// animation.toValue = (id)[UIColor redColor].CGColor;
// animation.fromValue =  (id)[UIColor blackColor].CGColor;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = CGFLOAT_MAX;
animation.autoreverses = YES;
[ui_View.layer addAnimation:animation forKey:nil];
[ui_View.layer setShadowOffset:CGSizeMake(2,2)];
[ui_View.layer setShadowOpacity:1];
[ui_View.layer setShadowColor:[UIColor grayColor].CGColor];


/**
 *  shadowColor 阴影颜色
 */
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"shadowColor"];
animation.duration = 1.f;
animation.toValue = (id)[UIColor redColor].CGColor;
animation.fromValue =  (id)[UIColor blackColor].CGColor;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = CGFLOAT_MAX;
animation.autoreverses = YES;
[ui_View.layer addAnimation:animation forKey:nil];


/**
 *  shadowOffset 阴影偏移
 */
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"shadowOffset"];
animation.duration = 1.f;
animation.fromValue = [NSValue valueWithCGSize:CGSizeMake(0,0)];
animation.toValue = [NSValue valueWithCGSize:CGSizeMake(3,3)];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = CGFLOAT_MAX;
animation.autoreverses = YES;
[ui_View.layer addAnimation:animation forKey:nil];


/**
 *  shadowOpacity 阴影不透明
 */
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"shadowOpacity"];
animation.duration = 1.f;
animation.fromValue = [NSNumber numberWithFloat:0.5];
animation.toValue = [NSNumber numberWithFloat:1];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = CGFLOAT_MAX;
animation.autoreverses = YES;
[ui_View.layer addAnimation:animation forKey:nil];


/**
 *  shadowRadius 阴影半径
 */
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"shadowRadius"];
animation.duration = 1.f;
animation.fromValue = [NSNumber numberWithFloat:10];
animation.toValue = [NSNumber numberWithFloat:5];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.repeatCount = CGFLOAT_MAX;
animation.autoreverses = YES;
[ui_View.layer addAnimation:animation forKey:nil];

下面是一些应用

/**
 *  永久闪烁的动画
 */
+(CABasicAnimation *)opacityForever_Animation:(float)time

{
    
    CALayer *scaleLayer = [[CALayer alloc] init];
    scaleLayer.backgroundColor = [UIColor redColor].CGColor;
    scaleLayer.frame = CGRectMake(60, 20 + kYOffset, 50, 50);
    scaleLayer.cornerRadius = 10;
    
    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"opacity"];
    
    animation.fromValue=[NSNumber numberWithFloat:1.0];
    
    animation.toValue=[NSNumber numberWithFloat:0.0];
    
    animation.autoreverses=YES;
    
    animation.duration=time;
    
    animation.repeatCount=FLT_MAX;
    
    animation.removedOnCompletion=NO;
    
    animation.fillMode=kCAFillModeForwards;
    
    return animation;
    
}


/**
 *  有闪烁次数的动画
 */
+(CABasicAnimation *)opacityTimes_Animation:(float)repeatTimes durTimes:(float)time;

{
    
    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"opacity"];
    
    animation.fromValue=[NSNumber numberWithFloat:1.0];
    
    animation.toValue=[NSNumber numberWithFloat:0.4];
    
    animation.repeatCount=repeatTimes;
    
    animation.duration=time;
    
    animation.removedOnCompletion=NO;
    
    animation.fillMode=kCAFillModeForwards;
    
    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    
    animation.autoreverses=YES;
    
    return  animation;
    
}


/**
 *  横向移动
 */
+(CABasicAnimation *)moveX:(float)time X:(NSNumber *)x

{
    
    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
    
    animation.toValue=x;
    
    animation.duration=time;
    
    animation.removedOnCompletion=NO;
    
    animation.fillMode=kCAFillModeForwards;
    
    return animation;
    
}


/**
 *  纵向移动
 */
+(CABasicAnimation *)moveY:(float)time Y:(NSNumber *)y

{
    
    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
    
    animation.toValue=y;
    
    animation.duration=time;
    
    animation.removedOnCompletion=NO;
    
    animation.fillMode=kCAFillModeForwards;
    
    return animation;
    
}


/**
 *  缩放
 */
+(CABasicAnimation *)scale:(NSNumber *)Multiple orgin:(NSNumber *)orginMultiple durTimes:(float)time Rep:(float)repeatTimes

{
    
    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.scale"];
    
    animation.fromValue=orginMultiple;
    
    animation.toValue=Multiple;
    
    animation.duration=time;
    
    animation.autoreverses=YES;
    
    animation.repeatCount=repeatTimes;
    
    animation.removedOnCompletion=NO;
    
    animation.fillMode=kCAFillModeForwards;
    
    return animation;
    
}


/**
 *  组合动画
 */
+(CAAnimationGroup *)groupAnimation:(NSArray *)animationAry durTimes:(float)time Rep:(float)repeatTimes

{
    
    CAAnimationGroup *animation=[CAAnimationGroup animation];
    
    animation.animations=animationAry;
    
    animation.duration=time;
    
    animation.repeatCount=repeatTimes;
    
    animation.removedOnCompletion=NO;
    
    animation.fillMode=kCAFillModeForwards;
    
    return animation;
    
}


/**
 *  路径动画
 */
+(CAKeyframeAnimation *)keyframeAniamtion:(CGMutablePathRef)path durTimes:(float)time Rep:(float)repeatTimes

{
    
    CAKeyframeAnimation *animation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    animation.path=path;
    
    animation.removedOnCompletion=NO;
    
    animation.fillMode=kCAFillModeForwards;
    
    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    
    animation.autoreverses=NO;
    
    animation.duration=time;
    
    animation.repeatCount=repeatTimes;
    
    return animation;
    
}


/**
 *  点移动
 */
+(CABasicAnimation *)movepoint:(CGPoint )point

{
    
    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation"];
    
    animation.toValue=[NSValue valueWithCGPoint:point];
    
    animation.removedOnCompletion=NO;
    
    animation.fillMode=kCAFillModeForwards;
    
    return animation;
    
}


/**
 *  旋转
 */
+(CABasicAnimation *)rotation:(float)dur degree:(float)degree direction:(int)direction repeatCount:(int)repeatCount

{
    
    CATransform3D rotationTransform  = CATransform3DMakeRotation(degree, 0, 0,direction);
    
    CABasicAnimation* animation;
    
    animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    
    animation.toValue= [NSValue valueWithCATransform3D:rotationTransform];
    
    animation.duration= dur;
    
    animation.autoreverses= NO;
    
    animation.cumulative= YES;
    
    animation.removedOnCompletion=NO;
    
    animation.fillMode=kCAFillModeForwards;
    
    animation.repeatCount= repeatCount;
    
    animation.delegate= self;
    
    return animation;
    
}

付国良丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【iOS开发系列】简单动画效果

CABasicAnimation 自己只有三个property fromValue toValue ByValue当你创建一个 CABasicAnimation 时,你需要通过-setFromValue 和-setToValue 来指定一个开始值和结束值。当你增加基础动画到层中的时候,它开始运行。当用属性做动画完成时,例如用位置属性做动画,层就会立刻返回
复制链接

扫一扫