Question

Raphael Js网站已关闭，因此无法找到任何文档或任何有关如何执行此操作的内容。我想创建一个初始垂直大小为0的矩形，并使其具有动画效果，以便在单击另一个对象时它会垂直变大。谢谢！

所以我有一个矩形

var water = paper.rect( 0, 300, 600, 0).attr({fill:"blue"});

如何制作动画？

Answer 1

请特别查看

的文档

以下代码段演示了一个简单的动画，就像您正在寻找的动画一样。点击红色方块使水＃34;填充＆＃34;。它可能无法在某些浏览器（例如Chrome）中使用，因为该代码段正在尝试访问外部第三方库，即Raphael.js。因此，要运行它，请转到Firefox上的SO问题/答案页面或复制代码并在您自己的计算机上运行。

注意，要使水＆＃34;填充＆＃34;在向上的方向上，你不能只增加水矩形的高度......这将使矩形向下生长。您还必须同时将矩形的顶部抬高相同的量。因此，您必须同时为height和y设置动画，如代码所示。

更新：提供Raphael缩小图书馆的最新链接

＆＃13;

var paper = Raphael(0, 0, 500, 120);
var button = paper.rect( 10, 10, 40, 20).attr({fill:"red"});
var water = paper.rect( 10, 100, 400, 0).attr({fill:"blue"});
var anim = Raphael.animation({
  height: 60,
  y: (100 - 60)
}, 2000);
button.click(function() {water.animate(anim);});

＆＃13;

<script src="https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.min.js"></script>

＆＃13;

要启动动画，请单击红色矩形。

如何在Raphael JS中制作矩形比例垂直动画

1 个答案: