DOC-08-04 Tree Animation样例

本章将介绍Tree Animation样例的细节。你将学习scene中的所有元素是如何被创建以及赋予动画效果的。

图4-1显示了带有一棵树的scene。

图4-1 Tree Animation

8_4_1 tree1

工程和元素

Tree Animation项目包含一系列文件。每个元素,比如树叶、草叶和其它元素都是在独立的类中创建的。TreeGenerator类创建了包含所有这些元素的树。Animator类包含了除了草地动画外的所有动画,草地动画在GrassWindAnimation类中定义。

样例中的场景包含以下元素:

● 带有树枝、树叶和花朵的树

● 草地

每个元素都按各自方式进行动画。有些动画是并行运行的,一些是串行运行的。树生长(tree-growing)动画只会运行一次,而季节变换(season-change)动画则会无限地执行下去。

图4-2 动画时间轴

8_4_2 timeline-animation

季节变换(season-change)动画包含以下部分:

● 树叶和花朵出现在树上

● 花瓣凋落和消失

● 树叶和草地颜色变化

● 树叶掉落到地面以及消失

小草

本节将介绍草地是如何被创建和赋予动画的。

创建草地

在Tree Animation样例中,如图4-3所示,草地由单独的草叶组成,每片草叶都是使用Path创建并添加到列表中。每片草叶都被弯曲和着色。有一个算法用来为草叶随机产生高度、弯曲度和颜色,并将其分布到“地面”上。你可以指定草叶的数量以及被小草覆盖的“地面”大小。

图4-3 草地

8_4_3 grass

例4-1 创建一片草叶

为草地的运动创建时间轴动画

草地的运动是使用一个修改草叶顶点x轴坐标值的时间轴动画创建的。

有多个算法保证让运动更加自然。例如,每片草叶的顶点都做圆周运动而不是直线运动,而草叶的侧面曲线让草叶看起来更像被风给吹弯。使用随机数字来区分不同草叶的运动。

例4-2 草地动画

本节将解释图4-4中的树是如何被创建以及赋予动画的。

图4-4

8_4_4 tree-only

树枝

树是由树枝、树叶和花朵组成。树叶和花朵画在树枝顶端。产生的每一代树枝都由3根子树枝(上方一根、两侧各一根)组成,从父树枝画出来。你可以在Main类中通过传递NUMBER_OF_BRANCH_GENERATIONS给TreeGenerator的构造方法来指定树枝的代数。例4-3展示了TreeGenerator类,其中创建了树的主干(即根树枝)并为下一代产生了三个树枝。

例4-3 主干

为了让树看起来更加自然,子代树枝都和父树枝有一定的角度,而且每个子树枝都比父树枝细。子树枝角度都是使用随机数计算的。例4-4提供了创建子树枝的代码片段。

4-4 子树枝

树叶和花朵

树叶都被创建在树枝的顶部。因为树叶是和树枝同时创建的,在树没有长大之前,树叶都通过调用leaf.setScaleX(0)和leaf.setScaleY(0)来缩小到看不见。代码如例4-5所示。同样的技巧也被用于在树叶掉落时隐藏之。为了看起来更加自然,树叶都有些轻微不同的绿色阴影。还有,树叶的颜色也会随着其位置的不同而变化,在树冠以下的叶子会有更深的阴影。

例4-5 树叶形状和位置

花朵是由Flower类创建,然后在TreeGenerator类中被加入到树的树枝末端。你可以指定花朵的花瓣数量。花瓣是由分布在圆形内部并带有部分重叠的一些椭圆组成。与草和树叶类似,这些花瓣也有不同的粉红色阴影。

为树的元素添加动画

这个小节解释了在Tree Animation样例中对树和季节变换所应用的动画技术。并行过渡被用于启动scene中的所有动画,如例4-6所示。

4-6 主动画

树的生长

树的生长动画只在Tree Animation样例的开始部分执行一次。应用程序启动一个串行过渡动画来让树枝一代代地生长,如例4-7所示。树枝最初的长度被设置为0。树干的长度和角度都是在TreeGenerator中指定的。当前每一代树枝的生长都耗时2秒钟。

4-7 启动树枝生长的串行过渡动画

例4-8中的代码创建了树的生长动画。

4-8 树枝生长动画

因为所有的树枝都是同时计算和创建的,它们以点的形式出现在scene中。代码中引入了一些技巧来在树枝生长之前隐藏它们。样例中的代码duration.one.millisecond将过渡难以被注意到的时间内暂停了。在例4-9中,base.setStrokeWidth(0)在每代树枝生长动画启动之前将树枝宽度为设置为0。

4-9 树生长动画优化

创建树冠舞动动画

在树生长的同时启动了风吹动画。树枝、树叶和花朵都会一起舞动。

树被风吹动的动画和小草摆动的动画类似,而且更简单,仅仅是树枝的角度变化了。为了让舞动看起来更加自然,不同代数的树枝弯曲角度是有区别的。代数越高的树枝(也就是更小的树枝)弯曲的更厉害。例4-10提供了风吹动画的代码。

4-10 风吹动画

设置季节变换动画

季节变换动画在树已经生长之后启动,而且会无限循环执行下去。例4-11中的代码展示了所有的季节动画。

4-11 启动季节动画

当所有的树枝完成生长后,树叶也开始出现,如例4-12所示。

4-12 春天动画和显示树叶动画并行

当所有的树叶都长出来后,花朵也开始绽放,如例4-13。串行渐变被用于逐步地显示花朵。花朵出现的延迟在例4-13中的串行渐变中被设置。花朵只在出现在树冠上。

4-13 显示花朵

当所有的花朵都出现在屏幕上后,花瓣开始凋落。如例4-14中的代码所示,这时花瓣被复制一份出来,并且原始的那份被隐藏起来待随后再显示。

例4-14 复制花瓣

复制出来的花瓣开始一个个掉落到地面,如例4-15所示。花瓣会在掉到地面上5秒之后消失。花瓣的掉落轨迹并非一条直线,而是计算出来的一条正玄曲线,所以花瓣看起来是旋转掉落。

4-15 花朵脱落

下一个季节的变化会在所有花朵从scene消失后开始。树叶和小草开始变黄,树叶掉落并消失。例4-15中用于花瓣掉落的算法这里也应用到了树叶掉落上。例4-16中的代码展示了秋天动画。

4-16 为秋天变化设置动画

在所有的树叶掉落到地面后,春天动画又启动了,草地开始变绿,树叶开始生长。

应用程序文件

NetBeans工程

tree_animation.zip

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/08/tree-animation/
百度已收录