當(dāng)耐特

pasition

Pasition - Path Transition with little JS code, render to anywhere - 超小尺寸的Path過(guò)渡動(dòng)畫類庫(kù)

• Github源代碼
• 在線演示

最近和貝塞爾曲線杠上了，如curvejs 和 pasition 都是貝塞爾曲線的應(yīng)用案例，未來(lái)還有一款和貝塞爾曲線相關(guān)的開(kāi)源的東西，暫時(shí)保密。

安裝

npm install pasition

CDN地址下載下來(lái)使用:

https://unpkg.com/pasition@1.0.0/dist/pasition.js

使用指南

pasition.lerp

你可以通過(guò) pasition.lerp 方法拿到插值中的shapes:

var shapes  = pasition.lerp(pathA, pathB, 0.5)
//拿到shapes之后你可以在任何你想要渲染的地方繪制，如canvas、svg、webgl等
...

pasition.animate

pasition.animate({
    from : fromPath,
    to : toPath,
    time : time,
    easing : function(){ },
    begin ：function(shapes){ },
    progress : function(shapes, percent){ },
    end : function(shapes){ }
})

path從哪里來(lái)？你可以從svg的path的d屬性獲取。

支持所有的SVG Path命令:

M/m = moveto
L/l = lineto
H/h = horizontal lineto
V/v = vertical lineto
C/c = curveto
S/s = smooth curveto
A/a = elliptical Arc
Z/z = closepath
Q/q = quadratic Belzier curve
T/t = smooth quadratic Belzier curveto

舉個(gè)例子:

pasition.animate({
            from: 'M 40 40 Q 60 80 80 40T 120 40 T 160 40 z',
            to: 'M32,0C14.4,0,0,14.4,0,32s14.3,32,32,32 s32-14.3,32-32S49.7,0,32,0z',
            time: 1000,
            easing : function(){ },
            begin:function(shapes){ },
            progress : function(shapes, percent){
                //你可以在任何你想繪制的地方繪制,如canvas、svg、webgl
            },
            end : function(shapes){ }
        });

對(duì)上面?zhèn)魅氲呐渲庙?xiàng)目一一解釋下:

• from 起始的路徑
• to 終點(diǎn)的路徑
• time 從from到to所需要的時(shí)間
• easing 緩動(dòng)函數(shù)(不填默認(rèn)是勻速運(yùn)動(dòng))
• begin 開(kāi)始運(yùn)動(dòng)的回調(diào)函數(shù)
• progress 運(yùn)動(dòng)過(guò)程中的回調(diào)函數(shù)
• end 運(yùn)動(dòng)結(jié)束的回調(diào)函數(shù)

在progress里可以拿到path轉(zhuǎn)變過(guò)程中的shapes和運(yùn)動(dòng)進(jìn)度percent（范圍是0-1）。下面來(lái)看看shapes的結(jié)構(gòu):

[
    [
       [],    //curve
       [],    //curve
       []    //curve   
    ],      //shape      
    [[],[],[],[],[]],     //shape      
    [[],[],[],[],[]]     //shape    
]

在開(kāi)發(fā)者工具里截圖:

每條curve都包含8個(gè)數(shù)字，分別代表三次貝塞爾曲線的 起點(diǎn) 控制點(diǎn) 控制點(diǎn) 終點(diǎn)。

每個(gè)shape都是閉合的，所以shape的基本規(guī)則是:

• 每條curve的終點(diǎn)就是下一條curve的起點(diǎn)
• 最后一條curve的終點(diǎn)就是第一條curve的起點(diǎn)

知道基本規(guī)則之后,我們可以進(jìn)行渲染，這里拿canvas里渲染為例子:

Fill模式:

function renderShapes(context, curves, color){
    context.beginPath();
    context.fillStyle = color||'black';
    context.moveTo(curves[0][0], curves[0][1]);
    curves.forEach(function(points){
        context.bezierCurveTo(points[2], points[3], points[4], points[5], points[6], points[7]);
    })
    context.closePath();
    context.fill();
}

shapes.forEach(function(curves){
    renderShapes(context,curves,"#006DF0")
})

Stroke模式:

function renderCurve(context, points, color){
    context.beginPath();
    context.strokeStyle = color||'black';
    context.moveTo(points[0], points[1]);
    context.bezierCurveTo(points[2], points[3], points[4], points[5], points[6], points[7]);
    context.stroke();
}

shapes.forEach(function(curves){
    curves.forEach(function (curve) {
        renderCurve(context, curve, "#006DF0")
    })	
})

當(dāng)然你也可以把shapes轉(zhuǎn)成SVG的命令在SVG渲染，這應(yīng)該不是什么困難的事情:

    function toSVGPath(shapes){
        //把 shapes數(shù)組轉(zhuǎn)成 M....C........C........Z M....C.....C....C...Z 的字符串。
    }

這個(gè)函數(shù)可以自行嘗試一下，生成出的字符串賦值給SVG的Path的d就可以了。

Github

https://github.com/AlloyTeam/pasition

License

This content is released under the MIT License.