raphael.js菜鸟笔记（二）

Raphael.animation()及el.animate()的用法

该raphael.js的api的作用是设置元素动画，它的用法和jquery中的animation的用法是相同的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Raphael.jsanimation的用法</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"});//        Raphael.animation({a,b,c,d)是设置元素动画的函数，该函数有4个参数，第一个为对象即元素attr的，表示动画结束后的样子，第二个为动画的持续时间，// 第三个为动画的执行方式，第四个为回调函数，可选参数。var anima = Raphael.animation({"fill": "red", "cx": 100, "r": 10}, 1000, "easing",function (){alert("动画执行完毕，执行毁掉函数，该函数为可选参数")});//el.animate(),参数为Raphael.animation,或者是直接把Raphael.animation内容作为参数。circle.click(function () {circle.animate(anima);
//            circl.animate()为元素执行动画。})</script></div></body>
</html>

只需要掌握raphael中attr的设置方法就好。attr的一些相应的方法在
raphael.js菜鸟笔记（一）中有简单的介绍

raphael.js菜鸟笔记（二）相关推荐

Vue.js 学习笔记二，一些输出指令
Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...
JS学习笔记二——JavaScript 基础知识
JavaScript 基础知识一.JavaScript 变量二.JavaScript 的输出三.JavaScript 运算符四.结语一.JavaScript 变量变量是指在程序运行过程中, ...
面向对象编程（OOP）----BLUE大师JS课堂笔记(二)
一,把面向过程的程序改写成面向对象的程序 1.前提所有的程序都在onload里面 2.改写不能函数嵌套,可以全局变量 3.onload-------------------->构造函 ...
JS学习笔记二 DOM，正则表达式简单例子介绍
一.正则表达式例子: var patt = /w3school/i; 例子解释: /w3school/i 是一个正则表达式. w3school 是模式(pattern)(在搜索中使用). i 是修饰 ...
node.js学习笔记(二)：核心
NodeJS核心东西随着版本更新越来越多,详情看官方文档:http://nodejs.org/api/ 下面简单介绍几个用的比较多的 1.全局对象在浏览器JavaScript 中,通常windo ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...
Vue.js 学习笔记一
上手前的一些概念为啥要用Vue.js Vue.js 是目前最流行的前端框架之一,专注于视图层,容易上手. 使用Vue.js,通过框架提供的指令可以减少很多DOM操作(数据的双向绑定),提高渲染效率, ...
node.js 学习笔记（二）模板引擎和C/S渲染
node.js 学习笔记(二)模板引擎和C/S渲染文章目录 node.js 学习笔记(二)模板引擎和C/S渲染一.初步实现Apache功能 1.1 使用模板引擎 1.2 在 node 中使用模板引 ...
js入门笔记整理（二）——操作符
上一篇:js入门笔记整理一元操作符递增递增分为前置递增和后置递增前置型--两个加号(++)放在前面 var num = 1;++num; 这个操作其实就是给num加1,上面的列子等效于: va ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...

raphael.js菜鸟笔记（二）

Raphael.animation()及el.animate()的用法

raphael.js菜鸟笔记（二）相关推荐

最新文章

热门文章