Question

我想在一条线上做一个简单的动画。这里的基本目标是当我点击画布时，该线从一个点变为一定数量的像素高。但是，当我单击画布时，脚本显示动画已启动并完成（最后调用回调函数），但我实际上并未看到动画发生。谁能告诉我为什么？

函数创建每个动画线，将其附加到文档，并设置样式

function animatedLine(name, x1, y1, width, height, stroke, duration){
    this.name = name;
    this.x1 = x1;
    this.y1 = y1;
    this.stroke = stroke;
    this.width = width;
    this.height = height,
    this.duration = duration;

    $("body").append("<div id='" +this.name +"'></div>");
    $("#" +this.name).css({"position": "absolute", "top": this.y1 +"px", "left": this.x1 +"px", "backgroundColor": this.stroke, "width": this.width +"px", "height": this.y1 +"px", "z-index": 5});
}

创建新的animatedLine对象

var line1 = new animatedLine("R01", 0, 0, 5, 100, "black", 3);

创建时间轴

var timeline = new TimelineLite();

创建时间轴动画，这显然正在发生，因为正在调用onComplete函数

timeline.to(line1, line1.duration, {"height": line1.height +"px",
    onComplete: function(){

动画完成后，“hello”将打印到控制台

        console.log("hello");
    }
});

$("#schematic_holder").on("click", function(){
    timeline.play();
})

需要注意的是，背景是一个canvas元素，它的位置设置为绝对值，z-index设置为0，因此该行应该在画布顶部进行分层，它正在进行。

Answer 1

你正在补充line1（AnimatedLine＆＃34; class＆＃34;创建＃R01元素）。

你要补间的是＃R01（div元素）。

＆＃13;

function animatedLine(name, x1, y1, width, height, stroke, duration){
  this.name = name;
  this.x1 = x1;
  this.y1 = y1;
  this.stroke = stroke;
  this.width = width;
  this.height = height,
  this.duration = duration;

  $("body").append("<div id='" +this.name +"'></div>");
  $("#" +this.name).css({
    "position": "absolute",
    "top": this.y1 +"px",
    "left": this.x1 +"px",
    "backgroundColor": this.stroke,
    "width": this.width +"px",
    "height": this.y1 +"px",
    "z-index": 5
  });

}

var line1 = new animatedLine("R01", 0, 0, 5, 100, "black", 3);

var timeline = new TimelineLite();

timeline.to("#R01", line1.duration, {
  "height": line1.height +"px",
  onComplete: function(){ console.log("hello"); }
});

timeline.play();

＆＃13;

body{ background-color: ivory; }

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

＆＃13;

为什么我的脚本运行动画，但没有显示它？

1 个答案: