【Grasshopper进阶】在Grasshopper画布上实现动画效果

最近笔者为了能够做到对用户友好，深入地学习了一些前端的知识，等回过神来，发现已经好久没有在优快云上更过东西了… 结合最近看到的某些前端框架的底层，突然想到为什么不在Grasshopper上玩动画呢？比如电池拖出来之后，缓缓变形，然后出现一些UI的元素。

本来已经做好了手动写 Timer 或者写个线程循环来操作，结果人家Grasshopper自带这些个做动画必备的东西，那就简单了，抱着试试看的态度，完成了一个好玩的动画效果。就如同文章最开始的 gif 动画一般。

下面就 “简单” 介绍一下如何在Grasshopper中实现这个效果。

动画即循环

我们需要了解到动画的本质就是个循环绘制，在上图中的展示的效果中，GH_Canvas的Refresh()方法会被反复调用，每一次的刷新都会改变电池的大小，当刷新得足够快的时候，看起来就像动画了。随后的按钮的出现也是类似，每一次的刷新都会调整一次可见度，将可见度慢慢调高，快速刷新多次之后，这个按钮看起来就好像是“慢慢浮现”的效果了。

因此，“什么时候刷新”，或者说是“什么时候停止刷新”，这个条件就显得十分重要了。在上面的这个例子中，我们共有两段动画：

1. 电池的高度不断变高
2. 电池上按钮的浮现

第一段动画在 “ 电池高度达到指定高度 ” 后完成，第二段动画在 “ 透明度达到指定值 ” 后完成，于是，我们就形成了一个由下面if ... else ...构成的逻辑：

	if (电池高度未达到指定高度)
	{
		// 此时处在第一段动画中
		电池高度++；
		渲染电池；
		刷新画布；
	}
	else if (透明度未达到指定透明度)
	{
		// 此时处在第二段动画中
		透明度++;
		渲染电池；
		渲染按钮；
		刷新画布；
	}
	else
	{
		渲染电池和按钮；
		// 此时不应刷新画布，因两段动画均已结束
	}

按照这个主逻辑，我们就可以配置我们的动画了。

Grasshopper中的渲染

熟悉GH_ComponentAttribute的朋友大概已经知道我们要对其中的Render()方法进行大刀阔斧地重写了。没错，除此之外，我们还需要重写Layout()这个方法。 大家都是进阶教程的代码观察师了，详细的就在注释里写啦。

public class AnimatedAttribute : GH_ComponentAttributes
{
   
   
    public AnimatedAttribute(IGH_Component owner) : base(owner) {
   
    }
    int addedHeight = 1;
    int buttonFade = 0;

    protected override void Layout()
    {
   
   
    	// 调用基类（GH_ComponentAttributes）的 Layout() 方法，用来生成默认大小的电池外框，
    	// 我们再基于这个默认生成的外观进行高度的增加
        base.Layout();
		// 获取电池大小
        var bd = Bounds;
        // 对原电池大小进行一个修改，这个`addedHeight`修改的值是存储在电池实例上的，并且会在
        // Render时，参照我们上文中提到的
        bd.Height += addedHeight;
        Bounds = bd;
        // 之所以在 Layout()函数中修改Bounds，是因为这里是GH框架中完成Bounds测绘的函数，
        // 如果在其他函数中对Bounds进行修改，则很有可能造成奇奇怪怪的后果，比如电池大小很诡异