網站地圖 | 聯系我們 排名技術建站,讓你對手追趕
你現在的位置:網站首頁 > 資源分享 > JS插件 > 正文內容
?

分享一個有趣的進程按鈕效果

發布時間:2015-10-16 | 編輯 : 小勇 | 分類 : JS插件 | 閱讀: 次 | 評論 :0

ElasticProgress

視圖演示 下載源

今天,我們想要與你們分享一個有趣的進程按鈕效果。 基于一個非常好的效果 Dribbble拍攝 “下載” xjw。 按鈕開始作為一個圖標和一個箭頭,一旦點擊,它模擬成一個有趣的小電線和一個標簽顯示下載百分比。 看一看:

Dribbble shot

在本文中,我們將看一下所需要的某些方面做一個動畫,一些技巧,一些我們可能面對的挑戰。

如果你想在你的項目中使用這種裝載機,去 Github頁面 然后按指示進行。

elasticprogress

技術

我們首先必須決定是哪個瀏覽器技術,我們將使用和渲染效果。 
有可能在很大程度上使這個動畫 CSS 。 問題是,它并沒有多少靈活性——畫一條曲線,例如,可以是困難的,如果不是不可能的話,我們想要如何。 最重要的是,它可以相當出租汽車司機,我們必須依靠偽裝形狀與聰明的技巧,可以迷惑和丑陋。

帆布 可以是一個不錯的選擇。 我們可以畫出任何我們想要的形狀,和性能,如果你細心,很好,甚至在移動。 很難使用,尤其是如果你不使用圖書館 Paper.js 。 此外,它幾乎是一個黑盒子眼中的瀏覽器——它只是認為這是一個圖像,忽略了它的內容。

這是我們其他的選項 SVG 。 它有它的缺點:它不是目前硬件加速,使性能低于恒星。 它也很舊,因此,充滿怪癖。 然而,它很靈活,易于負載一個項目,和瀏覽器對它的每個元素像DOM對象,這使得它更適合交互。

除此之外,可以減輕其缺點:性能還不錯如果我們動畫小物體,和許多怪癖的解決 GSAP ,這是動畫庫我們將使用。 除了是一個很好的動畫庫,它提供了工具,使它更容易處理svg。 以后我們會看到更多。

規劃SVG

當我們創建一個SVG動畫,我們必須做出一切思考我們如何動畫。 這一點,我們需要格外小心的圖層名稱,頂點,等等。 
這就是我在這個例子組織層。 我使用Adobe Illustrator,但它應該非常相似的編輯你的選擇。

ai-layers

重要的在這里,除了命名,是分組。 如果你有意推動某些元素在一起,你應該收集他們在同一層以避免運行相同的動畫兩次不同的對象。 
現在,因為在這個演示動畫頂點分別,我們也應該照顧他們。 
彈性動畫我們想要實現,我們需要一個與一個光滑曲線點。 然而,我們也希望圓按鈕轉變成線,所以我們需要一個適應兩線形狀,最低數量的頂點,為了使動畫很容易。

circle

這個not-perfect-but-good-enough-for-animation圈3點,我們可以打開變成彈性的事情。

vertices

我們可以放開,曲線成更緊張的形狀通過貝塞爾曲線控制點接近頂點。

tense

這只是一個例子。 你的要求將取決于你想要的動畫。 重要的是,當你在做圖形,思考如何動畫。

操縱

首先,您需要加載SVG可以用JS操縱它。 你可以直接粘貼到HTML,你可以 使用AJAX加載它 或者一個圖書館 Snap.svg 或者你有什么。

動畫與GSAP SVG元素非常簡單。 在您選擇的元素…

var circle=document.querySelector("#background");

就像…你可以動畫屬性 規模 它將產生適當的 變換 

TweenMax.to(circle,1,{

  scale:0.1

})

對沒有的東西 變換 ,你只是使用 attr 屬性:

TweenMax.to(circle,1,{

  attr:{

    "stroke-width":4

  }

})

為我們的動畫,將派上用場的東西是GSAP彈性寬松,這是可配置的 easeParams 財產。

 

 

另一個非常有用的,它確實是 消除瀏覽器不一致 transformOrigin 對svg 

TweenMax.to(circle,1,{

  transformOrigin:"50% 50%",

  scale:0.1

})

因為我說的是瀏覽器的問題:到目前為止,Firefox將拋出一個錯誤如果你試圖動畫或設置屬性,等等transformOrigin 一個隱藏的對象。 一定要設置對象的 顯示 財產 內聯 而不是 沒有一個 在改變什么。

elasticprogress2

頂點動畫

有很多的工具可以用來選擇和個人SVG動畫頂點,喜歡簡單。 svg我之前提到過。 在這個演示中,我使用 svg-pathdata 。 ——它收到一個SVG路徑字符串 屬性的 路徑 元素,其中包含的信息路徑的形狀,并返回的數組 命令 ,個人觀點。 你可以改變的值,然后解析數組回到一個SVG路徑字符串并應用它回屬性。 
它看起來有點混亂,但它很簡單,一旦你把你的頭。 這里有一個例子:

// select the path

var line=document.querySelector('#line path');

// get the d attribute

var d=line.getAttribute('d');

// get the pathdata (toAbs() converts the points coordinates from relative to absolute)

var pathData=new SVGPathData(d).toAbs();

// get the vertices

var points=pathData.commands;

// pick a point

var middlePoint=points[1];



// animate

TweenTo(middlePoint,1,{

  y:0,

  y1:0, // bezier control point

  // updating using GSAP`s onUpdate and onComplete to keep it synchronized

  onUpdate:updatePath,

  onComplete:updatePath

});



function updatePath(){

  // converts the points array back to svg path string

  line.setAttribute('d',pathData.encode());

}



動畫多個頂點相同的路徑,為了避免多次更新路徑,保持 onUpdate 函數在一個單獨的漸變。

Tween.to(points[0],1,{

  x:-100

});

Tween.to(points[1],1,{

  x:0

});

Tween.to(points[2],1,{

  x:100

});

Tween.to(this,1,{

  onUpdate:updatePath

})

...

elasticprogress3

交互

如果你想讓一個按鈕,您可能希望避免整個SVG,包括空區域,點擊——你想要只按鈕一個按鈕。 幸運的是,這個問題的解決辦法很簡單。 
SVG的容器,你設置下面的CSS屬性:

pointer-events: none;

SVG元素你想點擊,您設置:

pointer-events: fill;

可以通過JS的 setAttribute 函數,或者直接在SVG文件本身,無論是作為一個CSS規則,元素的一個屬性,或者在它 風格 屬性。 
一個不錯的方法是保持一個單獨的透明物體的一切只能用作打擊區域。 這樣,你可以用動畫的對象在這沒有問題。

elasticprogress4

可訪問性

因為這不是一個適當的按鈕,也沒有一個合適的進度條,它是無形的screenreaders和其他一切都依靠語義。 有幾件事情我們可以做來減輕這個:

  • 設置容器的 角色 屬性來 按鈕 
  • 可以用鍵盤,設置容器的 tabindex 屬性為0或更大,并添加一個鍵盤事件的觸發點擊空間和返回鍵。
  • 即使在這個演示按鈕視覺上變成一個進度條,我們不應該改變 角色 的一個元素。 所以,我們創建一個單獨的 progressbar 屏幕的元素,把它,讓它不可見,與我們的動畫和更新它。

現在你有一些見解的過程創建一個這樣的動畫,看一看整個源代碼和檢查 指令 為集成這樣的按鈕。

我們希望你喜歡這個進步按鈕,發現它有用!

本文標簽按鈕效果   網頁效果   JS  

贊助我們:如果你覺得本站的內容對你確實有所幫助,請贊助我們讓我們有動力為你繼續奉獻更多有用的內容→贊助我們

版權說明:如非注明,本站文章均為 小勇工作室 原創,轉載請注明出處和附帶本文鏈接 http://www.tmspch.icu/html/2015/jq_1016/5.html。

?
聯系我們
QQ:
873268813
旺旺:
wsuper勇
郵箱:
給我發郵件
QQ群:
加入交流群
?
Powered By 小勇工作室,Copyright www.tmspch.icu ? 2008-2019, 贛ICP備15004575號
河北快3官网结果