KineticJS教程(7)
KineticJS教程(7)
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)的更多相关文章
- KineticJS教程(12)
KineticJS教程(12) 作者: ysm 12.舞台 12.1.舞台的大小 舞台创建后还可以用舞台对象的setSize(width, height)方法来设置舞台的宽度与高度. <scr ...
- KineticJS教程(11)
KineticJS教程(11) 作者: ysm 11.对象的上下关系 11.1.层的上下关系 Kinetic的层是按照添加到舞台的次序,由下向上排列,上层遮盖下层的图形.每个层各自有一个ZIndex编 ...
- KineticJS教程(10)
KineticJS教程(10) 作者: ysm 10.在容器之间移动图形对象 Kinetic支持通过图形对象的moveTo(container)方法把图形对象从一个容器移动到另一个容器里,这个容器指 ...
- KineticJS教程(9)
KineticJS教程(9) 作者: ysm 9.选择器 Kinetic在舞台.层和组对象上都提供了get方法,用于返回这三者中包含的对象. 9.1.根据ID获取对象 要用id获取对象,首先要给对象 ...
- KineticJS教程(8)
KineticJS教程(8) 作者: ysm 8.动画 动画就是一帧帧的画面按照时间间隔显示出来,Kinetic给我们提供了一个舞台对象的onFrame方法,用这个方法可以绑定一个动画方法,我们要显 ...
- KineticJS教程(6)
KineticJS教程(6) 作者: ysm 6.拖拽 6.1.拖拽功能 要实现Kinetic对象的拖拽功能很简单,只需要将图形对象的draggable属性设为true就可以了. <script ...
- KineticJS教程(5)
KineticJS教程(5) 作者: ysm 5.事件响应 5.1.图形的事件响应 图形对象对事件的响应处理可以使用 on() 方法绑定事件类型和相应方法. On() 方法需要一个事件类型参数和相应 ...
- KineticJS教程(4)
KineticJS教程(4) 作者: ysm 4.图形样式 4.1.填充 Kinetic中图形的填充属性可以在构造方法中的config参数中的fill属性进行设定,也可以用图形对象的setFill方 ...
- KineticJS教程(3)
KineticJS教程(3) 作者: ysm 3.图形对象 3.1.Shape Kinetic提供了一个Shape对象用于在层上绘制图形,我们可以通过Kinetic.Shape()构造方法返回一个S ...
随机推荐
- 【BZOJ 2555】 2555: SubString (SAM+LCT)
2555: SubString Time Limit: 30 Sec Memory Limit: 512 MBSubmit: 2548 Solved: 762 Description 懒得写背景了 ...
- [TJOI2017]DNA --- 后缀数组
[TJOI2017]DNA 题目描述 加里敦大学的生物研究所,发现了决定人喜不喜欢吃藕的基因序列S, 有这个序列的碱基序列就会表现出喜欢吃藕的性状,但是研究人员发现对碱基序列S,任意修改其中不超过3个 ...
- 【2-SAT】【DFS】【分类讨论】Gym - 101617K - Unsatisfying
题意:给你一张2-SAT,问你加至少几句a V b(不能用非运算)这样的语句,使得其无法全为真. 如果最开始没有左右两项都含非运算的析取表达式,则无解,因为显然你可以对每一项的不含非的那项规定为真,使 ...
- SEL和IMP
http://www.jianshu.com/p/4a09d5ebdc2c SEL : 类成员方法的指针,但不同于C语言中的函数指针,函数指针直接保存了方法的地址,但SEL只是方法编号. IMP:一个 ...
- uoj 48 核聚变反应强度 次小公因数
[UR #3]核聚变反应强度 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/48 Description 著名核 ...
- java常用工具方法2
/* * Copyright 2005 Joe Walker * * Licensed under the Apache License, Version 2.0 (the "License ...
- Buck converter uses low-side PWM IC
The most common switching-power topology is a buck converter, which efficiently transforms high volt ...
- Current limiter allows large USB bypass capacitance
The USB (Universal Serial Bus) specification requires a connected USB device to present a load to th ...
- Ant构建文件解析
<?xml version="1.0" encoding="UTF-8"?> <!-- 在Ant脚本中,project是这个XML文档的根结点 ...
- springBoot 2.X-自定义拦截器
package com.cx.springboot.myInter; import javax.servlet.http.HttpServletRequest; import javax.servle ...