基于HTML5 WebGL实现3D飞机叶轮旋转(3/4)

本篇文章主要介绍了"基于HTML5 WebGL实现3D飞机叶轮旋转"，主要涉及到方面的内容，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用，今天我们就来讲讲叶轮旋转在3D上的应用。在3D拓扑上可以创建各种各样...

螺旋桨果然动起来了，这个定时器让螺旋桨做匀速运动，但是飞机的螺旋桨在起飞和降落的时候其旋转速度都不是匀速，我们要模拟飞机起飞和降落时螺旋桨的旋转速度该如何处理呢？这个时候我们可以考虑用HT for Web中的动画来解决这个问题，关于动画的内容由于比较复杂，在这里就不深入探讨，等以后有机会再和大家分享动画的相关内容，今天就先讲诉下动画的基本用法，简单实现螺旋桨模拟起飞和降落的效果，具体的代码如下：

var params = {
    delay: 1500,
    duration: 20000,
    easing: function(t){
        return (t *= 2) < 1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2));
    },
    action: function(v, t){
        plane.a('angle', v*Math.PI*120);
    },
    finishFunc: function(){
        ht.Default.startAnim(params);
    }
};

ht.Default.startAnim(params);

我们来分析下代码：

1. delay属性：定义动画播放前的停顿时间；

2. duration属性：定义动画持续时间；

3. easing函数：定义动画缓动函数；

4. action函数：action函数必须提供，实现动画过程中的属性变化，在这里设置angle属性；

5. finishFunc函数：动画结束后调用的函数，在这里又启动了动画，让螺旋桨不断的旋转。 

运行代码，你会发现螺旋桨在1.5秒后进入旋转状态，并且旋转速度由慢变快，再变慢直至停止，然后再过1.5秒后继续旋转，如此周而复始。 

好了，今天的内容到这里就结束了，整个Demo的运行效果可以通过下面的视频查看，最后再附上本次Demo的所有代码。

http://v.youku.com/v_show/id_XMTI5NDI5MzYyOA==.html