【动画1】UIView动画
来源:互联网 发布:windows pe系统是什么 编辑:程序博客网 时间:2024/04/29 11:19
讲一下动画。将分为以下5篇博客。
一)UIView动画
二)Layer动画
三)3D动画
四)转场动画
五)第三方动画框架
相关代码:https://github.com/dolacmeng/AnimationDemo
参考资料:iOS Animations by Tutorials
一)UIView动画
一、UIKit之UIView动画
UIKit给我们封装了动画函数,即UIView动画,使用起来非常方便:
[UIView animateWithDuration:2.0 animations:^{ CGPoint point = CGPointMake(viewA.center.x+self.view.bounds.size.width, viewA.center.y); viewA.center = point;//viewA移动到屏幕point的位置}];
这个方法只需要2个参数,animateWithDuration:动画持续时间 , animations:动画block。 第一个参数显而易见,现在介绍下animations参数:
1、改变位置和大小
我们可以在animations block中设置view的位置和大小属性来实现放大、缩小、移动等动画效果,即可以设置下面这些属性:
(1).bounds:改变view中的内容
(2).frame:移动view或改变view大小
(3).center:移动view
[UIView animateWithDuration:2.0 animations:^{ viewB.frame = CGRectMake(self.view.bounds.size.width, viewB.frame.origin.y+100, 2, 2);//向x轴正方向移动100个单位 }];
2、改变外观
可以以渐变动画的方式改变view的背景色、透明度:
(1).backgroundColor:通过改变这个属性实现背景色渐变效果
(2).alpha:通过这个属性来实现渐显和淡出的效果
[UIView animateWithDuration:5.0 animations:^{ view.backgroundColor = [UIColor purpleColor];//颜色渐变为紫色 view.alpha = 0.0;//逐渐变为透明}];
二、为了达到更多效果,UIKit提供了另一个方法:
[UIView animateWithDuration:2.0 delay:1.0 options:0 animations:^{ CGPoint point = CGPointMake(view.center.x+self.view.bounds.size.width, view.center.y); view.center = point;} completion:nil];
这个方法和上面第一个方法类似,只是多了几个用来设置动画的参数:
duration:动画持续时间
delay:动画开始前延时时间
options:动画效果集合,后面会讲到,现在先传0,即表示不需要动画效果
animation:要执行的动画block
completion:动画结束后会执行的block,一般用来处理动画结束后的清理工作或者执行下一个动画
三、Transform动画。
在animations block中,除了设置前面所说的几个UIView属性,还能通过设置UIView的transform属性,达到移动、缩放、旋转等2D变化效果。
[UIView animateWithDuration:2 animations:^{ view.transform = CGAffineTransformMakeRotation(M_PI_4);//顺时针旋转90度} completion:^(BOOL finished) { [self execute:^{ view.transform = CGAffineTransformIdentity;//还原 } after:1.0];}];
使用UIView的transform属性,可以达到移动、缩放、旋转等2D变化效果:
CGAffineTransformMakeTranslation (CGFloat tx,CGFloat ty):平移(在x轴上平移的数值,在y轴上平移的数值)
CGAffineTransformMakeScale (CGFloat sx,CGFloat sy):缩放(在x轴上的缩放比例,在y轴上的缩放比例)
CGAffineTransformMakeRotation(CGFloat angle);旋转(旋转的角度)
CGAffineTransformTranslate(CGAffineTransform t,CGFloat tx,CGFloat ty):平移(已存在的变换,在x轴上平移的数值,在y轴上平移的数值)
CGAffineTransformScale(CGAffineTransform t,CGFloat sx,CGFloat sy):缩放(已存在的变换,在x轴上的缩放比例,在y轴上的缩放比例)
CGAffineTransformRotate(CGAffineTransform t,CGFloat angle);旋转(已存在的变换,旋转的角度)
注意到每种变换都有两个类似的函数,如
(1) CGAffineTransformMakeTranslation(CGFloat tx,CGFloat ty)
(2) CGAffineTransformTranslate(CGAffineTransform t,CGFloat tx, CGFloat ty)
方法1中,每次变换是从view的初始状态开始
方法2中,每次变换都是以上一次的状态(CGAffineTransform t)进行的变化,因此可以多次连续变化
四、关于前面提到的options参数
options让你可以设置更多效果。下面是UIViewAnimationOptions中定义的options的集合,可以通过不同的结合而实现不同的动画效果。
1、重复Repeating
首先看下面两个options
(1)UIViewAnimationOptionRepeat:动画无限重复执行
(2)UIViewAnimationOptionAutoreverse:这个选项要和UIViewAnimationOptionRepeat一起使用,让动画先顺着执行,然后再逆着返回
[UIView animateWithDuration:1.5 delay:0.5 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse|UIViewAnimationOptionCurveLinear animations:^{CGPoint point = CGPointMake(self.view.bounds.size.width-50, view.center.y);view.center = point;} completion:nil];
2、速度渐变
生活中的物体,例如汽车和火车,是通过加速来达到匀速行使速度的;通过减速最终才能停下来(除非直接撞墙了...)。为了使动画看起来更真实,我们将以上效果添加到view中。
苹果提供了4种效果供我们选择:
(1)UIViewAnimationOptionCurveEaseInOut:默认值,在动画开始时有加速效果,在结束时有减速效果
(2)UIViewAnimationOptionCurveEaseIn :在动画开始时有加速效果
(3)UIViewAnimationOptionCurveEaseOut:在动画结束时有减速效果
(4)UIViewAnimationOptionCurveLinear :线性运行,没有加速和减速效果
[UIView animateWithDuration:1.5 delay:0.5 options:UIViewAnimationOptionCurveEaseIn animations:^{ CGPoint point = CGPointMake(self.view.bounds.size.width, view0.center.y); view0.center = point;} completion:nil]; [UIView animateWithDuration:1.5 delay:0.5 options:UIViewAnimationOptionCurveEaseOut animations:^{ CGPoint point = CGPointMake(self.view.bounds.size.width, view1.center.y); view1.center = point;} completion:nil]; [UIView animateWithDuration:1.5 delay:0.5 options:UIViewAnimationOptionCurveLinear animations:^{ CGPoint point = CGPointMake(self.view.bounds.size.width, view2.center.y); view2.center = point;} completion:nil];
3、全部可选效果如下:
UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。UIViewAnimationOptionAllowUserInteraction //动画过程中允许用户交互,比如响应触摸UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画UIViewAnimationOptionRepeat //动画无限重复UIViewAnimationOptionAutoreverse //执行动画回路,要与UIViewAnimationOptionRepeat一起使用UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线UIViewAnimationOptionAllowAnimatedContent //动画过程中重绘视图(仅适用于转场动画)UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项//时间函数曲线相关UIViewAnimationOptionCurveEaseInOut //时间曲线函数,由慢到快UIViewAnimationOptionCurveEaseIn //时间曲线函数,由慢到特别快UIViewAnimationOptionCurveEaseOut //时间曲线函数,由快到慢UIViewAnimationOptionCurveLinear //时间曲线函数,匀速//转场动画效果(后面会讲到)UIViewAnimationOptionTransitionNone //无转场动画UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转UIViewAnimationOptionTransitionCurlUp //上卷转场UIViewAnimationOptionTransitionCurlDown //下卷转场UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转
五、弹簧动画效果
通过上面的代码,可以轻易实现将view从点A移动到点B,现在我们创建稍复杂一点的动画:移动view时添加弹簧效果,就像view被系上了一根弹簧。
[UIView animateWithDuration:2.0 delay:1.0 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:0 animations:^{ CGPoint point = CGPointMake(250, view.center.y); view.center = point; view.alpha = 1.0; } completion:nil];
用的方法和前面的方法类似,只是多了两个参数:
(1)usingSpringWithDamping :设置阻尼,取值范围是0.0-1.0,简单来说取值越接近于0,弹簧越有弹性,越接近与1,越僵硬。
(2)initialSpringVelocity:设置初始速度
六、Transitions变换
前面我们已经知道通过改变view的属性的方法来实现动画,下面将学习通过transitions来给view设置动画。
Transitions是已经预先定义好的动画,而不是像前面那样,通过设置view的结束状态,让系统在开始和结束状态间插入动画效果。
例子1:添加view
使用transitions使得容器view添加子view时带有动画效果。
[UIView transitionWithView:animationContainerView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromLeft|UIViewAnimationOptionCurveEaseOut animations:^{ [animationContainerView addSubview:viewA]; } completion:^(BOOL finished) { [self transitionRemove]; }];
上面函数使用了一个前面提到的新的option:UIViewAnimationOptionTransitionFlipFromLeft,这就是我们说的已经定义好的动画效果,下面是所有定于好的动画效果列表:
UIViewAnimationOptionTransitionFlipFromLeft UIViewAnimationOptionTransitionFlipFromRight UIViewAnimationOptionTransitionCurlUp UIViewAnimationOptionTransitionCurlDown UIViewAnimationOptionTransitionCrossDissolve UIViewAnimationOptionTransitionFlipFromTop UIViewAnimationOptionTransitionFlipFromBottom
关于transitions,可以看我之前共享的一个动画气泡控件,就不在这里累赘了:http://blog.csdn.net/dolacmeng/article/details/52094808
七、Keyframe动画
有时候,我们想要给view设置连续的动画,通过前面的学习,我们知道可以用completion block来实现连续的动画。虽然这样可以连接多个简单动画,但是代码看起来会混乱和复杂。例如飞机起飞的动画:
我们可以使用关键帧动画实现飞机首先在跑道上加速、开始向上提升、以更快的速度加速提升、最后飞出屏幕,消失在云中。
[UIView animateKeyframesWithDuration:1.5 delay:2.0 options:0 animations:^{ //这里的开始时间和动画时间参数取值为0-1.0,是总时间(1.5s)的百分比 [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.25 animations:^{ CGPoint center = planeImage.center; center.x += 80.0; center.y -= 10.0; planeImage.center = center; }]; [UIView addKeyframeWithRelativeStartTime:0.1 relativeDuration:0.4 animations:^{ planeImage.transform = CGAffineTransformMakeRotation(-M_PI_4/2); }]; [UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.25 animations:^{ CGPoint center = planeImage.center; center.x += 100.0; center.y -= 50.0; planeImage.center = center; planeImage.alpha = 0.0; }]; [UIView addKeyframeWithRelativeStartTime:0.51 relativeDuration:0.01 animations:^{ planeImage.transform = CGAffineTransformIdentity; planeImage.center = CGPointMake(0.0, originalCenter.y); }]; [UIView addKeyframeWithRelativeStartTime:0.55 relativeDuration:0.45 animations:^{ planeImage.alpha = 1.0; planeImage.center = originalCenter; }]; } completion:nil];
下一节UILayer动画
- 动画1-UIView动画
- 【动画1】UIView动画
- UIView动画
- UIView 动画
- UIView动画
- uiview动画
- UIView动画
- UIView 动画
- UIView动画
- 动画 UIView
- UIView动画
- UIView动画
- uiview 动画
- UIView 动画
- UIView动画
- UIView动画
- UIView动画
- UIView 动画
- C语言利用openSSL库AES模块加密
- IOS-响应式编程
- php中header函数参数的Cache-control:private,no-cache,must-revalidate,max-age是使用方法!
- 利用Access-Control-Allow-Origin响应头解决跨域请求
- 实习杂记(31):android多dex方案三
- 【动画1】UIView动画
- zookeeper 与 java 交互小结
- easyUI与bootstrap制作表单dialog
- 关于函数声明
- 应用图片的细节
- CodeForces 686C Robbers' watch
- RelativeLayout和LinearLayout
- Poj 2516 Minimum Cost【费用流Min_Cost_Max_flow】
- leetcode:字符串之Valid Palindrome && Palindrome Number