图片载入中...最近一次的WindowBlinds更新加入了主题加载动画的支持,让原先只能显示静态图片的加载过程有了更多的发挥空间,而这个动画也继续使用了WB专有的一个格式——NWA,他的特点是文件比较小,图像质量上可以像JPG那样选择不同的质量进行压缩,而同时也支持alpha通道。利用SkinStudio自带的工具可以通过导入TGA或者PNG文件来制作这个动画。下面简单介绍一下制作和导入的过程:


  1. 设计制作静态图片
    这个是我已经做好的一个静态的加载时的图片:
    图片载入中...


  2. 将静帧做成动画序列
    从上面的图片衍生一下,把一组序列放到一个新的tga文件中,最后保存。各帧是垂直排列的,我这里的动画主要是Loading字样有淡入淡出效果,而边缘风扇加入了径向模糊和旋转的效果:
    图片载入中...


  3. 生成NWA动画格式文件
    在SkinStudio的菜单中调出NWA动画制作工具:
    图片载入中...

    按右上角的Compress File会弹出打开窗口,选择我刚刚已经保存的那个动画序列TGA文件
    图片载入中...

    然后会要求你选择这个动画有几帧,刚刚我做的那个动画总共是5帧,所以这里我只要填上5然后就OK了:
    图片载入中...

    回到动画制作工具的界面后我们可以进行一些设置,拖动条控制动画压缩后的质量,数字越小质量越高,当然数字越大,最后生成的文件越小。按Test可以实时查看效果,确定之后按“Reencode”就会在原来TGA文件所在的目录下自动生成同名的NWA文件。
    图片载入中...


  4. 在SkinStudio中导入动画
    把NWA文件放到主题目录,然后按照图中所示的位置可以进行详细的动画设置。
    图片载入中...

    这里的代码如下:

    Image=sparta\wait.NWA  
    LoopBackTo=0    
    FrameRate=20
    HAlign=2
    VAlign=2

    Image是定义图片文件名
    LoopBackTo是定义第一轮动画播放完后从第几帧开始循环,如果是简单的动画我们就填0不用管他,而设成-1之后则是动画只循环一遍
    FrameRate是定义动画播放速度,数字越大,播放速度越快
    HAlign是定义动画的水平位置,0的时候动画在屏幕左侧,1的时候在右侧,2的时候在屏幕中间
    VAlign是定义动画的垂直位置,0的时候动画在屏幕顶部,1的时候在底部,2的时候在屏幕中间


  5. 这样设置完成之后我们就可以在加载主题的时候看到这段动画了:
    图片载入中...


微博 知乎 Twitter Dribbble Behance Instagram LinkedIn Unsplash