上一节我们讲到如何创建图形与建立组,这节我们具体讲解如何构建动画效果
var elem = document.getElementById('draw-animation');
var two = new Two({ width: 285, height: 200 }).appendTo(elem);
var circle = two.makeCircle(-70, 0, 50);
var rect = two.makeRectangle(70, 0, 100, 100);
circle.fill = '#FF8000';
circle.stroke = 'orangered';
rect.fill = 'rgba(0, 200, 255, 0.75)';
rect.stroke = '#1C75BC';
var group = two.makeGroup(circle, rect);
group.translation.set(two.width / 2, two.height / 2);
group.linewidth =5;
two.update();
根据之前的讲解,先绘制出如图的两个形状
创建一个由小到大并旋转的动画,需要先将图形缩小
group.scale = 0.1;
创建动画的代码如下:
// bind可以绑定一个函数来在函数中表达动画属性
// 两个参数,第一个参数是string格式,表示要监听的事件,第二个参数是一个函数,函数中的参数为帧数
two.bind('update', function(frameCount) {
// 代码的意思是每调用一次,执行一次two.update(); 帧数为每秒60次即每秒钟执行60次
if (group.scale > 0.9999) {
group.scale = 0.1;//使缩放与回转变成0,就是初始位置
}
//设置时间与动画变化的属性关联方程式
var t = (1 - group.scale) * 0.125;//声明一个t变量,随着缩放的增大而减小并且确定其他关系,如果缩放可以到1,time会变成0
group.scale += t;//使缩放不断+=time,由于缩放的增大,第一个关系式会使time减小,所以缩放的增加速度会一点一点减慢。假设缩放可以到1,那么缩放会停止增加
group.rotation += t * 4 * Math.PI;//回转幅度不断+=time的4倍(math.pi是180度)
});
two.play(); // 最后.play();启动动画
这里需要注意,two.play()与two.update()不能同时使用,会失去效果,所以使用two.play()以后,要把原来的two.update()删掉
如上代码的动画效果如图
如果想自己进行修改,需要对下面的方程式进行自我调整,比如说要添加一个透明度的效果
if(group.opacity<0){
group.opacity=1;
}
group.opacity -= 0.01;
在bind中添加如上代码,可以产生的效果如图:
是不是很好玩呢?
下面是一个行星轨迹的简单代码,大家根据代码自己进行修改,可以做出简单的行星运行轨迹动画
<script type="text/javascript">
var elem = document.getElementById('draw-animation');
var two = new Two({ width: 700, height: 700 }).appendTo(elem);
//track 外层大运行轨迹
var track = two.makeCircle(0, 0, 200);
track.fill='transparent';//透明的
track.stroke='#3366FF';
track.linewidth=3;
//恒星
var sun = two.makeCircle(0,0,80);
sun.fill='#FF8000';
sun.stroke='#FF0000';
sun.linewidth=5;
//地球
var earth = two.makeCircle(0,0,50);
earth.fill='#9ACD32';
//月球
var moon = two.makeCircle(100,0,30);
moon.fill='#1C75BC';
//inline 小的运行轨迹
var inline = two.makeCircle(0,0,100);
inline.stroke='#3366FF';
inline.fill='transparent';
inline.linewidth=3;
//group 分组 一类型为一组
var group = two.makeGroup(inline,earth,moon);
var group1 = two.makeGroup(sun,track,group);
group1.translation.set(two.width / 2, two.height / 2); //整体向什么方位平移
group.translation.set(200, 0);
group.scale = 0.7; //比例
two.bind('update', function(frameCount) {//执行动画
group1.rotation += 0.003 *2* Math.PI;
group.rotation += 0.003 * Math.PI;
}).play();
</script>
效果如图:
那么two.js就简单的讲解到这里了,还有更多的属性方法等着大家去开发,有什么需要改进的欢迎指导