dispatch多方法实现连续动画

原创 2016年08月31日 13:04:05

起因:
【我相信大家见到代码比看文字清楚的多。里面的内容也比博客多。
附github链接:https://github.com/OPTJoker/SerialAnimations.git

最近在学习webGL,由于需要一个slider去控制webGL里面3D模型的一些属性,找的库又大有不好用,想自己封装一个模块,于是就开始了html和JS的学习之路。
然后就发现jquery的动画库那么强大,可以串行的执行连续动画。于是想在iOS中实现一下这种效果。
国内没找到什么好资料,有一个人在博客里分享了一种实现方法,不过他用的是关键帧动画,我觉得这种办法太笨,因为要根据动画的播完时间设置delay,那如果有1万个动画,你岂不是要算出1万个delay值?我就呵呵了。
传送门在这:http://www.devtalking.com/articles/uiview-keyframe-animation
在stackoverflow发现了不少干货。于是实现了连播效果,现在来分享一下。

方法一:通过dispatch的group来实现多动画串行执行。
stackoverflow传送门:http://stackoverflow.com/questions/27601758/how-to-use-gcd-to-control-animation-sequence
这个人的答案就是利用dispatch的group实现了多动画的连续播放。
关键代码:

@property (nonatomic, strong) dispatch_queue_t serialQueue;
@property (nonatomic, strong) dispatch_group_t group;

-(void)initQueue {
    // create a serial queue
    self.serialQueue = dispatch_queue_create("com.example.serialQueue", 0);
    // create a dispatch group
    self.group = dispatch_group_create();
}
-(void)animateSyncWithDuration:(NSTimeInterval)duration animations:(block_t)animations {
    dispatch_async(self.serialQueue, ^{
        /*
         * This block is invoked on the serial queue
         * This block would never be executed concurrently
         */

        /*
         * Enter the dispatch group
         */
        dispatch_group_enter(self.group);

        dispatch_async(dispatch_get_main_queue(), ^{
            /*
             * This block is invoked on the main queue
             * It is safe to use UIKit
             */
            [UIView animateWithDuration:duration animations:animations completion:^{
                /*
                 * This completion block is invoked on the main queue
                 * Now leave the dispatch group
                 */
                dispatch_group_leave(self.group);
            }];
        });

        /*
         * Wait until leaving the dispatch group from the UIView animation completion block
         * It means it blocks the serial queue
         */
        dispatch_group_wait(self.group, DISPATCH_TIME_FOREVER);
    });
}

上面的封装完成,就可顺序调用animateSyncWithDuration: animations:来执行动画了。
例:

[self animateSyncDuration:dur animations:^{
    [self changeWidth:ScreenW-40];
}];

[self animateSyncDuration:dur animations:^{
    [self changeHeight:260];
}];

[self animateSyncDuration:dur animations:^{
    [self changeCenter:CGPointMake(ScreenW/2.f, 2*ScreenH/5.f)];
}];

方法二:根据同步异步的性质,用dispatch实现连续动画
分析:既然要按顺序执行多个动画,那就用dispatch_sync先创建要多个同步线程,线程的block穿动画的block。然后把这多个同步线程顺序装进一个异步于main线程的线程来管理,岂不就达到了想要的效果嘛。
这个思路来自于之前做的一个效果:模仿开眼app下面让一段文字一个个逐渐刷出来的效果。
不罗嗦,上代码:
首先typedef一个动画的block类型:

typedef void(^animBlock)(void);

然后根据分析实现线程的逻辑:

- (void)anim:(NSArray *)animArr{
    dispatch_async(dispatch_get_global_queue(0, 0), ^{
        for (short i =0; i<animArr.count; i++) {
            dispatch_sync(dispatch_get_main_queue(), animArr[i]);
        }
    });
}

最后 创建动画数组

//基于异步文字思想的连播动画
- (void)asyncPlayFlash{
    NSMutableArray *animMArr = [[NSMutableArray alloc] initWithCapacity:0];

    animBlock chW = ^{[self changeWidth:ScreenW-40];};
    animBlock chH = ^{[self changeHeight:260];};
    animBlock chP = ^{[self changeCenter:CGPointMake(ScreenW/2.f, 2*ScreenH/5.f)];};

    [animMArr addObject:chW];
    [animMArr addObject:chH];
    [animMArr addObject:chP];

    [self anim:animMArr];
}

就BB这么多,我相信大家见到代码比看文字清楚的多。里面的内容也比博客多。
附github链接:https://github.com/OPTJoker/SerialAnimations.git

【Visual C++】游戏编程学习笔记之六:多背景循环动画

本系列文章由@二货梦想家张程 所写,转载请注明出处。 本文章链接:http://blog.csdn.net/terence1212/article/details/44224963 作者:Zee...
  • terence1212
  • terence1212
  • 2015年03月14日 22:15
  • 1181

css3实现动画效果常用方法

早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更...
  • charlene0824
  • charlene0824
  • 2016年02月21日 15:03
  • 5479

Android 连续的补间动画(Animation/Tween)

通过Animation监听事件实现连续动画创建一个简单的xml文件,里面有一个< imageview>即可MainActivity.java:public class MainActivity ext...
  • zhengyikuangge
  • zhengyikuangge
  • 2016年03月17日 14:02
  • 538

CAAnimation四种动画

在上一篇专题中我们提到,CAAnimation可分为以下四种: 1 2 3 4 5 6 7 8 1.CAB...
  • Flying_in_the_world
  • Flying_in_the_world
  • 2016年04月13日 16:07
  • 1780

HTML5实现动画三种方式

编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有CSS3和javascript.通过合理的选择,来实现最优的实现。 PS:...
  • dx18520548758
  • dx18520548758
  • 2017年01月12日 10:40
  • 801

View 动画的实现原理以及自定义实现

一、View动画的实现原理View 动画的简单使用,以平移动画为例TranslateAnimation translateAnimation = new TranslateAnimation(0, 0...
  • hp910315
  • hp910315
  • 2016年09月30日 19:34
  • 1343

Jquery对象动画方法总结

注:中括号内为可选参数 1.show()和hide():元素显示和隐藏       $("#div1").show([3000],[function(){}]),显示元素,第一个参数表示持续时间,...
  • u010633077
  • u010633077
  • 2017年03月09日 15:48
  • 119

使用何种方式实现unity动画?

目前游戏中UI动画是通过unity自带的animation动画实现的, 有以下一些缺点: 1.             每个UI要实现动画需要建一个animation的prefab. 比较麻烦。 ...
  • niuzb
  • niuzb
  • 2016年10月18日 14:04
  • 602

【Android动画九章】-TranslateAnimation(位移动画)

上一节介绍了AlphaAnimation动画的用法,本节将介绍另一种形式的动画-TranslateAnimation(位移动画)。 public class TranslateAnimation ...
  • yayun0516
  • yayun0516
  • 2016年04月28日 21:34
  • 6515

HTML5实现动画三种方式

HTML5实现动画三种方式 A-A+ 前端博客•2016-01-06•前端开发•canvas | CSS3 | HTML5 | jQuery•1748View0 文章目录...
  • Mary201572
  • Mary201572
  • 2016年08月21日 20:22
  • 1780
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dispatch多方法实现连续动画
举报原因:
原因补充:

(最多只允许输入30个字)