iOS中旋转加载动画的实现 - 简书
下载简书移动应用
写了14929字，被500人关注，获得了364个喜欢
iOS中旋转加载动画的实现
近日一直在看KITTEN写的,此乃iOS动画开发的圣经，简直手不释卷。其中有一个动画是加载动画，因为文中没有给出实现的解析，我在这里解析一下动画的实现原理，和自己加入一些新的东西。
我们可以看到，图中主要是3个球在做交换，其中中间的球基本保持位置不变，其他两个球绕着一定的轨迹做旋转位移动画，接下来我们来看代码的实现步骤
2.三个球旋转动画
创建三个半径大小，颜色大小一样的圆。这里我们用到了layer的cornerRadius属性，在正方形中，我们只要设置cornerRadius的值等于height/2，就能轻易的画出一个圆形，代码如下:
UIView *ball_1 = [[UIView alloc] initWithFrame:CGRectMake(centerPoint.x - BALL_RADIUS, centerPoint.y, BALL_RADIUS, BALL_RADIUS)];
ball_1.layer.cornerRadius = BALL_RADIUS / 2; // 成为圆形
ball_1.backgroundColor = self.ballC
我们根据圆的x值不同，创建三个并排放着，大小、形状一致的圆形,接下来我们来分析一下三个圆各自的x值
CGFloat centerPointY = HEIGHT / 2 - BALL_RADIUS * 0.5;
CGFloat centerPointX = WIDTH / 2;
CGPoint centerPoint = CGPointMake(centerPointX, centerPointY);
UIView *ball_1 = [[UIView alloc] initWithFrame:CGRectMake(centerPoint.x - BALL_RADIUS, centerPoint.y, BALL_RADIUS, BALL_RADIUS)];
ball_1.layer.cornerRadius = BALL_RADIUS / 2; // 成为圆形
ball_1.backgroundColor = self.ballC
[self addSubview:ball_1];
self.ball_1 = ball_1;
UIView *ball_2 = [[UIView alloc] initWithFrame:CGRectMake(centerPoint.x - BALL_RADIUS * 0.5, centerPoint.y, BALL_RADIUS, BALL_RADIUS)];
ball_2.layer.cornerRadius = BALL_RADIUS / 2; // 成为圆形
ball_2.backgroundColor = self.ballC
[self addSubview:ball_2];
self.ball_2 = ball_2;
UIView *ball_3 = [[UIView alloc] initWithFrame:CGRectMake(centerPoint.x + BALL_RADIUS * 0.5, centerPoint.y, BALL_RADIUS, BALL_RADIUS)];
ball_3.layer.cornerRadius = BALL_RADIUS / 2; // 成为圆形
ball_3.backgroundColor = self.ballC
[self addSubview:ball_3];
self.ball_3 = ball_3;
3.在git图中，我们可以看到圆是绕着一定的半径，做着一个旋转的运动，在这里我们用贝塞尔曲线创作圆，在这里我们要从180度到360度，和0度到180画两端圆弧，组成一个圆形，让球1跟着这个曲线做位移运动。
// 2.1 第一个圆的曲线
UIBezierPath *path_ball_1 = [UIBezierPath bezierPath];
[path_ball_1 moveToPoint:centerBall_1];
[path_ball_1 addArcWithCenter:centerPoint radius:BALL_RADIUS startAngle:M_PI endAngle:2*M_PI clockwise:NO];
UIBezierPath *path_ball_1_1 = [UIBezierPath bezierPath];
[path_ball_1_1 addArcWithCenter:centerPoint radius:BALL_RADIUS startAngle:0 endAngle:M_PI clockwise:NO];
[path_ball_1 appendPath:path_ball_1_1]; // 把两段圆弧组合起来
我们用核心动画，让球1绕着轨迹运动：
// 2.2 第一个圆的动画
CAKeyframeAnimation *animation_ball_1=[CAKeyframeAnimation animationWithKeyPath:@"position"];
animation_ball_1.path = path_ball_1.CGP
animation_ball_1.removedOnCompletion = NO;
animation_ball_1.fillMode = kCAFillModeF
animation_ball_1.calculationMode = kCAAnimationC
animation_ball_1.repeatCount = 1;
animation_ball_1.duration = 1.4;
animation_ball_1.delegate =
animation_ball_1.autoreverses = NO;
animation_ball_1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.ball_1.layer addAnimation:animation_ball_1 forKey:@"animation"];
这样我们就完成了球1的动画，我们按着这个步骤完成球3的动画
4.球3首先是从0度到180度、180度到360度两段弧构成，在这里我们要注意一个点是在创建核心动画的时候，我们不用再成为球3的核心动画的代理，因为我们在球1中已经成为了动画的代理，这里不做代理，防止重复出现动画代理事件的触发
// 2.3 第3个圆的曲线
UIBezierPath *path_ball_3 = [UIBezierPath bezierPath];
[path_ball_3 moveToPoint:centerBall_2];
[path_ball_3 addArcWithCenter:centerPoint radius:BALL_RADIUS startAngle:0 endAngle:M_PI clockwise:NO];
UIBezierPath *path_ball_3_1 = [UIBezierPath bezierPath];
[path_ball_3_1 addArcWithCenter:centerPoint radius:BALL_RADIUS startAngle:M_PI endAngle:M_PI*2 clockwise:NO];
[path_ball_3 appendPath:path_ball_3_1];
// 2.4 第3个圆的动画
CAKeyframeAnimation *animation_ball_3 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation_ball_3.path = path_ball_3.CGP
animation_ball_3.removedOnCompletion = NO;
animation_ball_3.fillMode = kCAFillModeF
animation_ball_3.calculationMode = kCAAnimationC
animation_ball_3.repeatCount = 1;
animation_ball_3.duration = 1.4;
animation_ball_3.autoreverses = NO;
animation_ball_3.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.ball_3.layer addAnimation:animation_ball_3 forKey:@"rotation"];
3.动画的优化
在这里我们实现了球1和球3绕着一个圆做旋转位移运动，这里我们已经完成了动画的第一部分，我们来看一下效果图：
这里我门可以看到只是单纯的实现了球的旋转位移，并不像一开始的git中的动画一样。让我们一起来分析一下我们现在这个动画距离第一个动画还少了一些什么：
git中的动画在旋转的时候球1和球2分别向两边位移了一段距离
两个球在向外位移的过程中还一边缩小球的半径
球在旋转的过程中，变回原来的位置，一边变回原来的大小
在这里我们要实现这3个动画的补充，我们需要成为原来旋转动画的代理，也就是在球1的核心动画设置delegate为self，监听动画开始的事件 - (void)animationDidStart:(CAAnimation*)anim，我们需要在动画开始的时候完成3件事情，我们来看一下分析图
1.动画开始的时候球1和球3位移一定的距离，我们来看一下位移距离的量的计算图
self.ball_1.transform = CGAffineTransformMakeTranslation(-BALL_RADIUS, 0);
self.ball_3.transform = CGAffineTransformMakeTranslation(BALL_RADIUS, 0);
2.在位移的过程中，我们需要设置球1、球2、球3的大小，请看一下设置完位移和大小之后球1和球3的轨迹运动图像
self.ball_1.transform = CGAffineTransformScale(self.ball_1.transform, 0.7, 0.7);
self.ball_3.transform = CGAffineTransformScale(self.ball_3.transform, 0.7, 0.7);
self.ball_2.transform = CGAffineTransformScale(self.ball_2.transform, 0.7, 0.7);
3.在一段时间后，把球1和球2的x值和size设为动画前的大小，因此我们用UIView 的animation 动画来完成这3个动画
[UIView animateWithDuration:0.3 delay:0.1 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionBeginFromCurrentState animations:^{
self.ball_1.transform = CGAffineTransformMakeTranslation(-BALL_RADIUS, 0);
self.ball_1.transform = CGAffineTransformScale(self.ball_1.transform, 0.7, 0.7);
self.ball_3.transform = CGAffineTransformMakeTranslation(BALL_RADIUS, 0);
self.ball_3.transform = CGAffineTransformScale(self.ball_3.transform, 0.7, 0.7);
self.ball_2.transform = CGAffineTransformScale(self.ball_2.transform, 0.7, 0.7);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3 delay:0.1 options:UIViewAnimationOptionCurveEaseIn
| UIViewAnimationOptionBeginFromCurrentState animations:^{
self.ball_1.transform = CGAffineTransformI
self.ball_3.transform = CGAffineTransformI
self.ball_2.transform = CGAffineTransformI
} completion:NULL];
4.循环动画：我们在动画代理事件的- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag中调用动画开始的函数，这样在动画结束的时候就会自动的调用动画进行循环播放
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
[self rotationAnimation];
4.毛玻璃效果的添加
利用系统自带的UIVisualEffectView类来创建毛玻璃效果，并设置为self.bouns来覆盖整个视图，详细关于UIVisualEffectView的介绍请看
UIVisualEffectView *bgView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
bgView.alpha = 0.9f;
bgView.frame = CGRectMake(0, 0, WIDTH, HEIGHT);
bgView.layer.cornerRadius = BALL_RADIUS / 2;
bgView.clipsToBounds = YES;
[self addSubview:bgView];
最近在从OC转为Swift，自己也遇到了一些基于Swift很不错的动画，希望在学完Swift后能转为OC，并和大家分享这个过程。学习动画中遇到了很多问题，有几何学上和物理上的问题，奈何高中数学老师死得早，几何部分理解起来常常比较吃力，无奈自己爱折腾，希望能有更大的突破。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
玩转简书的第一步，从这个专题开始。
想上首页热门榜么？好内容想被更多人看到么？来投稿吧！如果被拒也不要灰心哦～入选文章会进一个队...
· 97592人关注
简书程序员大本营
投稿须知：
1.本专题仅收录与程序有关的文章。
2.请在代码框里写代码，尽量保证可看性。
关注简书官...
· 86915人关注
分享 iOS 开发的知识，解决大家遇到的问题，讨论iOS开发的前沿，欢迎大家投稿~
· 18211人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：【图文】Flash动画制作之―导入素材03_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
Flash动画制作之―导入素材03
上传于||文档简介
&&f​l​a​s​h​动​画​一​整​套​的​教​程​
​
​挺​好​的​ ​ ​从​入​门​到​深​入​
​
​推​荐​大​家​使​用​哈​~​~
大小：9.70MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢Adobe源码泄漏？3行代码搞定，Flash动画无缝导入Android/iOS/cocos2dx（二）
上一篇 &简要介绍了FlashToAnimation的功能，也就是将flash动画无缝导入到Android/iOS及cocos2dx中运行, 这一篇介绍这个库的使用方法。
首先确保系统中安装了flash，并且flash版本应该在cs3或者以上。
然后把&根目录/tools/flashScript&目录内的所有文件和文件夹copy到如下目录：
Mac：~/Library/Application Support/Adobe/[Flash CS+版本号]/[en_US或者zh_CN]/Configuration/Commands Windows：C:\Users[用户名]\AppData\Local\Adobe[Flash CS+版本号][en_US或者zh_CN]\Configuration\Commands
在文件管理器（或Finder）目录中看起来是这样的：
--Commands
-- 1.根据png创建元件.jsfl
-- 2.修改fla中元素的名字.jsfl
-- 3.导出动画数据.jsfl
--json2.jsfl
-- ....其他文件
这时候打开flash，点击菜单栏中的 Commands（中文的话应该是命令），在下拉菜单中就能看到我们加入的脚本啦。
到此为止准备工作就绪。
美术人员制作flash动画的步骤
下面步骤看起来很长，其实内容很简单，都是大家各自平时使用的经验，在这里写这么多是为了让小白用户不出错而已。
美术人员使用步骤：
新建一个as3.0的Flash Document。
保存文档，请务必保存文档，否则脚本不生效，并按照如下规则命名：
fla的命名应该以 &.& 分为3部分：
测试.test.fla
第一部分：中文，对本文件的中文描述。（不重要，可以随意取。）
第二部分：英文，表示本文件的英文标识符。（重要，在代码中会使用到这个关键字。）
第三部分：后缀，默认即可不用管。（使用.fla即可。）
其中第一部分中文可忽略。
在新建的Flash文件窗口右侧的Library栏中，点击右键，新建一个文件夹名为&pics&(注意，名字不能错，后面有类似的要求也要遵守)。
把制作flash的图片（png格式）拖入pics文件夹中。[!!!注意，所有的png图片必须带后缀.png否则会出错！]
点击commands中的脚本&1.根据png创建元件&。结果如图：
如果是cocos2dx中使用，为了避免Sprite Frame Cache重名，或者想要为图片生成跟本动画相关的独一无二的前缀，可以点击commands中的脚本&2.修改fla中元素的名字&。结果如下：
iOS可能也有此问题。因为直接拖入xcode中的文件一般选择&create groups&，这个只是逻辑文件夹，如果其他文件夹内存在同名文件则会冲突。所以最好每次制作动画，添加png图片的时候，都执行一次脚本&2.修改fla中元素的名字&。
新建一个Movie clip（影片剪辑），取一个合适的名字。然后拖入anims文件夹中
双击该Movie clip，进入编辑模式，此时就可以使用eles文件夹中的Movie clip，制作动画了。制作动画的具体细节要求，见下面的要求。
制作完成后，保存，美术人员的工作就完成了。
美术人员制作flash动画完整要求
下面涉及名字的地方可以使用 英文字母，数字和下划线，不要用中文。 先制作动画所需要的图片，png/jpg格式的，所有的动画元素需要全部使用图片，不可以使用矢量图和文字等等。 图片命名尽量简单，以减少程序处理的数据量。 建立fla时，使用Action Script 3。 在库中建立3个文件夹，名字为：pics（图片），anims（动画的动作，比如idle, move等），eles（图片对应的元件）。对应的资源请在不同的文件夹中建立。 每张图片（pics）都需要生成一个元件（eles），不要把多张图片放在一个元件中。所以元件的数量应该同图片的数量是相同的。 所有的元件请使用 &影片剪辑&(movie clip), 不要使用 &按钮& 和 &图片&。 把制作好的png图片（只用png，不要用jpg或其它格式图片）导入到flash中，并拖进pics文件夹下面。 依次生成png图片对应的元件（影片剪辑），把图片拖到元件中。使图片居中。元件名字应该同图片的名字完全相同。这一步可以使用脚本（&1.根据png创建元件&）代替这个操作。 建立新的元件，还是使用&影片剪辑&(movie clip)，然后拖进anims文件夹中。这就是需要制作的动作了。 这时候，就可以使用eles(不要使用pics中的图片)中的元件在时间轴中制作动作了。 制作动作，帧的普通操作(关键帧关键帧之间的传统补间，只能使用传统补间)都可以使用，但是对关键帧的处理只支持以下几种：移动，缩放，旋转，倾斜，颜色叠加，透明度的变化 这5种变换。 不要使用除13条中描述的其他任何对关键帧的操作，比如滤镜，显示混合等。 不要使用缓动，不要使用补间动画时元件旋转等高端操作。如果某一帧某个元件不可见，可以通过设置它的透明度为0，或者插入空白关键帧来实现。 不要使用嵌套动画：就是说关键帧上最好只用eles中的元素来做，不要做好了一段动画，把这段动画作为关键帧使用。。 最后，保存成fla就可以了。美术人员最终输出就是一个.fla文件。
程序人员使用美术制作好的动画
程序拿到美术人员制作好的fla文件后，首先要进行一番检查，看看是否合格。
所以需要确保程序员熟悉flash的页面和菜单，并了解一些简单的flash软件操作。
打开.fla文件。简单检查一下文件完成度。
是否3个文件夹都在(anims，pics，eles)。 是否动画文件都在anims文件夹内。 是否pics与eles内文件数量相同，并且一一对应，相对应的2个组件名字也要完全一致。 是否pics和eles内的组件名字都有.png后缀。
如果需要给关键帧添加事件，需要选中该关键帧（首先在timeline中选中关键帧，然后在主页面中选中该帧代表的图片，过程中最好隐藏timeline中的其它层），然后点击右侧与library同级的标签页properties。在第一行标有 & Instance Name & 的输入框，输入你的事件名，程序能够在播放到这一帧的时候，触发这个事件。
事件添加完成后，选择菜单：Commands（命令）- &3.导出动画数据&。窗口底部同Timeline（时间轴）同级的Output（输出）栏中会显示脚本执行过程。
成功后，打开.fla文件所在的目录，即可看到&.flajson文件&和.fla同名&图片文件夹&（里面是图片）。
如果需要使用二进制动画描述文件，则需要把&.flajson文件&转为&.flabin文件&，这两个后缀也不能改。
转换需要使用脚本&源码根目录/tools/JsonToBin.py&文件。这是一个python脚本。如果系统内没有python，则需要安装一个。
然后打开命令行（mac中使用终端，Windows中可使用cmd）执行如下命令，执行后的.flabin就是转换成二进制后的文件。
python 源码根目录/tools/JsonToBin.py [.flajson文件全路径] [.flabin文件全路径]
这时候可以把&.flajson文件&（或者 &.flabin文件&，二者使用其一即可，代码库内部处理，无需额外写代码判断）和&图片文件夹&放入程序指定目录就可以使用了。
cocos2dx可以放在资源目录中任意位置。代码初始化时需要指定目录。 需要将这2个文件放入 Assets文件夹的子文件夹flashAnims中。 iOS拖入xcode中，选择&copy if need&和&create groups&，点击确定。
程序员如何在代码中调用动画
//cocos2dx版本使用方法
//包含头文件
#include &AnimNode.h&
//使用代码
AnimNode *animNode = AnimNode::create();
animNode-&load(&xxxx/flashFileName.flajson&);
animNode-&play(&animationName&, WINDY_ANIMNODE_LOOP_FOREVER);//这里的animationName就是flash中anims文件夹内的动画名称
superNode-&addChild(animNode);
android:layout_width=&match_parent&
android:layout_height=&match_parent&
tools:context=&com.xcyo.yoyo.flashsupport.MainActivity&&
FlashView:designDPI=&326&
FlashView:loopTimes=&0&
android:id=&@+id/flashview&
//iOS版本使用方法
#import &FlashView.h&
FlashView *flashView = [[FlashView alloc] initWithFlashName:@&flashFileName&];
flashView.frame = self.view.// CGRectMake(100, 100, 200, 500);
flashView.backgroundColor = [UIColor clearColor];
[superView addSubview:flashView];
[flashView play:@&animationName& loopTimes:FOREVER];//这里的animationName就是flash中anims文件夹内的动画名称
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'如何将flash动画导入到AE里面制作_百度知道
如何将flash动画导入到AE里面制作
或者详细说清楚步骤啊，现在想要在AE里面做最后的渲染！请附上教程网址！谢谢，发现画面是静止的，使我能顺利完成！还请各位牛人指点迷津、加特效和配音，我尝试导入SWF文件，以及将各部分镜头连接起来！，感谢了哇我已经做好flash动画的各个镜头
提问者采纳
可以试着导出视频格式，如AVI或者MOV的，因为AE好像不能直接对SWF文件进行操作。
导出了AVI格式，可是画面是静止的·······
是不是你用的是影片剪辑？？想要导出视频需要把所有的动画全做到时间轴上，或者全部用图形元件去做。还有一个办法就是用视频格式转换软件试一下，比如格式工厂，魔影工厂之类的。
导入swf文件到格式工厂里后，出现you need to install inside cod`````````然后就转不了
那就是你的FLASH中加入了代码。。。。
提问者评价
灰常感谢！问题终于解决了！也谢谢其他几位热心的朋友！
来自团队：
相关专业回答
具体方法简要说明如下：
先用Flash 制作好动画，再导出为“png 序列”文件，导出时，前景与背景分开导在单独的文件夹内，方便之后导入AE中合成。（文件夹一定要分的有条有理，文件夹的名称也要起的有规则，方便事后用 AE 合成。）
导入AE合成，前景一层，背景一层，（也可根据实际情况而分层）。
在AE中加模糊等特效，然后生成avi格式视频文件
再用cooledi...
其他类似问题
为您推荐：
其他3条回答
你输出的时候不要用GIF之类的吧他动画都在一个图片里面完成你要输出成JPG和PNG这类的图片格式就可以调进去了调进去的时候要要看下那个小钩有没打上。没打上的要打上（上面的一个钩）不懂可以加QQ：
FLASH里面做好的动画要导入AE进行后期制作的话 最好是先从FLASH里面输出序列帧，然后再在AE里面导入序列帧
我在做任务，原谅下
您可能关注的推广
flash动画的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}