javascript - 使用 RaphaelJS 进行动画缩放

标签 javascript animation raphael

我正在尝试让缩放动画与 RaphaelJS 一起使用,但我没有运气。这就是我的代码的样子:

paper.animate({ scale : 2 });

但是动画不起作用。这是使用 RaphaelJS 制作缩放效果动画的正确方法还是必须手动制作动画(使用 JavaScript 间隔等...)?

-- 编辑--

我的错误,我指的是一个元素。

elementFromPaper.animate({ 规模:2 });

最佳答案

Paper 是 Raphael 中元素的容器,它根本没有 animate 方法。
只有圆形、矩形等元素具有 animate 方法。
如果你想改变容器的大小,可以使用setSize (但这不会缩放容器中的任何元素)。

编辑:如果你想实现放大或缩小等效果,可以使用 setViewBox方法。

编辑2:scale不在元素属性列表中,如 here 中列出的

要按比例制作动画,您可以使用通用 transform范围。

ele.animate({transform: 's2'}) // here `s2` means a 2x scale

我为你写了一个简单的演示:http://jsfiddle.net/qiao/EhCyd/1/

关于javascript - 使用 RaphaelJS 进行动画缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9074303/

相关文章:

拉斐尔.js : How to drag one side of the path in my case?

javascript - 缩放后如何在 Raphael 中应用(或维护)线条样式?

调整 CK 编辑器大小的 Javascript 不起作用

javascript - 刷新页面时阻止 safari 显示未保存的表单提示

javascript - 使用外部 JS 库的 Angular 2 组件

Android animateLayoutChanges 和锚定的 fab 闪烁

javascript - Raphael 缩小版本不适用于 IE。任何想法?

javascript - 当我点击 `data-id` 和 `dateFrom` 日期选择器时,我们如何获得每个 `dateTo`?

CSS圆形边框填充动画

iPhone - 是否可以创建从中心向外显示图像的动画?