本次教程的内容:主要介绍怎样通过踢踏编程(playteka)平台上的踢踏动画(playDraw)软件,创作一只三体形态(像立体形态)的眼睛,并且眼球跟随鼠标移动而转动;在本次创作中需要使用踢踏动画编程中的“平移”模块、和“距离”模块。

  • 在踢踏动画软件的编辑板->坐标变换工具箱中的“平移”模块屏幕截图 2016-03-07 22.41.32功能是将画布初始原点坐标位置(0,0)移动到另一个由“平移”模块指定的坐标位置(例如:指定的x,y的坐标位置),并且平移后的坐标位置作为新的原点坐标位置;在踢踏动画编程软件中初始原点坐标是位于画布最左上角顶点坐标位置该坐标位置值为(0,0);平移后的新原点坐标虽然实际坐标位置改变,但新原点坐标位置值任然为(0,0) 。
  • 在踢踏动画软件的编辑板->数据函数工具箱中的“距离”模块屏幕截图 2016-03-07 22.36.21功能是计算画布中任意指定两点坐标之间的长度。
  • 本次教程程序运行输出效果如下图所示:

屏幕截图 2016-03-15 14.21.54


一、一只三体眼创作说明:

本次创作的三体眼从画面展现效果上(非眼睛结构上)分为两部分:眼白部(如下图中的大圆,以下简称大圆)、和眼球(如下图中的绿色小圆,以下简称小圆),并且小圆在大圆内随着鼠标的移动而转动。

QQ截图20160611134152

1、使用编辑板->坐标变换工具箱中的“平移”模块屏幕截图 2016-03-07 22.41.32平移画布原点坐标位置,从画布的最左上角原点坐标(0,0)位置平移到画布中心坐标(x,y)位置,平移后的新原点坐标虽然实际坐标位置改变,但新原点坐标位置值任然为(0,0)  ;

  • 设置平移模块x和y的值:x = 画布宽度 ÷ 2   、 y = 画布高度 ÷ 2 ,那么(x,y)坐标位置正好位于画布中心;

2、怎样创作大圆?创作大圆需要知道大圆的圆心坐标位置和大圆直径;

  • 设置大圆直径:大圆直径变量设置为D1 ,并且D1 = 50;
  • 设置大圆圆心坐标位置:新原点坐标就是大圆圆心坐标位置(0,0);
  • 大圆代码实现屏幕截图 2016-06-21 08.26.58椭圆坐标值(X=0,Y=0)是基于新原点坐标位置(中心位置),高度和宽度相同画出来的是个正圆;

3、怎样确认鼠标坐标位置?因为小圆将随鼠标的移动而转动,所以鼠标坐标位置是不断在变化的

  • 设置鼠标移动坐标位置变量:鼠标坐标位置变量为(dx,dy);
  • 计算鼠标坐标dx和dy变量值QQ截图20160606135344模块和QQ截图20160606135407模块获取的是鼠标实时移动绝对值坐标,通过与平移(x,y)坐标计算出:dx = mouseX – x  和 dy = mouseY – y ;

4、怎样创作小圆?创作小圆需要知道小圆的圆心坐标位置和小圆直径;

  • 设置小圆圆心坐标位置:小圆圆心坐标位置变量为(xx,yy) ;
  • 设置小圆直径:小圆直径变量为D2,并且D2 = 30 ;
  • 从上图可以看到有两个等比例直角三角形:一个是从大圆圆心坐标(0,0)到坐标(xx,yy)为斜边的小直角三角形(设置小直角三角形斜边变量为L1),另一个是从大圆圆心坐标(0,0)到坐标(dx,dy)为斜边的大直角三角形(设置大直角三角形斜边变量为L2),并且是两个等比例的直角三角形;在数学中知道如果已知两个等比例三角形中的任何一条边的比例(例如:一个小直角三角形斜边线L1与另一个大直角三角形斜边线L2的比例),那么就可以得到两个等比例三角形另外两边的长度;
  •  设置两个直角三角形斜边长度变量:设置从大圆圆心坐标(0,0)到小圆圆心坐标(xx,yy)的长度变量为L1,设置从大圆圆心坐标(0,0)到鼠标坐标位置(dx,dy)的长度为L2。
  • 计算上图中小直销三角形斜边L1长度:L1 = D1/2 -D2/2 = (D1 -D2)/2  简单说明L1的长度是大圆半径减去小圆半径的长度;
  • 计算上图中大直销三角形斜边L2长度:可以通过数学几何中的勾股定理计算出L2的长度;在踢踏动画编程软件中提供了一个“距离”模块屏幕截图 2016-03-07 22.36.21计算L2的长度,“距离”模块中的(X1,Y1)设置的是大圆圆心坐标值(0,0),“距离”模块中的(X2,Y2)设置的是鼠标坐标位置变量(dx,dy);
  • 计算两个等比例直角三角形斜边的比例值:比例值变量为P,P = L1/L2 ;
  • 计算小圆圆心坐标xx和dd变量值:可以通过等比三角形比例值P计算出:xx = dx × P   和  yy = dy × P  ;
  • 小圆代码实现屏幕截图 2016-06-21 08.27.26椭圆坐标值(X=xx,Y=yy),高度和宽度相同画出来的是个正圆;

二、计算公式转换为踢踏动画代码:

QQ截图20160615175013


以下是本次踢踏动画创作教学视频: