raphael.js菜鸟笔记（二）

最新推荐文章于 2025-06-14 10:17:00 发布

有一个王小森

最新推荐文章于 2025-06-14 10:17:00 发布

阅读量687

点赞数 1

CC 4.0 BY-SA版权

分类专栏： raphael-js 文章标签：动画 raphael animation anmate

本文链接：https://blog.youkuaiyun.com/wangxiaoxiaosen/article/details/72157203

raphael-js 专栏收录该内容

5 篇文章

订阅专栏

本文主要探讨Raphael.js中的Raphael.animation()和el.animate()方法，用于创建元素动画。使用方式类似于jQuery的animation，关键在于理解和应用attr设置。在前一篇raphael.js菜鸟笔记中已对attr进行了初步介绍。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Raphael.animation()及el.animate()的用法

该raphael.js的api的作用是设置元素动画，它的用法和jquery中的animation的用法是相同的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Raphael.jsanimation的用法</title>
    <script src="raphael.js"></script>
</head>
<body>
<div id="paper">
    <script>
        var paper = Raphael("paper", 600, 400);
        var circle = paper.circle(200, 200, 40);
        circle.attr({
            "fill": "blue",
            "stroke": "none"
        });

//        Raphael.animation({a,b,c,d)是设置元素动画的函数，该函数有4个参数，第一个为对象即元素attr的，表示动画结束后的样子，第二个为动画的持续时间，
        // 第三个为动画的执行方式，第四个为回调函数，可选参数。
        var anima = Raphael.animation({"fill": "red", "cx": 100, "r": 10}, 1000, "easing",function (){
            alert("动画执行完毕，执行毁掉函数，该函数为可选参数")
        });

//el.animate(),参数为Raphael.animation,或者是直接把Raphael.animation内容作为参数。
        circle.click(function () {
            circle.animate(anima);
//            circl.animate()为元素执行动画。
        })

    </script>

</div>

</body>
</html>