成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

騰訊AlloyTeam正式發(fā)布pasition - 制作酷炫Path過渡動(dòng)畫

shadowbook / 3025人閱讀

摘要：下面來看看的結(jié)構(gòu)在開發(fā)者工具里截圖每條都包含個(gè)數(shù)字，分別代表三次貝塞爾曲線的起點(diǎn)控制點(diǎn)控制點(diǎn)終點(diǎn)。這個(gè)函數(shù)可以自行嘗試一下，生成出的字符串賦值給的的就可以了。


pasition

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

Github源代碼

在線演示

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

安裝 
npm install pasition

CDN地址下載下來使用:

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

使用指南 pasition.lerp

你可以通過 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從哪里來？你可以從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){ }
        });

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

from 起始的路徑

to 終點(diǎn)的路徑

time 從from到to所需要的時(shí)間

easing 緩動(dòng)函數(shù)(不填默認(rèn)是勻速運(yùn)動(dòng))

begin 開始運(yùn)動(dòng)的回調(diào)函數(shù)

progress 運(yùn)動(dòng)過程中的回調(diào)函數(shù)

end 運(yùn)動(dòng)結(jié)束的回調(diào)函數(shù)

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

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

在開發(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.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83559.html

相關(guān)文章

  • 2017-06-21 前端日報(bào)

    摘要：前端日報(bào)精選實(shí)踐總結(jié)掘金第期動(dòng)畫與動(dòng)效之四完全指南眾成翻譯個(gè)編碼小技巧教程使用瀏覽器開發(fā)者工具檢查動(dòng)畫性能眾成翻譯中文圖書深入理解譯變量的正確使用方法知乎專欄正式發(fā)布眾成翻譯來了知乎專欄代碼運(yùn)行過程簡述一個(gè)人文章的中文 2017-06-21 前端日報(bào) 精選 redux-react實(shí)踐總結(jié) - 掘金【第972期】HTML5動(dòng)畫與動(dòng)效之四flexbox 完全指南 - 眾成翻譯19個(gè)Java...

    Chao 評論0 收藏0

  • 2017-07-04 前端日報(bào)

    摘要：前端日報(bào)精選一起探索的眾成翻譯性能優(yōu)化殺手掘金入門知乎專欄用實(shí)現(xiàn)無限循環(huán)的無縫滾動(dòng)蚊子的博客前端每周清單組件解耦之道基于的自動(dòng)化測試是否為時(shí)已晚中文譯如何在無損的情況下讓圖片變的更小掘金第期用上古思想寫現(xiàn)代前端踩坑集錦掘金 2017-07-04 前端日報(bào) 精選 一起探索 ES6 的 Generators - 眾成翻譯V8 性能優(yōu)化殺手 - 掘金入門TypeScript React - ...

    kelvinlee 評論0 收藏0

  • SVG

    摘要：目前只提供了一些基礎(chǔ)功能。中與的區(qū)別開發(fā)者第一次接觸手寫那種，雖然很多情況都有設(shè)計(jì)師使用來完成這項(xiàng)工作，但還是不排除需要利用到的每個(gè)元素。輕量級，具備靈活的來自團(tuán)隊(duì)，全球非常出名的可視化團(tuán)隊(duì)。于是筆者嘗試著把移植到中。 使用SVG + CSS實(shí)現(xiàn)動(dòng)態(tài)霓虹燈文字效果 早上無意間進(jìn)入一個(gè)網(wǎng)站，看到他們的LOGO效果略屌，如圖： 剛開始以為是gif動(dòng)畫之類的，審查元素發(fā)現(xiàn)居然是用SVG + ...

    104828720 評論0 收藏0

  • css - 收藏集 - 掘金

    摘要：絕對底部前端掘金來自國外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

    phpmatt 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<