iOS 动画
来源:互联网 发布:js 组合式继承 编辑:程序博客网 时间:2024/05/17 22:22
iOS UIView动画 和 CALayer动画
iOS4之前如果想要做动画, 必须放在开始动画和提交动画中间, 而 iOS4之后使用基于 Block 的动画效果
//开始动画[UIView beginAnimations:nil context:nil];//1. 设置动画持续时间 -- 以秒为单位[UIView setAnimationDuration:2];//默认0.2秒//2. 设置动画代理 -- 但不需要服从协议[UIView setAnimationDelegate:self];//3. 设置动画结束后会触发的方法[UIView setAnimationDidStopSelector:@selector(handleDidStopAnimation)];//4. 设置动画延迟的时间 -- 以秒为单位[UIView setAnimationDelay:0];//5. 设置动画从当前状态发生变化[UIView 色图AnimationBeginsFromCurrentState:NO];//6. 设置动画是否反转[UIView setAnimationRepeatAutoreverses:YES];//7. 设置动画重复次数[UIView setAnimationRepeatCount:10];//0和1时效果相同//8. 设置动画变化的曲线[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];/*对相关的属性进行设置*///提交动画[UIView commitAnimations];
1. UIView动画
UIView 中能够做动画的属性有: frame, center, bounds, alpha, transform, backgroundColor.
对 UIView 视图属性的更改是有效地, 最终会对视图作出修改
一 Block 动画效果
1 . 最简单的 Block 动画
[UIView animateWithDuration:4 animations:^{ //center -- 视图位置 CGPoint center = self.redView.center; center.y += 350; self.redView.center = center; //alpha -- 透明度 self.redView.alpha = 0.2; //transform -- 旋转和缩放 self.redView.transform = CGAffineTransformRotate(self.redView.transform, 1); self.redView.transform = CGAffineTransformScale(self.redView.transform, 0.25, 0.25); }];
2 . 可以检测到动画结束的 Block 动画
[UIView animateWithDuration:4 animations:^{ //center -- 视图位置 CGPoint center = self.redView.center; center.y += 200; self.redView.center = center; //alpha -- 透明度 self.redView.alpha = 0.2; //transform -- 旋转和缩放 self.redView.transform = CGAffineTransformRotate(self.redView.transform, 1); self.redView.transform = CGAffineTransformScale(self.redView.transform, 0.25, 0.25); } completion:^(BOOL finished) { [self handleDidStopAnimation]; }];
3 . 在第二种 block 动画的基础上还可以配置多个参数
[UIView animateWithDuration:4 delay:1 options:UIViewAnimationOptionAutoreverse animations:^{ //center -- 视图位置 CGPoint center = self.redView.center; center.y += 200; self.redView.center = center; //alpha -- 透明度 self.redView.alpha = 0.2; //transform -- 旋转和缩放 self.redView.transform = CGAffineTransformRotate(self.redView.transform, 1); self.redView.transform = CGAffineTransformScale(self.redView.transform, 0.25, 0.25); } completion:^(BOOL finished) { [self handleDidStopAnimation]; }];
4 . 弹簧效果
//参数分别是: 持续时间, 延迟时间,弹簧强度(0.0~1.0), 开始变化速度, 动画效果参数, 动画代码(Block), 结束代码(Block)[UIView animateWithDuration:4 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseInOut animations:^{ //更改 BounceButton 属性 //center -- 视图位置 CGPoint center = self.effectBtn.center; center.y += 50; self.effectBtn.center = center; //transform -- 旋转和缩放 self.effectBtn.transform = CGAffineTransformScale(self.effectBtn.transform, 1.2, 1.2); } completion:nil];
二 过渡动画(界面间过渡)
1 . 只产生动画效果, 界面没有切换
[UIView transitionWithView:self.redView duration:4 options:UIViewAnimationOptionTransitionCurlUp animations:^{ self.redView.transform = CGAffineTransformRotate(self.redView.transform, M_PI_2);//M_PT_2 旋转90° M_PI_4 旋转45° self.redView.backgroundColor = [UIColor blueColor]; } completion:nil];
2 . 从一个视图切换到另外一个视图
[UIView transitionFromView:self.redView toView:self.yellowView duration:1 options:UIViewAnimationOptionTransitionCurlDown completion:^(BOOL finished) { //改变指针指向 UIView *tempView = [self.redView retain]; self.redView = self.yellowView; self.yellowView = tempView; [tempView release]; }];
2. UIView动画和 CALayer动画的区别
UIView 和 CALayer 的区别 :
UIView 其实是 CALayer 层的简单封装, 真正来绘制显示内容的还是 CALayer, 每一个视图对象都会有一个 layer 属性可以访问到自己层的 layer 层, UIView 只是简单的封装了常用的属性, 不常用的属性还得设置 CALayer
CALayer 层的相关属性设置都是在某视图下的 layer 层下进行配置的.
3. CALayer动画
1 . CALayer 属性动画(基本属性动画)
//keypath : 要做动画的属性名CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"opacity"];//opacity : 透明度//变化的开始值basic.fromValue = @(1.0);//变化的结束值basic.toValue = @(0.2);//设置持续时间basic.duration = 2;//设置重复次数basic.repeatCount = 1000;//添加到视图的 layer 层[self.redView.layer addAnimation:basic forKey:nil];
2 . CALayer 属性动画(关键帧动画)
CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"]; CGPoint point1 = self.cloudView.center; CGPoint point2 = CGPointMake([UIScreen mainScreen].bounds.size.width / 2, self.cloudView.bounds.size.height / 2); CGPoint point3 = CGPointMake([UIScreen mainScreen].bounds.size.width - self.cloudView.bounds.size.width / 2, self.cloudView.frame.origin.y); keyFrame.values = @[[NSValue valueWithCGPoint:point1], [NSValue valueWithCGPoint:point2], [NSValue valueWithCGPoint:point3]]; //设置持续时间 keyFrame.duration = 10; //次数 keyFrame.repeatCount = 10; //添加到视图的 layer 层 [self.cloudView.layer addAnimation:keyFrame forKey:nil];
3 . CALayer 过渡动画
CATransition *transition = [CATransition animation]; //配置过渡动画类型 transition.type = @"rippleEffect"; //配置过渡动画方向// transition.subtype = kCATransitionFromLeft; //添加 [self.view.layer addAnimation:transition forKey:nil];
4 . CALayer 分组动画
//1. 关键帧动画 -- 沿圆形规矩移动 CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animationWithKeyPath:@"position"]; //绘制半圆路径 CGFloat r = [UIScreen mainScreen].bounds.size.height / 2; UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.balloonView.center.x, r) radius:r startAngle:-(M_PI_2) endAngle:M_PI_2 clockwise:YES]; //关键帧动画给上圆形轨迹 keyframe.path = path.CGPath;//让贝塞尔曲线作为移动轨迹 //时间 keyframe.duration = 10; //2. 关键帧动画 -- 气球缩放 CAKeyframeAnimation *keyframeBalloon = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"]; keyframeBalloon.values = @[@(1.0), @(1.2), @(1.4), @(1.6), @(1.8), @(2.0), @(1.8), @(1.6), @(1.4), @(1.2), @(1.0)]; keyframeBalloon.duration = 10; //3. 创建分组动画 CAAnimationGroup *group = [CAAnimationGroup animation]; group.animations = @[keyframe, keyframeBalloon]; group.duration = 10; group.repeatCount = 1000; [self.balloonView.layer addAnimation:group forKey:nil];
注意 : 关于过渡效果, 过渡方向
/* 过渡效果 fade //交叉淡化过渡(不支持过渡方向) kCATransitionFade push //新视图把旧视图推出去 kCATransitionPush moveIn //新视图移到旧视图上面 kCATransitionMoveIn reveal //将旧视图移开,显示下面的新视图 kCATransitionReveal cube //立方体翻滚效果 oglFlip //上下左右翻转效果 suckEffect //收缩效果,如一块布被抽走(不支持过渡方向) rippleEffect //滴水效果(不支持过渡方向) pageCurl //向上翻页效果 pageUnCurl //向下翻页效果 cameraIrisHollowOpen //相机镜头打开效果(不支持过渡方向) cameraIrisHollowClose //相机镜头关上效果(不支持过渡方向)*//* 过渡方向 kCATransitionFromRight kCATransitionFromLeft kCATransitionFromBottom*/
0 0
- iOS动画 核心动画
- iOS动画 UIView动画
- iOS动画 CATransition动画
- iOS 动画 UIView动画
- iOS动画-基础动画
- ios 动画
- IOS动画
- Ios 动画
- ios动画
- IOS 动画
- iOS动画
- ios动画
- ios动画
- iOS动画
- iOS 动画
- ios 动画
- iOS 动画
- iOS 动画
- Android之封装支付宝支付
- json解析数据 再讲数据转化成json
- CodeForces 412D Giving Awards
- RCP handler配置enableWhen,activeWhen
- 九.SQL server 事务、锁与游标问题
- iOS 动画
- java中最容易用错的关系运算符==
- ARM_s5pv210_arm_7(下)
- 中级动态规划训练(1)
- 基于maven和hudson打造持续集成环境
- SQLServer 编写存储过程或是脚本文件时,有时会遇到的一个错误
- c#委托
- 树的路径覆盖(路径的数目和节点度间的关系)
- MongoDB MapReduce 用法