Raphael.animation()的巧妙用法

最新推荐文章于 2021-07-04 17:05:18 发布

有一个王小森

最新推荐文章于 2021-07-04 17:05:18 发布

阅读量813

点赞数 1

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

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

版权

raphael-js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用Raphael.js实现的动画实例，通过设置动画状态在不同时间点的变化，实现了元素在多个方向上的平滑移动效果。

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

利用Raphael.animation()巧妙的实现多个方向动画的效果的实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation.repeat的用法</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"
        });
        var anima = Raphael.animation({"50%": {"cx": 100}, "100%": {"cx": 200}}, 1000, "easing");
//  此处第一个参数为动画的状态，但是此处把状态分为了两部分，“50%”为前一半时间应完成的动画，“100%”为后一半时间应完成的动画。该方法可以设置多个方向的动画变化。

    </script>
</div>

</body>
</html>