Raphael.animation()的巧妙用法

来源:互联网 发布:好看的日本电网络视剧 编辑:程序博客网 时间:2024/05/17 23:37

利用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>