如何按顺序执行两个动画

问题:

假如:需要按顺序执行两个动画A、B,B动画需要在A动画执行完毕后再执行。两个动画的执行不能有时间间隔,即A动画执行完毕立即执行B动画。

实现方案:

事先已经导入了Facebook的pop框架,并#import <POP.h>

1.设置A动画的动画时间,执行A动画

2.创建NSTimer定时器timer,设置时间间隔为A动画的动画时间。并把timer添加到主运行循环。

3.把B动画添加到timer调用的的selector方法中。

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 执行第一个动画
    POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.fromValue = @(1.0);
    anim.toValue = @(0.2);
    anim.duration = 1.0;
    [self.redView pop_addAnimation:anim forKey:@"fade"];
    // 定时器(设置定时器的时间间隔和第一个动画的动画时间相等)
    NSTimer *timer = [NSTimer timerWithTimeInterval:1.0 target:self selector:@selector(backAnim) userInfo:nil repeats:NO];
    [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];

}
// 调用方法执行第二个动画
- (void)backAnim
{
    POPBasicAnimation *anim2 = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
    anim2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim2.fromValue = @(0.2);
    anim2.toValue = @(1.0);
    anim2.duration = 1.0;
    [self.redView pop_addAnimation:anim2 forKey:@"fade2"];

}

以上代码实现了A动画执行完毕立即执行B动画。

如果需要重复执行A、B动画。即A->B->A->B->A->B....还需要再添加一个定时器

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
   // timer1的时间间隔为第一个动画和第二个动画的动画时间之和
    NSTimer *timer1 = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(repeat) userInfo:nil repeats:YES];
    // 把定时器timer1加入到主运行循环
    [[NSRunLoop mainRunLoop] addTimer:timer1 forMode:NSRunLoopCommonModes];
}

- (void)repeat
{
    // 第一个动画
    POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.fromValue = @(1.0);
    anim.toValue = @(0.2);
    anim.duration = 1.0;

    [self.redView pop_addAnimation:anim forKey:@"fade"];
    // timer2的时间间隔为第一个动画的动画时间
    NSTimer *timer2 = [NSTimer timerWithTimeInterval:1.0 target:self selector:@selector(backAnim) userInfo:nil repeats:NO];   // 把定时器timer2加入到主运行循环
    [[NSRunLoop mainRunLoop] addTimer:timer2 forMode:NSRunLoopCommonModes];

}
// 第二个动画
- (void)backAnim
{

    POPBasicAnimation *anim2 = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
    anim2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim2.fromValue = @(0.2);
    anim2.toValue = @(1.0);
    anim2.duration = 1.0;
    [self.redView pop_addAnimation:anim2 forKey:@"fade2"];

}

这个效果是通过修改控件的透明度来模仿了呼吸灯的效果。

额外补充:呼吸灯效果

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 注意:只有可动画属性(animatable)才可以这么做
        [UIView animateWithDuration:1.0 animations:^{       // 改变透明度
            self.redView.alpha = 0.2;

        } completion:^(BOOL finished) {
            [UIView animateWithDuration:1.0 animations:^{          // 改变透明度
                self.redView.alpha = 1.0;
            }];

        }];
}
时间: 2024-08-04 16:29:05

如何按顺序执行两个动画的相关文章

同时对view延时执行两个动画时候的现象

对于view延时执行了两个动画后,会将第一个动画效果终止了,直接在第一个动画的view的最后的状态上接执行后续的动画效果,也就是说,我们可以利用这个特性来写分段动画效果,比如,可以定时2秒,2秒的状态值为100%,中途可以停止,达不到2秒的效果就触发不了最终效果,这对于写控件来说是很好的一个属性哦,下次教程将会写一个按钮的特效的控件,效果类似于: 效果: 源码: // // ViewController.m // ViewAnimation // // Created by YouXianMin

swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> <link rel="stylesheet" href="path/to/animate.min.css"> &

Functions类,一个Javascript的函数加法类,将两个函数加起来,顺序执行

以下是类的代码: 1 var Functions = { 2 oFunctions: null, 3 add: function (oFunc, oNewFunc) { 4 var oNew = function () { 5 oFunc(); 6 oNewFunc(); 7 }; 8 return oNew; 9 } 10 }; 以下是测试代码: 1 function one() { 2 alert(1); 3 } 4 5 function two() { 6 alert(2); 7 } 8

CSS3两个动画顺序衔接播放

问题描述: 第一个动画先播放,播放完成后,第二个动画紧接着播放. 解决办法: 1. 将第二个的延迟时间(animation-delay) 设置成第一个的持续时间( animation-duration ); 2. 多个动画应用时用逗号分隔开; 此时,CSS3的动画代码就要分开写了,不能再简写了,诸如animation:rotate-back 10000ms linear infinite这样的简写就是不行的,因为在同一代码中要加入两个动画,代码如下: <!DOCTYPE html PUBLIC

实现LoadRunner多个场景的顺序执行

实现LoadRunner多个场景的顺序执行 应用场景 假设有3个不同的测试场景,分别为并发登录.核心业务.可靠性测试,3个场景有先后执行顺序.由于白天测试机器另有用处,只能在晚上进行性能测试,这时我们的期望是能否把测试场景都设定好之后晚上自动运行,第二天我们回来看测试结果呢? 答案是肯定的,可以有两种方式实现. 第一种,相对简单充分利用LR Controller里面Group的功能. 新建一个场景把3个脚本都添加进来,在Edit Schedule中选择“Schedule by Group”的方式

autofac 一个接口多个实现的顺序执行

接口: namespace AutofacTest.Interface { public interface IUserInfo { string GetUserINfo(int uid); int sort(); } } 接口的实现: public class CrmUserInfoHelper : IUserInfo { public string GetUserINfo(int uid) { return "crmuserinfo"; } public int sort() {

NOIP1.3编程基础之算术表达式与顺序执行_06:甲流疫情死亡率

/* 1.3编程基础之算术表达式与顺序执行 06:甲流疫情死亡率 总时间限制: 1000ms 内存限制: 65536kB 描述 甲流并不可怕,在中国,它的死亡率并不是很高.请根据截止2009年12月22日各省报告的甲流确诊数和死亡数,计算甲流在各省的死亡率. 输入 输入仅一行,有两个整数,第一个为确诊数,第二个为死亡数. 输出 输出仅一行,甲流死亡率,以百分数形式输出,精确到小数点后3位. 样例输入 10433 60 样例输出 0.575% 提示 输出%可以使用printf("%%")

jQuery使用数据绑定的方式来执行元素的动画【原】

网页排版中如果有大量的元素动画并且使用jquery的animate来生成,写出来的js代码又多又乱:换一种方式:把动画的属性绑定到动画元素上,再写一个通用的方法去读取这些属性然后自动的生成对应的动画:或许这样可以省点力气,看起来也更加直观. <!DOCTYPE html> <html> <head> <title>使用数据绑定的方式来执行元素的动画</title> <meta charset="utf-8"> &l

css3 同时加载两个动画

最近在做H5,遇到这样的需求(如题) 先上一部分代码: .cur .p1d1d4{   width: 3rem;   margin: 2rem 5.3rem 0 0;   -webkit-animation: p1d1d4 1s ease-out;   animation: p1d1d4 1s ease-out; } @keyframes p1d1d4 {   0% {     margin: 2rem 10rem 0 0;   }   100% {     margin: 2rem 5.3re