009_Raphael动画

1. 元素变换

1.1. 唯一推荐的元素变换方法是transform()方法。它有4个命令:

T/t平移
s缩放
r按角度旋转
m变换矩阵

1.2. 旋转和缩放命令的原点坐标为可选参数, 默认的是该元素的中心点。

1.3. 有一点需要注意, transform方法并不改变元素本身的任何状态。无论你平移多少, transform执行后你获得坐标信息仍旧创建元素时的坐标, 但是transform的参数在变化。也就是transform的内容你是可以获得的。无论你执行多少次transform, 它保存着现在状态和创建状态之间的转换内容, 其实transform就是元素本身的一个属性, 而不是去改变元素的其它属性。

1.4. T是绝对平移, 而t是相对平移。绝对, 就是无论其它什么变换我都不管不顾只会去执行我后面紧跟的参数, 所以T执行的是不管你前面转了90度还是没转, 我都x轴平移100px。而相对, 则是我转了90度, 我的头部(假设元素都有一个头部)本来朝右变成了朝下, x轴平移100px, 我们向着x平移100px, 但是实际是去y轴平移了100px, 因为我本来指向x轴的头部变成了y轴方向。

2. 动画效果

2.1. Raphael的图形动画效果可以达到非常平滑的程度, 并且任何属性都可以, 不论是颜色、透明度、宽度、高度还是其它细节。

2.2. Raphael的动画效果方法语法: Element.animate({动画属性的键值对}, 动画时间, 动画类型, 回调函数);

2.3. 动画类型其实就是动画过渡公式, 主要有以下这些类型:

"linear"(线性)
"<"或"easeIn"或"ease-in"(由慢到快)
">"或"easeOut"或"ease-out"(又快到慢)
"<>"或"easeInOut"或"ease-in-out"(由慢到快再到慢)
"backIn"或"back-in"(开始时回弹)
"backOut"或"back-out"(结束时回弹)
"elastic"(橡皮筋)
"bounce"(弹跳)

3. 例子

3.1. 代码

<!DOCTYPE html>
<html><head><title>Raphael动画</title><script type="text/javascript" src="raphael.js"></script><style type="text/css">#sample-1, #sample-2, #sample-3, #sample-4 {width: 600px;border: 1px solid #aaa;}</style></head><body><h1>元素变换-按角度旋转</h1><div id="sample-1"></div><script type="text/javascript">var paper1 = Raphael("sample-1", 600, 150);paper1.rect(20, 20, 60, 40).attr({"stroke": "red","fill": "green"});// 以矩形中心点旋转90度paper1.rect(120, 20, 60, 40).attr({"stroke": "red"}).transform("r 90");// 以220,60的点旋转90度paper1.rect(220, 20, 60, 40).attr({"stroke": "red"}).transform("r 90, 220,60");</script><h1>元素变换-缩放</h1><div id="sample-2"></div><script type="text/javascript">var paper2 = Raphael("sample-2", 600, 200);paper2.rect(20, 20, 60, 40).attr({"stroke": "red","fill": "green"});// 矩形缩放1.5倍paper2.rect(120, 20, 60, 40).attr({"stroke": "red"}).transform("s 1.5");// 矩形缩放1.5倍后, 再缩放1.5倍paper2.rect(250, 80, 60, 40).attr({"stroke": "red"}).transform("s 1.5 s 1.5");// 以450,110的点, 矩形x边缩放1.5倍, y边缩放2倍paper2.rect(400, 80, 60, 40).attr({"stroke": "red"}).transform("s 1.5,2, 450,110");</script><h1>元素变换-平移</h1><div id="sample-3"></div><script type="text/javascript">var paper3 = Raphael("sample-3", 600, 200);paper3.rect(20, 20, 60, 40).attr({"stroke": "red","fill": "green"});var rect31 = paper3.rect(20, 20, 60, 40).attr({"stroke": "red"}).transform("r 90 t 100,0");paper3.text(60, 90, "x: " + rect31.attr('x') + ", y: " + rect31.attr('y') + "\ntransform: " + rect31.transform()).attr({'font-size': 11,  'fill': 'blue'  });var rect32 = paper3.rect(20, 20, 60, 40).attr({"stroke": "red"}).transform("r 90 T 100,0");paper3.text(230, 50, "x: " + rect32.attr('x') + ", y: " + rect32.attr('y') + "\ntransform: " + rect32.transform()).attr({'font-size': 11,  'fill': 'blue'  });</script><h1>动画效果</h1><div id="sample-4"></div><script type="text/javascript">var paper4 = Raphael("sample-4", 600, 200);var rect4 = paper4.rect(20, 20, 60, 40).attr({"fill": "green"});rect4.animate({ transform: "r 90 t 100,0 s 1.5" }, 5000, "bounce", function(){ console.log("finish"); });</script></body>
</html>

3.2. 效果图

009_Raphael动画相关推荐

Android Animation (安卓动画）概念简介
Android Animation Android 四种动画分别为逐帧动画和补间动画.属性动画.过渡动画: Frame Animation (逐帧动画) 实现方式:xml 和 Java代码图片跳转的 ...
Android动画之帧动画和补间动画
Android系统提供三种动画:帧动画.补间动画和属性动画.这里先分析总结帧动画和补间动画. FrameAnimation 帧动画,通俗来说就是按照图片动作顺序依次播放来形成动画,创建帧动画可以用 x ...
Android 动画 ViewPropertyAnimator 的使用
ViewPropertyAnimator 说明: ViewPropertyAnimator 可为View对象上的选择属性启用自动和优化的动画, ViewPropertyAnimator 不是由调用方构 ...
Android ViewAnimationUtils (动画) 的使用
先看下ViewAnimationUtils 实现的几个常见的效果图如下: ViewAnimationUtils 的作用: 设置剪切圆动画的动画制作器一般的使用如下: Animator revea ...
Android AnimationUtils (动画)的使用
AnimationUtils 其实就是补间动画(Tween Animation) 在xml 中的写了动画java 中调用这边打算就写一个demo 简答的记录下它的使用详细的请看点击查看,这篇博客 ...
Android ProgressBar 加载中界面实现(loading 动画) 实现菊花的效果
实现的效果图如下: 使用方法ProgressBar ,如果感觉这个动画不是自己想要的,需要根据ui的图片来实现只需要将xml中的animated-rotate 修改为animation-list 贴 ...
Android 属性动画(Property Animation) ObjectAnimator的介绍
先说下属性动画与视图动画的区别: 视图动画系统仅提供为 View 对象添加动画效果的功能,因此,如果您想为非对象添加动画效果,则必须实现自己的代码才能做到.视图动画系统也存在一些限制,因为它仅公开 ...
Android 属性动画(Property Animation) ValueAnimator 的介绍
先说下属性动画与视图动画的区别: 视图动画系统仅提供为 View 对象添加动画效果的功能,因此,如果您想为非对象添加动画效果,则必须实现自己的代码才能做到.视图动画系统也存在一些限制,因为它仅公开 ...
Android 补间动画(Tween Animation)
Tween Animation(补间动画): Tween动画,通过对View的内容进行一系列的图形变换 (包括平移.缩放.旋转.改变透明度)来实现动画效果.动画效果的定义可以采用XML来做也可以采用编 ...

009_Raphael动画

009_Raphael动画相关推荐

最新文章

热门文章