如何在拉斐尔 JS 中制作垂直缩放矩形动画

how to make rectangle scale vertically animation in Raphael JS

本文关键字：垂直 缩放 动画 JS      更新时间：2023-09-26

Raphael Js 网站已关闭，所以我找不到任何文档或任何有关如何执行此操作的内容。我想创建一个初始垂直大小为 0 的矩形，并使其动画化，以便在单击另一个对象时它在垂直方向上变得越来越大。谢谢！

所以我有一个矩形

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

如何使它动画化？

特别是，请查看

  • Element.attribute（），
  • Element.animate（），
  • Element.click（） 和
  • Raphael.animation（）.

以下代码片段演示了一个简单的动画，例如您要查找的动画。单击红色方块以使水"充满"。它可能无法在某些浏览器（例如Chrome）中工作，可能是因为代码片段正在尝试访问外部第三方库，即Raphael.js。因此，要运行它，请转到Firefox上的此SO问/答页面，或者复制代码并在您自己的计算机上运行它。

请注意，要使水在向上方向上"填充"，您不能只增加水矩形的高度......这将使矩形向下增长。您还必须同时将矩形的顶部抬高相同的量。因此，您必须同时对height和y进行动画处理，如代码所示。

更新：为拉斐尔缩小图书馆提供了最新链接 

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>

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

相关文章：