当前位置：首页 > 编程日记 > 正文

【动画1】UIView动画

编程日记 2024-08-20 04:30:00

讲一下动画。将分为以下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:animationContainerViewduration:2.0options:UIViewAnimationOptionTransitionFlipFromLeft|UIViewAnimationOptionCurveEaseOutanimations:^{ [animationContainerView addSubview:viewA]; }completion:^(BOOL finished) {[self transitionRemove];}];

上面函数使用了一个前面提到的新的option：UIViewAnimationOptionTransitionFlipFromLeft，这就是我们说的已经定义好的动画效果，下面是所有定于好的动画效果列表：

    UIViewAnimationOptionTransitionFlipFromLeftUIViewAnimationOptionTransitionFlipFromRightUIViewAnimationOptionTransitionCurlUpUIViewAnimationOptionTransitionCurlDownUIViewAnimationOptionTransitionCrossDissolveUIViewAnimationOptionTransitionFlipFromTopUIViewAnimationOptionTransitionFlipFromBottom

关于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动画

https://www.dkcj.cn/info/15040.html

【动画1】UIView动画

一）UIView动画

一、UIKit之UIView动画

二、为了达到更多效果，UIKit提供了另一个方法：

三、Transform动画。

四、关于前面提到的options参数

五、弹簧动画效果

六、Transitions变换

七、Keyframe动画

相关文章：

【python】解压文件

JS设计模式——3.封装与信息隐藏

nginx源码编译、负载均衡及模块的扩展

LinkedHashMap and LinkedHashSet

Windows Phone开发（19）：三维透视效果

【动画2】CALayer动画

nginx+tomcat+memcache实现负载均衡、session共享

（转）二叉树系列面试问题

百度UEditor开发案例（JSP）

iOS中的动力学：Dynamics【1】

自动化运维工具Saltstack(一)

【UIDynamic例子】挂起的方块

IIS7 配置PHP服务器

在文本框中提示用户输入内容格式的方法

saltstack实现haproxy+keepalived负载均衡+高可用(二)

iOS开发技巧（系列十八：扩展UIColor，支持十六进制颜色设置）

iOS顶部菜单栏

Mac环境下svn的使用

zabbix简介及基本安装（一）

顺序表应用6：有序顺序表查询

LA 5717枚举+最小生成树回路性质

【Runtime】动态添加方法demo

Zabbix之主机的添加与删除（二）

昨天网上感觉好冷，睡在席子上都是感觉打哈欠

几行代码实现神奇移动的过渡动画

php字符串处理函数相关操作

介绍Zabbix的两种监控模式（主动模式和被动模式）

【Step By Step】将Dotnet Core部署到Docker下

ipad无法与itunes同步，提示因为这台电脑不再被授权使用在此ipad上购买的项目解决方案...

iOS根据字节数截取字符串