JSFL自動繪畫_3_貝塞爾曲線逐幀動畫

序列->動畫

我們將上次做的大寶劍分配到每一幀中，構成一個逐幀動畫。如下

動畫的兩幀間會保持一定的關係，這樣動畫會流暢一些。

這種曲線運算的動畫，適合做一些特效，比如:火焰特效?的邊緣，氣流特效的流向等等。

很多遊戲都是在遊戲運行時通過同樣算法實現的，這樣容易製作物理互動效果。

當然，我們也可以前置這些運算，降低遊戲內性能的佔用，前提就是放棄一部分互動能力。

如何自動生成動畫[從正常的做法入手，總結規律，提取可變參數]

後幀會按照前幀的基準值進行一定偏移，但是線條依然要保證流暢。

這裏我們用貝塞爾曲線代替流暢線條，然後，調整筆刷，通過對控制點進行逐幀微調，來創建一些逐真動畫。

首先嚐試豎直火焰，

選擇這樣的筆刷，調整寬度到足夠大

嘗試繪畫兩筆，看起來第三個效果不錯。也就是說，按照曲線繪畫在一定的角度和範圍內，模擬類似火焰?的效果，還是可行的。

顯然，一定長度上左右搖擺的曲線，二階貝塞爾曲線是無法辦到的。我們採用三階，先試試看。用60寬的線，畫120長，稍微擺動一下上下兩個控制點，下面抖動的多一些。繪畫的效果如下[內部在複製一個換一個顏色做內焰]

感覺還可以，開始碼代碼。

var _drawCurveSequence = function (times_, lengthRange_, xRange1_, yRange1_, xRange2_, yRange2_) {
    var _times = times_;
    var _per = 1 / _times;
    for (var _percent = 0; _percent < 1; _percent += _per) {
        var _length = (lengthRange_[0] + (lengthRange_[1] - lengthRange_[0]) * _percent);
        var _xPos1 = (xRange1_[0] + (xRange1_[1] - xRange1_[0]) * _percent);
        var _yPos1 = (yRange1_[0] + (yRange1_[1] - yRange1_[0]) * _percent);
        var _xPos2 = (xRange2_[0] + (xRange2_[1] - xRange2_[0]) * _percent);
        var _yPos2 = (yRange2_[0] + (yRange2_[1] - yRange2_[0]) * _percent);
        draw.drawCubicCurve(_length, {
            x: _xPos1 * _length,
            y: _yPos1 * _length
        }, {
            x: _xPos2 * _length,
            y: _yPos2 * _length
        });
    }
}
var _drawLikeFire = function (lineWidth_) {
    var _times = 5;
    _drawCurveSequence(_times, [lineWidth_ * 2, lineWidth_ * 3],
        [0.3, 0.5], [0, -0.5], [0.7, 0.8], [-0.1, 0.1]
        //p1.x起止   p1.y起止    p2.x起止   p2.y起止
    );
    _drawCurveSequence(_times, [lineWidth_ * 3, lineWidth_ * 2.5],
        [0.4, 0.5], [-0.5, 0], [0.8, 0.9], [0.1, -0.15]
    );
    _drawCurveSequence(_times, [lineWidth_ * 2.5, lineWidth_ *3],
        [0.2, 0.4], [0, 0.4], [0.5, 0.8], [-0.1, 0.1]
    );
    _drawCurveSequence(_times, [lineWidth_ * 3, lineWidth_ * 2],
        [0.4, 0.6], [0.35, 0], [0.6, 0.7], [0.2, -0.2]
    );
}

var _lineWidth = 60;//筆刷線寬
_drawLikeFire(_lineWidth);

通過調整兩個控制點，讓曲線擺動起來，長度也隨着百分比遞增進行變化。大致效果如下

因爲，數值是線性的，節奏太明顯了，在各個變化值上採用緩動並且打亂時序將控制點跟長度調整的實際錯位，這樣就會獲得更好的效果。放置多個，進行下時序混排。效果就好很多

逐幀輪廓線動畫

通過逐幀拉伸曲線的控制節點，達到平滑形狀補間的目的。

    for (var _idx = 0; _idx < _propertyList.length; _idx++) {
        var _percent = _propertyList[_idx].x / 100;
        var _length = other.current(_beginLength, _endLength, _percent);
        var _angle1 = other.current(_beginAngle1, _endAngle1, _percent);
        var _angle2 = other.current(_beginAngle2, _endAngle2, _percent);
        var _cx1 = other.current(_cxBegin1, _cxEnd1, _percent);
        var _cx2 = other.current(_cxBegin2, _cxEnd2, _percent);
        var _r1 = other.current(_rBegin1, _rEnd1, _percent);
        var _r2 = other.current(_rBegin2, _rEnd2, _percent);
        var _conPos1 = other.posOnCircle(_r1, _angle1);
        var _conPos2 = other.posOnCircle(_r2, _angle2);
        _conPos1.x += _cx1;
        _conPos2.x += _cx2;
        draw.drawCubicLeaf(_length, _conPos1, _conPos2);
    }

緩動這個屬性，然後繪畫出形狀補間，填充調整。如下

 

下一篇: JSFL自動繪畫_4_多邊形

https://blog.csdn.net/u010816580/article/details/99548212