zoukankan      html  css  js  c++  java

  • Raphael入门实例：动画与箭头

    raphael 实例

    动画

    隐藏和显示参数说明

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var c = paper.circle(50, 50, 40);
     
    function hide() {
      c.hide();
      setTimeout(show, 1000);
    }
     
    function show() {
      c.show();
      setTimeout(hide, 1000);
    }
     
    setTimeout(hide, 1000);
     

    改变属性参数说明

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var c = paper.circle(50, 50, 40);
     
    function change_attr() {
      //改变颜色
      c.attr('stroke', Raphael.hsb(Math.random(), 1, 1));
     
      setTimeout(change_attr, 1000);
    }
     
    setTimeout(change_attr, 1000);
     
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    var c = paper.circle(50, 50, 40);
     
    function change_one_attr() {
      //改变一个属性
      c.attr('stroke', '#FFF');
     
      setTimeout(change_muti_attr, 1000);
    }
     
    function change_muti_attr() {
      //改变多个属性
      c.attr({
        cx: 50 + Math.random() * 120,               //圆心x坐标
        cy: 50 + Math.random() * 100,               //圆心y坐标
        r: 10 * (Math.random() * 5 + 1),            //半径
        stroke: Raphael.hsb(Math.random(), 1, 1)  //颜色
      });
     
      setTimeout(change_one_attr, 1000);
    }
     
    setTimeout(change_one_attr, 1000);
     
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // 绘制箭头
    var c = paper.path("M10 10L100 10").attr({
      'arrow-end':'classic-wide-long',
      stroke: "#fff",
      "stroke-width": 2
    });
     
    var c = paper.path("M10 30L100 30").attr({
      'arrow-end':'block-wide-long',
      stroke: "#f00",
      "stroke-width": 2
    });
     
    var c = paper.path("M10 50L100 50").attr({
      'arrow-end':'open-wide-long',
      stroke: "#ff0",
      "stroke-width": 2
    });
     
    var c = paper.path("M10 70L100 70").attr({
      'arrow-end':'oval-wide-long',
      stroke: "#0f0",
      "stroke-width": 2
    });
     
    var c = paper.path("M10 90L100 90").attr({
      'arrow-end':'diamond-wide-long',
      stroke: "#0ff",
      "stroke-width": 2
    });
     

    动画参数说明

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var c = paper.circle(50, 50, 40);
     
    function animate() {
      var ms = 1000;       // 播放动画,持续时间1000毫秒
     
      c.animate({
        cx: 50 + Math.random() * 120,               //圆心x坐标
        cy: 50 + Math.random() * 100,               //圆心y坐标
      }, ms);
     
      setTimeout(animate, 2000);
    }
     
    setTimeout(animate, 1000);
     
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 效果同上,但是利用了动画结束时的回调函数
    var c = paper.circle(50, 50, 40);
     
    function animate() {
      var ms = 1000;
     
      c.animate({
        cx: 50 + Math.random() * 120,               //圆心x坐标
        cy: 50 + Math.random() * 100,               //圆心y坐标
      }, ms, function(){
        setTimeout(animate, 1000);
      });
    }
     
    setTimeout(animate, 1000);
     
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 效果同上,使用动画对象
    var c = paper.circle(50, 50, 40);
     
    function animate() {
      var ms = 1000;
      var anim = Raphael.animation({
        cx: 50 + Math.random() * 120,               //圆心x坐标
        cy: 50 + Math.random() * 100,               //圆心y坐标
      }, ms, function(){
        setTimeout(animate, 1000);
      });
     
      c.animate(anim);
    }
     
    setTimeout(animate, 1000);
     
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 效果同上,调用动画对象的delay()方法
    var c = paper.circle(50, 50, 40);
     
    function animate() {
      var ms = 1000;
      var anim = Raphael.animation({
        cx: 50 + Math.random() * 120,               //圆心x坐标
        cy: 50 + Math.random() * 100,               //圆心y坐标
      }, ms, function(){
        setTimeout(animate, 0);
      });
     
      c.animate(anim.delay(1000));
    }
     
    setTimeout(animate, 0);
     
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // 动画对象的过渡效果及repeat()方法
    var c = paper.circle(50, 50, 40);
     
    function animate() {
      var ms = 2000;
      var anim = Raphael.animation({
        50: {
          r: 60,
          stroke: '#f00'
        },
        100: {
          r: 40,
          stroke: '#fff'
        }
      }, ms);
     
      c.animate(anim.repeat("Infinity")); //Infinity为无限次
    }
     
    animate();
     
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 设置效果的曲线类型
    var c = paper.circle(50, 50, 40);
     
    function animate() {
      var ms = 1000;
      var easing = 'elastic';
     
      c.animate({
        cx: 50 + Math.random() * 120,               //圆心x坐标
        cy: 50 + Math.random() * 100,               //圆心y坐标
      }, ms, easing, function(){
        setTimeout(animate, 1000);
      });
    }
     
    setTimeout(animate, 1000);
     
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 设置随机曲线类型
    var c = paper.circle(50, 50, 40);
     
    function animate() {
      var ms = 1000;
      var easing = ['elastic', '', 'bounce', 'ease-in-out'][Math.round(Math.random() * 3)];
     
      c.animate({
        cx: 50 + Math.random() * 120,               //圆心x坐标
        cy: 50 + Math.random() * 100,               //圆心y坐标
      }, ms, easing, function(){
        setTimeout(animate, 1000);
      });
    }
     
    setTimeout(animate, 1000);
  • 相关阅读:
    评教说明
    使用firebird2.1与dbEntry.net做的设备报修小程序
    不知道为什么IList.Contains()总是返回FALSE
    DbEntry.net复合索引设置
    招生网上报名程序090512.rar
    aspnetdb生成
    推荐工具ActiveWriter
    dbEntry.net CK.K的高级应用
    tomcat添加虚拟子目录
    短信网关与短信猫
  • 原文地址：https://www.cnblogs.com/stephenykk/p/3564000.html
Copyright © 2011-2022 走看看