UI-动画
- 一丶动画使用场景
1,视图上的过度效果
2,合理利用动画能提高用户体验
分类:CALayer动画->UIView->(UIView的属性动画,UIViewTransition动画,UIView的Block动画)
- 二丶UIView 动画
设置
+ (void)setAnimationDuration:(NSTimeInterval)duration;
运营多次时间
+ (void)setAnimationDelay:(NSTimeInterval)delay; 开始延迟
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve; 速度曲线
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses; 动画反转
+ (void)setAnimationRepeatCount:(float)repeatCount; 动画反转次数(执行多少次)
+ (void)setAnimationDelegate:(id)delegate; 设置动画的代理
+ (void)setAnimationWillStartSelector:(SEL)selector; 动画开始的代理方法
+ (void)setAnimationDidStopSelector:(SEL)selector; 动画结束的代理方法
+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState; 动画从当前状态继续执行
代码:
- //-(void)改变frame 的动画
//开始动画
[UIView beginAnimations:@"frame" context:nil];
//设置延迟时间
[UIView setAnimationDuration:5];
//反复执行N次
[UIView setAnimationRepeatCount:2];
//设置代理,执行另一个动画
[UIView setAnimationDelegate:self];
// [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];
//动画反转 (五种)
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:_backImage cache:YES];
//设置属性
_backImage.frame = CGRectMake(10, 10, 50, 50);
_backImage.alpha = 0.1; //改变透明度
// _backImage.hidden = YES;
//结束
[UIView commitAnimations];
- //旋转动画
[UIView beginAnimations:@"rotation" context:nil];
[UIView setAnimationDuration:5];
// _backImage.transform = CGAffineTransformMakeRotation(M);
//连续旋转
// _backImage.transform = CGAffineTransformRotate(_backImage.transform, M_PI_2);
//改变中心点
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];//移动速度 in,out inout
_backImage.center = CGPointMake(50, 50);
[UIView commitAnimations];
}
- //使用Block实现动画
[UIView animateWithDuration:1 animations:^{
// [UIView beginAnimations:@"1" context:nil]; //使用Bloc,不需要开始和提交
//动画内容
_backImage.center = CGPointMake(200, 200);
}];
}
[UIView animateWithDuration:3 delay:0.5 usingSpringWithDamping:0.05 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
_backImage.center = CGPointMake(200, 300);
//移动视图 动画效果
- (IBAction)transtionAnimation:(id)sender {
[UIView beginAnimations:nil context:nil];
[UIView transitionFromView:aView toView:bView duration:2 options:UIViewAnimationOptionTransitionFlipFromBottom completion:nil];
}
//回弹效果 参数3:回弹效果0-1.0,值大,效果弱 参数4:刷新视图像素比例[UIView animateWithDuration:3 delay:0.5 usingSpringWithDamping:0.05 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
_backImage.center = CGPointMake(200, 300);
}completion:nil];
- (IBAction)transtionAnimation:(id)sender {
[UIView beginAnimations:nil context:nil];
[UIView transitionFromView:aView toView:bView duration:2 options:UIViewAnimationOptionTransitionFlipFromBottom completion:nil];
- 三丶CALayer(图层)
layer绘制,提供View 展示的内容,是只读属性
view显示
cornerRadius 圆角
shadowColor 阴影颜色
shadowOpacity 阴影透明度
shadowOffset 阴影偏移距离
shadowRadius 阴影模糊程度
shadowPath
borderColor 描边颜色
borderWidth 描边粗细
anchorPoint 锚点
position 位置信息
zPosition 层级顺序
描点,position,父视图的点
frame.x = position - 描点*width frame.y = position - 描点*heigh
//自己的图层 改变自己, 修改自己的图层 CALayer *lager = _backImage.layer;
lager.cornerRadius = 50;
lager.borderWidth = 5;
lager.borderColor = [UIColor grayColor].CGColor;
lager.masksToBounds = YES;
修改外部
//layer
CALayer *subLayer = [CALayer layer];
subLayer.frame = CGRectMake(0, 0, 280, 280);
subLayer.cornerRadius = 100;
subLayer.borderWidth = 5;//layer
CALayer *subLayer = [CALayer layer];
subLayer.frame = CGRectMake(0, 0, 280, 280);
subLayer.cornerRadius = 100;
// subLayer.masksToBounds = YES;
subLayer.borderColor = [UIColor redColor].CGColor;
subLayer.backgroundColor = [UIColor blackColor].CGColor;
subLayer.opacity = 0.5;
[_backImage.layer addSublayer:subLayer];
- 四丶CAAnimation动画
子类
//渐变- (IBAction)frameButton:(id)sender {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
//从....开始变 最小
[animation setFromValue:[NSValue valueWithCGSize:CGSizeMake(1, 1)]];
//结束 同样BackImage 大小
[animation setToValue:[NSValue valueWithCGSize:self.backImage.bounds.size]];
animation.duration = 10; //动画时间
[self.backImage.layer addAnimation:animation forKey:nil];
}
- (IBAction)keyFrameButton:(id)sender {
//背景颜色
// CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
// NSArray *colorArray = @[(id)[UIColor blackColor].CGColor,(id)[UIColor grayColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor cyanColor].CGColor,(id)[UIColor redColor].CGColor];
// animation.values = colorArray;
// animation.duration = 4;
// _backImage.layer.opacity = 1;
// [self.view.layer addAnimation:animation forKey:nil];
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//点的 位移 CGPoint结构体 转为对象 valueWithCGPoint
NSArray *positionArray = @[[NSValue valueWithCGPoint:CGPointMake(20, 20)],[NSValue valueWithCGPoint:CGPointMake(40, 60)],[NSValue valueWithCGPoint:CGPointMake(60, 80)],[NSValue valueWithCGPoint:CGPointMake(80, 120)],[NSValue valueWithCGPoint:CGPointMake(120, 120)],[NSValue valueWithCGPoint:CGPointMake(120, 150)],[NSValue valueWithCGPoint:CGPointMake(120, 200)]];
animation.values = positionArray;
animation.duration = 5;
[self.backImage.layer addAnimation:animation forKey:nil];
- 五丶CGAffineTransform 2D 仿射变换
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(_backImage.layer.transform, M_PI, 1, 1, 1)];
animation.duration = 5.0;
[self.backImage.layer addAnimation:animation forKey:nil];
}
/私有API 无法上线APP Store
- (IBAction)transButton:(id)sender
{//transition动画和前面的类不一样 注意观察
//1,创建一个 动画
CATransition *transition = [CATransition animation];
//2,指定动画类型,先看一个私有API的使用 私有API就记住一个立方体变化,这个需要查一下 一些固定字符串
transition.type = @"suckEffect";
//3,指定动画的过度类型
transition.subtype = kCATransitionFromRight;
//添加动画
[self.backImage.layer addAnimation:transition forKey:nil];
/*
以下API效果可以安全使用
cube 方块
suckEffect 三角
rippleEffect 水波抖动
pageCurl 上翻页
pageUnCurl 下翻页
oglFlip 上下翻转
cameraIrisHollowOpen 镜头快门开
cameraIrisHollowClose 镜头快门开
以下API效果可以安全使用
cube 方块
suckEffect 三角
rippleEffect 水波抖动
pageCurl 上翻页
pageUnCurl 下翻页
oglFlip 上下翻转
cameraIrisHollowOpen 镜头快门开
cameraIrisHollowClose 镜头快门开
*/
版权声明:本文为博主原创文章,未经博主允许不得转载。