首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在初始化其他函数或动画之前,如何确保动画是完整的?

在初始化其他函数或动画之前,如何确保动画是完整的?
EN

Stack Overflow用户
提问于 2012-04-26 18:49:14
回答 1查看 746关注 0票数 1

在这里,我有一系列使用Raphael的动画:

  1. 淡入曲线
  2. 淡入球1
  3. 有生命的球1
  4. 淡入球2
  5. 有生命的球2

然而,用我的代码,步骤4-5是启动的,而步骤2-3仍然是动画。如何确保步骤4和步骤5在1-3动画完成后启动?我尝试在我的第二个函数( setTimeout )上使用ball2,但没有成功。

JSFiddle视图或这里:

代码语言:javascript
复制
Raphael("bounce", 640, 480, function () {
               var r = this,
                p = r.path("M0,77.255c0,0,269.393,37.431,412.96,247.653 c0,0,95.883-149.719,226.632-153.309").attr({stroke: "#666", opacity: 0, "stroke-width": 1}),
                len = p.getTotalLength(),
            e = r.circle(0, 0, 7).attr({stroke: "none", fill: "#000", opacity:0}).onAnimation(function () {
                    var t = this.attr("transform");
                });
             f = r.circle(0, 0, 7).attr({stroke: "none", fill: "#000",opacity:0}).onAnimation(function () {
                    var t = this.attr("transform");
               });
            r.customAttributes.along = function (v) {
                var point = p.getPointAtLength(v * len);
                return {
                    transform: "t" + [point.x, point.y] + "r" + point.alpha
                };
            };
            e.attr({along: 0});
            f.attr({along: 0});

            var rotateAlongThePath = true;
            function fadecurve(ca,ba,aa,ab){
                ca.animate({opacity:1},500);
                setTimeout(function(){fadeball(ba,aa,ab);
                },1000);
            }
            function fadeball(ba,aa,ab) {
                   ba.animate({opacity:1},400);
                   setTimeout(function(){run(ba, aa,ab);
                   },1000);
            }
            function run(ba,aa,ab) {
                   ba.animate({along: aa}, ab, ">", function () {
                    ba.attr({along: aa});
                });
            }
            function startbounce() {
                fadecurve(p,e,.9,400),
                setTimeout(function(){fadeball(f,.8,400);
                    },1000);
            }
            startbounce();
        }); ​
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-04-26 19:12:25

根据Raphael的文档,动画方法采用回调方法作为第四个参数。该方法可用于启动序列中的下一个动画(或在第三个动画之后)。

代码语言:javascript
复制
    function fadecurve(ca,ba,aa,ab){
        ca.animate({opacity:1},500,,function(){fadeball(ba,aa,ab);});
    }

例如。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10339554

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档