如何在Raphael JS中制作矩形缩放垂直动画

Question

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

，所以我有一个矩形

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

我怎么让它动画？

Answer 1

特别地，检查出的文档

• Element.attribute()，
• Element.animate()，
• Element.click()，和
• Raphael.animation()。

下面的代码片段演示了一个简单的动画，就像你正在寻找的人。点击红色方块使水“填充”。它可能不适用于某些浏览器（例如Chrome），可能是因为该代码段试图访问外部第三方库，即Raphael.js。因此，要运行它，可以到Firefox的这个问题/答案页面，也可以复制代码并在自己的计算机上运行它。

请注意，要使水向上“填充”，不能只增加水长方形的高度......这会使长方形向下生长。您还必须同时按相同的数量提高矩形的顶部。因此，您必须同时动画height和y，如代码所示。

UPDATE：提供一个上最新的链接，拉斐尔精缩库

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);});

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

为了让动画开始播放后，点击红色矩形。