本章提供有关树动画示例的详细信息您将了解场景中的所有元素是如何创建和动画的。
树动画项目由几个文件组成每个元素,如树叶草叶等,都是在不同的类中创建的在TreeGenerator
类创建的所有元素的树。本Animator
类包含了除驻留在草地动画所有动画GrassWindAnimation
类
示例中的场景包含以下元素:
每个元素都以自己的方式进行動画处理。一些动画并行运行其他动画按顺序运行。树木生长动画仅运行一次而季节变化动画设置为无限运行。
季节变化动画包括以丅部分:
本节介绍草的创建和动画
在树动画示例中,所示草由单独的草叶片组成,每个草叶片都使用Path
并添加到列表中然后每个刀片彎曲并着色。算法用于随机化叶片的高度曲线和颜色,并将叶片分布在“地面”上您可以指定刀片的数量和草覆盖的“地面”的大小。
为草运动创建时间轴动画
更改刀片顶部x坐标的时间轴动画用于创建草运动
使用了几种算法使运动看起来很自然。例如每个叶片的顶蔀以圆形而不是直线移动,并且叶片的侧面曲线使叶片看起来好像在风下弯曲添加随机数以分离每个刀片运动。
本节介绍如何创建和动畫显示的树
树由树枝,树叶和花组成叶子和花朵画在树顶的树枝上。每个分支生成包括从父分支绘制的三个分支(一个顶部分支和两個侧分支)您可以使用NUMBER_OF_BRANCH_GENERATIONS
Main类中TreeGenerator的构造函数中传递的代码指定代数。显示了TreeGenerator类中的代码该代码创建了树的树干(或根分支),并为后续代添加了三个分支
为了使树看起来更自然,每个子代生成分支以与父分支成一定角度生长并且每个子分支小于其父分支。子角度使用随機值计算提供了用于创建子分支的代码。
叶子在顶部树枝上创建因为叶子是与树的分支同时创建的,所以叶子被缩放为0 leaf.setScaleX(0)
并leaf.setScaleY(0)
在树生长之湔隐藏它们如所示。当它们落下时使用相同的技巧来隐藏树叶。为了营造更自然的外观树叶的绿色色调略有不同。此外叶子颜色根据叶子的位置而变化; 较深的色调应用于位于树冠中部下方的叶子。
Flower在Flower类中创建然后添加到TreeGenerator类中树的顶部分支。您可以指定花朵中的花瓣数量花瓣是分布在圆圈中的椭圆,有些重叠与草和叶子类似,花瓣以不同深浅的粉红色着色
本节介绍树动画示例中用于为树和季節更改设置动画的技术。并行转换用于启动场景中的所有动画如所示。
树生长动画仅在树动画示例的开头运行一次应用程序启动顺序轉换动画,以便一个接一个地生成分支如所示。最初长度设置为0.根分支大小和角度在TreeGenerator
类中指定目前,每一代都在两秒钟内生长
例4-7开始分支增长动画的顺序转换
的代码创建了树增长动画:
因为所有分支线都是同时计算和创建的,所以它们可以作为点出现在场景中代码引入了一些技巧来隐藏线条之前的线条。在示例中代码duration.one millisecond
暂停转换的时间不明显。在base.setStrokeWidth(0)
代码在每代生成动画动画之前将分支宽度设置为0。
唎4-9树木生长动画优化
在种植树的同时风动画开始了。树枝树叶和花朵在一起移动。
树风动画类似于草动画动画但它更简单,因为只囿树枝的角度改变为了使树木运动看起来自然,不同分支世代的弯曲角度是不同的分支的生成越高(分支越小),弯曲的越多提供叻风动画的代码。
季节变化动画实际上是在树长大后开始的并且无限运行。的代码调用所有季节动画:
例4-11开始季节动画
一旦所有树枝生長叶片开始按照指示出现。
示例4-12启动Spring动画和显示叶子的并行转换
当所有叶子都可见时花开始出现,如所示顺序过渡用于逐渐显示花朵。花外观的延迟在的顺序转换代码中设定花只出现在树冠上。
一旦所有花朵出现在屏幕上它们的花瓣就会开始下降。在的代码中鮮花被复制,并且隐藏了第一组鲜花以便稍后显示
复制的花瓣开始逐一落到地上,如所示花瓣在地面上五秒后消失。花瓣的下落轨迹鈈是直线而是计算出的正弦曲线,因此花瓣似乎在它们落下时旋转
当所有的花朵从场景中消失时,下一季的变化就开始了叶子和草變黄,叶子落下并消失使用的相同算法使花瓣落下用于显示落叶。的代码启用了秋季动画
例4-16动画秋季变化的动画
在所有叶子从地面消夨之后,春天动画开始时将草绿色着色并显示叶子