KineticJS教程(7)

作者: ysm

7.图形变换

7.1.线性变化

Kinetic提供了一个图形对象的transitionTo(config)方法实现图形的线性变换,也就是从原始的状态线性变换到新的状态,这里的状态是指的尺度上的参数。方法的config参数也就是有关图形尺度的一些参数,比如 x, y, rotation, width, height, radius, strokeWidth, alpha, scale, centerOffset等。除了这些尺度参数,还需要一个duration参数,单位是秒,也就是指定这种线性变换是在多长时间内变换完成。

比如,下面代码实现图形在两秒钟内从原位置移动到横坐标100处,并逐渐变成透明:

<script>

shape.transitionTo({

x: 100,

alpha:0,

duration:2

});

</script>

7.2.变换中的速度

Kinetic的transitionTo(config)方法中的config参数包括一个easing属性,是指的变换是以较均匀的速度到达变换目的点还是在变换过程中在不同位置以不同速度进行变换。Easing可以设定的值包括ease-in、 ease-out、 ease-in-out、 back-ease-in、 back-ease-out、 back-ease-in-out、 elastic-ease-in、 elastic-ease-out、 elastic-ease-in-out、 bounce-ease-in、 bounce-ease-out、 bounce-ease-in-out、 strong-ease-in、 strong-ease-out以及 strong-ease-in-out。

在文章里很难形容这些值之间的不同,还是具体写成代码,在浏览器里看效果吧。

<script>

shape.transitionTo({

x: 100,

duration: 1,

easing: ‘ease-out’

});

</script>

7.3.变换完成后的回调方法

Kinetic的transitionTo(config)方法中的config参数还包括一个回调方法属性,这个方法会在变换完成后被执行。

<script>

shape.transitionTo({

x: 100,

duration: 1,

easing: “bounce-ease-out”,

callback: function() {

alert(“transition complete!”);

}

});

</script>

7.4.变换的开始与结束

当执行transitionTo方法的时候可以返回一个对象变量,并用这个对象的 start()、 stop() 和 resume()方法来启动、停止和恢复转换的执行。

<script>

var trans = shape.transitionTo(config);

// 开始转换

trans.start();

// 停止转换

trans.stop();

// 恢复转换

trans.resume();

</script>

KineticJS教程(7)的更多相关文章

  1. KineticJS教程(12)

    KineticJS教程(12) 作者: ysm  12.舞台 12.1.舞台的大小 舞台创建后还可以用舞台对象的setSize(width, height)方法来设置舞台的宽度与高度. <scr ...

  2. KineticJS教程(11)

    KineticJS教程(11) 作者: ysm 11.对象的上下关系 11.1.层的上下关系 Kinetic的层是按照添加到舞台的次序,由下向上排列,上层遮盖下层的图形.每个层各自有一个ZIndex编 ...

  3. KineticJS教程(10)

    KineticJS教程(10) 作者: ysm  10.在容器之间移动图形对象 Kinetic支持通过图形对象的moveTo(container)方法把图形对象从一个容器移动到另一个容器里,这个容器指 ...

  4. KineticJS教程(9)

    KineticJS教程(9) 作者: ysm  9.选择器 Kinetic在舞台.层和组对象上都提供了get方法,用于返回这三者中包含的对象. 9.1.根据ID获取对象 要用id获取对象,首先要给对象 ...

  5. KineticJS教程(8)

    KineticJS教程(8) 作者: ysm  8.动画 动画就是一帧帧的画面按照时间间隔显示出来,Kinetic给我们提供了一个舞台对象的onFrame方法,用这个方法可以绑定一个动画方法,我们要显 ...

  6. KineticJS教程(6)

    KineticJS教程(6) 作者: ysm 6.拖拽 6.1.拖拽功能 要实现Kinetic对象的拖拽功能很简单,只需要将图形对象的draggable属性设为true就可以了. <script ...

  7. KineticJS教程(5)

    KineticJS教程(5) 作者: ysm  5.事件响应 5.1.图形的事件响应 图形对象对事件的响应处理可以使用 on() 方法绑定事件类型和相应方法. On() 方法需要一个事件类型参数和相应 ...

  8. KineticJS教程(4)

    KineticJS教程(4) 作者: ysm  4.图形样式 4.1.填充 Kinetic中图形的填充属性可以在构造方法中的config参数中的fill属性进行设定,也可以用图形对象的setFill方 ...

  9. KineticJS教程(3)

    KineticJS教程(3) 作者: ysm  3.图形对象 3.1.Shape Kinetic提供了一个Shape对象用于在层上绘制图形,我们可以通过Kinetic.Shape()构造方法返回一个S ...

随机推荐

  1. PHP视频教程 字符串处理函数(一)

    字符串处理函数: PHP处理字符串的空格: strlen()   字符串长度 trim()对字符串左右空格删除 ltrim()对字符串左边空格删除 rtrim()对字符串右侧空格删除 PHP对字符串大 ...

  2. 「CSA49」Card Collecting Game

    「CSA49」Card Collecting Game 题目大意:有 \(n\) 种卡片,每种有 \(b_i\) 张,如果一个人集齐 \(k\) 张第 \(i\) 种卡片,那么其能获得的得分是 \(\ ...

  3. HDU5904 LCIS 水题

    http://acm.hdu.edu.cn/showproblem.php?pid=5904:// 说是LCIS其实和LCIS没有一点儿关系的水题. 代码 #include<cstdio> ...

  4. JZYZOJ1330 土地购买 dp 斜率优化

    不用long long的话只能ac一半的点而且完全查不出来错...放弃cin保平安..   x[i],y[i]分别为第i块土地的长和宽,输入后需要排序然后去掉冗余数据,最后得到的x[i]递增y[i]递 ...

  5. JDK源码(1.7) -- java.util.Map<K,V>

     java.util.Map<K,V> 源码分析 --------------------------------------------------------------------- ...

  6. Linux知识(4)----文件系统结构

    Ubantu 14.04的文件系统结构如下图所示: 参考资料: 1.http://www.cnblogs.com/wen858636827/archive/2012/12/26/2834373.htm ...

  7. 面试&笔试---c语言之字符串处理

    1.字串拷贝库函数strcpy 函数介绍: 原型声明:extern char *strcpy(char *dest,const char *src); 头文件:string.h 功能:把从src地址开 ...

  8. Apple Developer申请成功

    上周日白天,我去申请了Apple Developer.我先是在百度上浏览了一些经验教程,但是点进苹果开发者官网时却发现完全不是那么一回事.盖因它的页面经常在变,如同现在苹果在主推tvOS这个对中国用户 ...

  9. Spring在bean配置文件中定义电子邮件模板

    在上一篇Spring电子邮件教程,硬编码的所有电子邮件属性和消息的方法体中的内容,这是不实际的,应予以避免.应该考虑在Spring bean 配置文件中定义电子邮件模板. 1.Spring的邮件发件人 ...

  10. hdu 1532 Drainage Ditches (最大流)

    最大流的第一道题,刚开始学这玩意儿,感觉好难啊!哎····· 希望慢慢地能够理解一点吧! #include<stdio.h> #include<string.h> #inclu ...