| This

Raphael 动画
代码

let paper = Raphael('view', 400, 200);
// 一个闪烁的圆圈
let circle1 = paper.circle(50, 50, 30).attr({fill: 'white'});
// 创建一个动画对象
let anim1 = Raphael.animation({fill: 'red'}, 500);
// 动画对象的 repeat() 函数用于设置动画重复次数，参数为重复次数，如果一直循环则传 Infinity
anim1 = anim1.repeat(Infinity);
// 动画对象的 delay() 函数用于设置动画延迟开始时间，单位毫秒
// 注意，如果是循环的动画，则每次开始前都会延迟
anim1 = anim1.delay(1000);
circle1.animate(anim1);

// 点击切换颜色动画的圆圈
let circle2 = paper.circle(150, 50, 30).attr({fill: 'white'});
circle2.click(function (event, x, y) {
    if (circle2.attr("fill") === 'white') {
        circle2.animate({fill: 'red'}, 500, "liner", function () {
            // 动画结束时的回调函数
            console.log("Animation end callback");
        });
    } else {
        circle2.animate({fill: 'white'}, 500);
    }
});

// 半径扩大的圆形
let circle3 = paper.circle(250, 50, 1).attr({fill: 'white'});
let anim3 = Raphael.animation({r: 30}, 1000).repeat(Infinity);
circle3.animate(anim3);

// 移动的圆形
let circle4 = paper.circle(320, 50, 30).attr({fill: 'white'});
let anim4 = Raphael.animation({cx: 370}, 1000).repeat(Infinity);
circle4.animate(anim4);

// 使用 Raphael.animation() 函数创建动画对象时，第三个参数是动画缓和效果
// 不同的动画缓和效果
let anim5 = Raphael.animation({cy: 190}, 1000, "linear"); // 线性
paper.circle(10, 110, 10).attr({fill: 'white'}).animate(anim5);

let anim6 = Raphael.animation({cy: 190}, 1000, "<"); // 缓入，等同  “easeIn” 、 “ease-in”
paper.circle(30, 110, 10).attr({fill: 'white'}).animate(anim6);

let anim7 = Raphael.animation({cy: 190}, 1000, ">"); // 缓出，等同 “easeOut” 、 “ease-out”
paper.circle(50, 110, 10).attr({fill: 'white'}).animate(anim7);

let anim8 = Raphael.animation({cy: 190}, 1000, "<>"); // 缓入缓出，等同 “easeInOut” 、 “ease-in-out”
paper.circle(70, 110, 10).attr({fill: 'white'}).animate(anim8);

let anim9 = Raphael.animation({cy: 190}, 1000, "backIn"); // 后移进入，向后移动后进入，等同 “back-in”
paper.circle(90, 110, 10).attr({fill: 'white'}).animate(anim9);

let anim10 = Raphael.animation({cy: 190}, 1000, "backOut"); // 后移结束，结束时先冲出一段再向后移动，等同 “back-out”
paper.circle(110, 110, 10).attr({fill: 'white'}).animate(anim10);

let anim11 = Raphael.animation({cy: 190}, 1000, "elastic"); // 弹跳
paper.circle(130, 110, 10).attr({fill: 'white'}).animate(anim11);

let anim12 = Raphael.animation({cy: 190}, 1000, "bounce"); // 弹回
paper.circle(150, 110, 10).attr({fill: 'white'}).animate(anim12);

// 多个动画效果
paper.circle(170, 110, 10).attr({fill: 'white'}).animate({cy: 190}, 1000).animate({fill: 'red'}, 1000); // 移动的同时改变颜色
// paper.circle(170, 110, 10).attr({fill: 'white'}).animate({cy: 190, fill: 'red'}, 1000); // 与上面效果相同

// 变形动画：向右平移 100 像素，同时旋转 90 度，同时 x 方向扩大 2 倍
let anim13 = Raphael.animation({transform: 't100,0r90s2,1'}, 1000).repeat(Infinity);
paper.circle(190, 110, 10).attr({fill: 'white'}).animate(anim13); // 变形动画
代码

结果
