注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

jiyinyiyong

/chenyong/, 1991, dreamer, coder

 
 
 

日志

 
 
关于我

http://tiye.me

文章分类
网易考拉推荐

Raphael 图形框架尝试  

2011-12-29 01:20:20|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
WebGL 一直想学, 留意过这个框架, 演示里还有个此前我想做的取色板
文档看这里, 首页还一段 http://raphaeljs.com/reference.html
今天试试看, 不过我的代码用 coffee 和 Jade 写的, 基本能猜出来的
Jade 文件, 看首页的说明只要引入基本的标签即可
raphael.js 文件问上可以下载的 http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js
html
    head
        script(src='http://jiyinyiyong.blog.163.com/blog/raphael.js')
        script(src='http://jiyinyiyong.blog.163.com/blog/r.js')
    body
然后脚本 .coffee 文件我打算 $ alias 绑定自动编译到 r.js , 然后调试
$ alias c='vim r.coffee && coffee -bc r.coffee'
下面的文件自动增加 canvas 标签然后绘制红色的圆
window.onload = ->
    paper = Raphael 10, 50, 320, 200
    circle = paper.circle 50, 40, 10
    circle.attr 'fill', '#f00'
    circle.attr 'stroke', '#fff'
此前遇到浏览器报错 "R._g.doc.body is null", 因为忘了 window.onload , 注意别忘
下面最后 3 行的代码给 canvas 添加动画
{} 表示移动末位置, 2e1 表示毫秒时长
window.onload = ->
    paper = Raphael 10, 50, 320, 200
    circle = paper.circle 50, 40, 10
    circle.attr 'fill', '#f00'
    circle.attr 'stroke', '#fff'
    anim = Raphael.animation {'cx': 10, 'cy': 50}, 2e1
    circle.animate anim
其中 anim 对象两个方法, delay 延迟, repeat 重复, 返回 anim 对象
下面的代码延迟 100ms 开始移动, 并重复 3 次, repeat 参数 Infinity 无穷次
window.onload = ->
    paper = Raphael 10, 50, 320, 200
    circle = paper.circle 50, 40, 10
    circle.attr 'fill', '#f00'
    circle.attr 'stroke', '#fff'
    anim = Raphael.animation {'cx': 10, 'cy': 50}, 2e1
    circle.animate (anim.delay 100).repeat 3
添加动画有两种方式 Element.animate(…), 往元素的 animate 属性传参数
一种用上面的 anim = Raphael.animation(...) 做参数
另一种以此传入 (元素末状态参数{}, 时长, easing, callback) 参数
状态参数可查看文档的 Possible parameters http://raphaeljs.com/reference.html#Element.attr
easing 是运动速度变化, 可选参数 http://raphaeljs.com/reference.html#Raphael.easing_formulas
比如下面将圆运动到新的位置, 一次, 并回调输出 'done', 最后返回元素对象本身
window.onload = ->
    paper = Raphael 10, 50, 320, 200
    circle = paper.circle 50, 40, 10
    circle.attr 'fill', '#000'
    anim = Raphael.animation {'cx': 10, 'cy': 50}, 2e1
    circle.animate {'cx': 10, 'cy': 10},
        1000, '<',
        () -> console.log 'done'
另一个动画方法 Element.animateWith(…) 相似, 但多两个参数, 以便与另一个动画同时运行
window.onload = ->
    paper = Raphael 10, 50, 320, 200
    circle = paper.circle 50, 40, 10
    circle2 = paper.circle 50, 40, 10
    circle.attr 'fill', '#000'
    anim = Raphael.animation {'cx': 10, 'cy': 50}, 2e1
    sync = circle.animate {'cx': 10, 'cy': 10},
        1000, '<',
        () -> console.log 'done'
    circle2.animateWith circle, sync,
        {'cx': 40,'cy': 10},
        1000, '<',
        () -> console.log "fone"
第一步过去了, 文档好懂的, 白天看..
  评论这张
 
阅读(1435)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017