iOS动画和特效(一)UIView动画和CoreAnimation
来源:互联网 发布:武汉有哪些出版社知乎 编辑:程序博客网 时间:2024/04/30 03:22
UIView的方法中有几个易用的静态方法可以做出动画效果,分别是UIView.beginAnimations() -> UIView.commitAnimations() 和UIView.animateWithDuration()方法 我们以一个UIView,每点击一次向右移动100,变色,加速运动这个简单的动效作为例子。
使用UIView.beginAnimations() -> UIView.commitAnimations()实现
//开始动画配置 UIView.beginAnimations("view1Animation", context: nil) //运动时间 UIView.setAnimationDuration(0.2) //设置运动开始和结束的委托 animationDidStart and animationDidStop UIView.setAnimationDelegate(self) /* 缓动方式 EaseInOut // slow at beginning and end EaseIn // slow at beginning EaseOut // slow at end Linear */ UIView.setAnimationCurve(.EaseIn) //位置运动 theView.frame = CGRect(x: theView.frame.origin.x+100, y: theView.frame.origin.y, width: theView.frame.size.width, height: theView.frame.height) //颜色渐变 theView.backgroundColor = UIColor.greenColor() //透明度渐变 theView.alpha = 0.5 //动画开始 UIView.commitAnimations()
使用更简单的和UIView.animateWithDuration()实现
UIView.animateWithDuration(0.2, delay: 0.5, options: UIViewAnimationOptions.CurveEaseIn, animations: { () -> Void in //位置运动 theView.frame = CGRect(x: theView.frame.origin.x+100, y: theView.frame.origin.y, width: theView.frame.size.width, height: theView.frame.height) //颜色渐变 theView.backgroundColor = UIColor.greenColor() //透明度渐变 theView.alpha = 0.5 }) { (isCompletion) -> Void in NSLog("completion") }
animateWithDuration的方法有4个从载方法,参数不同,根据需要调用。其中最后一个代理一个阻尼系数和回弹系数,使用他可以做出更加逼真的运动效果
//usingSpringWithDamping 阻尼,范围0-1,阻尼越接近于0,弹性效果越明显 UIView.animateWithDuration(0.2, delay: 0, usingSpringWithDamping: 0.9, initialSpringVelocity: 1, options: UIViewAnimationOptions.CurveEaseIn, animations: { () -> Void in theView.frame = CGRect(x: theView.frame.origin.x+100, y: theView.frame.origin.y, width: theView.frame.size.width, height: theView.frame.height) }, completion: nil)
本节介绍的几个方法,已经可以做出许多的简单动画效果了,这说明apple对高级别对象的动画api封装做的很不错。代码见QuickExampleViewController.swift
Core Animation的类图基本动画 CABasicAnimation
还记得上一节简单的动画吗,一个uiview向左平移100,这节我们使用CABasicAnimation实现相同的效果
还记得上一节简单的动画吗,一个uiview向左平移100,这节我们使用CABasicAnimation实现相同的效果
CAAnimation:核心动画的基础类,不能直接使用,负责动画运行时间、速度的控制,本身实现了CAMediaTiming协议。
CAPropertyAnimation:属性动画的基类(通过属性进行动画设置,注意是可动画属性),不能直接使用。
CAAnimationGroup:动画组,动画组是一种组合模式设计,可以通过动画组来进行所有动画行为的统一控制,组中所有动画效果可以并发执行。
CATransition:转场动画,主要通过滤镜进行动画效果设置。
CABasicAnimation:基础动画,通过属性修改进行动画参数控制,只有初始状态和结束状态。
CAKeyframeAnimation:关键帧动画,同样是通过属性进行动画参数控制,但是同基础动画不同的是它可以有多个状态控制。
基本动画 CABasicAnimation
CABasicAnimation实现一个UIView向左平移100
UIView *animView =[UIView new]; animView.backgroundColor = [UIColor redColor]; animView.frame = CGRectMake(self.view.frame.size.width/2, 100, 100, 100); [self.view addSubview:animView]; CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"]; [anim setFromValue:[NSValue valueWithCGPoint:CGPointMake(100, 0)]]; [anim setDuration:0.2]; anim.repeatCount = 1; //这两个属性若不设置,动画执行后回复位 anim.removedOnCompletion = false; anim.fillMode = kCAFillModeForwards; [animView.layer addAnimation:anim forKey:nil];
其他注意几个地方
1:keyPath用于区分BasicAnimation动画类型
/* 可选的KeyPath transform.scale = 比例轉換 transform.scale.x transform.scale.y transform.rotation = 旋轉 transform.rotation.x transform.rotation.y transform.rotation.z transform.translation transform.translation.x transform.translation.y transform.translation.z opacity = 透明度 margin zPosition backgroundColor 背景颜色 cornerRadius 圆角 borderWidth bounds contents contentsRect cornerRadius frame hidden mask masksToBounds opacity position shadowColor shadowOffset shadowOpacity shadowRadius */
2:动画执行后不恢复原位
//这两个属性若不设置,动画执行后回复位baseAnimation.removedOnCompletion = falsebaseAnimation.fillMode = kCAFillModeForwards
CABasicAnimation 组合动画
组合动画就是把一组CABasicAnimation组合使用,我们以组合移动、旋转、缩放特效为例
UIView *animView =[UIView new]; animView.backgroundColor = [UIColor redColor]; animView.frame = CGRectMake(self.view.frame.size.width/2, 100, 100, 100); [self.view addSubview:animView]; CABasicAnimation *leftAnim = [CABasicAnimation animationWithKeyPath:@"position"]; [leftAnim setToValue:[NSValue valueWithCGPoint:CGPointMake(animView.layer.position.x+100, animView.layer.position.y)]]; //x轴旋转动画 CABasicAnimation *xAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"]; [xAnim setByValue:[NSNumber numberWithDouble:M_PI*500]]; xAnim.duration = 1.5; //y轴旋转动画 CABasicAnimation *yAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"]; [yAnim setByValue:[NSNumber numberWithDouble:M_PI*200]]; //缩放动画 CABasicAnimation *sAnim = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; // 动画选项设定 sAnim.autoreverses = YES; //动画结束时执行逆动画 sAnim.fromValue = [NSNumber numberWithDouble:0.1];//开始的倍率 sAnim.toValue = [NSNumber numberWithDouble:1.5];//结束的倍率 CAAnimationGroup *animGroup = [CAAnimationGroup animation]; animGroup.duration = 3.0; animGroup.repeatCount = 1; animGroup.animations = @[xAnim,yAnim,sAnim,leftAnim]; //这两个属性若不设置,动画执行后回复位 animGroup.removedOnCompletion = false; animGroup.fillMode = kCAFillModeForwards; animGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];//加速运动 animGroup.delegate = self; [animView.layer addAnimation:animGroup forKey:nil];
关键帧动画 CAKeyframeAnimation
关键帧动画就是在动画控制过程中开发者指定主要的动画状态,至于各个状态间动画如何进行则由系统自动运算补充(每两个关键帧之间系统形成的动画称为“补间动画”),这种动画的好处就是开发者不用逐个控制每个动画帧,而只要关心几个关键帧的状态即可。
关键帧动画和基本动画也很相似,通过keyPath设置动画类型,才对齐进行一组关键值的设定。数据变化也有2种形式,一种是关键点,一种是路径,比如实例中的按一个贝塞尔弧移动view。
UIView *animView =[UIView new]; animView.backgroundColor = [UIColor redColor]; animView.frame = CGRectMake(self.view.frame.size.width/2, 100, 100, 100); [self.view addSubview:animView]; UIPanGestureRecognizer *tap = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(anim:)]; [animView addGestureRecognizer:tap];
- (void)anim:(UIPanGestureRecognizer *)tap{ CAKeyframeAnimation *keyframeAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"]; //线段的位置移动 // keyframeAnim.values = @[[NSValue valueWithCGPoint:CGPointMake(10, 100)],[NSValue valueWithCGPoint:CGPointMake(30, 100)],[NSValue valueWithCGPoint:CGPointMake(30, 120)],[NSValue valueWithCGPoint:CGPointMake(60, 120)],[NSValue valueWithCGPoint:CGPointMake(60, 100)],[NSValue valueWithCGPoint:CGPointMake(106, 210)],[NSValue valueWithCGPoint:CGPointMake(106, 410)],[NSValue valueWithCGPoint:CGPointMake(300, 310)]]; //弧线位置移动 CGMutablePathRef mutablePath = CGPathCreateMutable(); CGPathMoveToPoint(mutablePath, nil, 50, 50); CGPathAddCurveToPoint(mutablePath, nil, 50, 50, 700, 300, 30, 500); keyframeAnim.path = mutablePath; keyframeAnim.duration = 0.3; [tap.view.layer addAnimation:keyframeAnim forKey:nil];}
关键帧动画其他可以设置的参数
//keyTimes:各个关键帧的时间控制//caculationMode:动画计算模式。kCAAnimationLinear: 线性模式,默认值kCAAnimationDiscrete: 离散模式kCAAnimationPaced:均匀处理,会忽略keyTimeskCAAnimationCubic:平滑执行,对于位置变动关键帧动画运行轨迹更平滑kCAAnimationCubicPaced:平滑均匀执行
转场效果
转场动画就是从一个场景以动画的形式过渡到另一个场景。转场动画的使用一般分为以下几个步骤:
- 创建转场动画
- 设置转场类型、子类型(可选)及其他属性
- 设置转场后的新视图并添加动画到图层
场的效果transfer.type有很多选项,主要选项有
kCATransitionFade:淡入淡出,默认效果kCATransitionMoveIn:新视图移动到就是图上方kCATransitionPush:新视图推开旧视图kCATransitionReveal:移走旧视图然后显示新视图//苹果未公开的私有转场效果cube:立方体suckEffect:吸走的效果oglFlip:前后翻转效果rippleEffect:波纹效果pageCurl:翻页起来pageUnCurl:翻页下来cameraIrisHollowOpen:镜头开cameraIrisHollowClose:镜头关
kCATransitionFromRight:kCATransitionFromLeft:kCATransitionFromTop:kCATransitionFromBottom:
- iOS动画和特效(一)UIView动画和CoreAnimation
- iOS动画和特效(一)UIView动画和CoreAnimation
- iOS动画—UIView动画以及CoreAnimation动画
- iOS 动画 UIView CoreAnimation 回到初始状态
- iOS CoreAnimation动画详解(一)
- iOS动画和特效(三)MotionEffects
- iOS动画和特效(三)MotionEffects
- iOS CoreAnimation动画系列教程(一):CABasicAnimation
- UIView动画和CAAnimation动画
- iOS动画:UIView动画和CALayer动画(CABasicAnimation、CAKeyframeAnimation的使用)
- iOS-UIView属性动画和常用方法
- ios coreAnimation 动画
- iOS动画-CoreAnimation
- iOS CoreAnimation-粒子动画
- CoreAnimation 细说动画(一)
- UIView和UILayer动画
- UIView动画和定时器
- ios中layer动画和UIView动画代码总结
- left join给左表加筛选条件,拼接sql
- maven 依赖查询地址
- java变量的初始化
- PHP数据类型总结
- 【Html】使用下拉列表框进行多选
- iOS动画和特效(一)UIView动画和CoreAnimation
- 好习惯真的很重要!
- LightOJ 1043 - Triangle Partitioning (简单数学)
- 安装phpredis
- Resize a UIImage the right way
- as中apk签名和多渠道打包
- 05_java 封装
- hdoj 1034 Candy Sharing Game
- EL表达式 (详解)