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

創建網頁設計與SVG漣漪效應

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

深入教程如何構建在谷歌列出的漣漪效應頁面設計的徑向行動規范和SVG的權力和GreenSock結合起來

 

SVGRipples

演示 下載源

隨著谷歌的材料設計是一種視覺語言,著手創建一個統一的體驗平臺和設備。 谷歌的例子描述了通過他們 動畫 部分的材料在野外指南已經變得如此的許多家庭都知道這些交互作為谷歌品牌的一部分。

在本教程中,我們將向您展示一種構建連鎖反應特別概述了下 光線的作用 谷歌材料設計規范的結合SVG和GreenSock的權力。

響應行動

谷歌定義響應交互使用光線的作用如下:

徑向行動是墨水的視覺漣漪向外蔓延的輸入。

一個輸入事件和屏幕上的行動之間的聯系應該直觀地表示把它們組合在一起。 對于觸摸或鼠標,這發生在接觸點。 一點漣漪表明何時何地發生聯系,承認收到觸摸輸入。

轉換,或輸入事件引發的行為,應該在視覺上連接到輸入事件。 震中附近的連鎖反應發生遠早于反應。

谷歌很清楚,輸入反饋應該從它的起源和發生向外傳播。 例如,如果用戶點擊一個按鈕直接在中間,這漣漪向外擴大,初始接觸點。 這就是我們如何顯示何時何地發生聯系,以確認收到的用戶輸入。

在SVG光線的作用

脈動技術已經由許多開發人員主要使用CSS等技術 @keyframes 轉換 轉換 偽欺騙, 這個特性 甚至額外的標記等 跨度 或 div 。 而不是使用CSS,讓我們看看如何使用SVG創建這個光線的作用GreenSock的TweenMax 圖書館的運動。

創建SVG

信不信你不需要的應用程序(如Adobe Illustrator甚至素描作者這種效果。 SVG的標記可以編寫使用一些XML標記可能已經熟悉和使用自己的工作。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <symbol viewBox="0 0 100 100">symbol>

svg>

對于那些使用SVG精靈圖標,您將注意到的使用 < >符號 。 的 象征 元素允許作者在個體匹配相關的XML 象征 隨后實例和實例化他們、也就是說使用在應用程序像一個郵票。 每個實例上是相同的,這是唯一的創造者;它駐留在的象征。

接受屬性,如象征元素 viewBox 和 preserveAspectRatio 提供一個 象征 scale-to-fit能力在一個矩形窗口定義的引用 使用 元素。 莎拉Soueidan 寫了一篇精彩的文章 和 建立一個交互式工具 幫助理解viewBox 一勞永逸地坐標系統。 簡單地說,我們定義最初的x和y坐標值(0,0),最后定義一個SVG畫布的寬度和高度(100100)。

下一個拼圖,這個XML是添加一個形狀我們打算動畫漣漪。 這就是 圓 元素出現的原因。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <symbol viewBox="0 0 100 100">

    <circle />

  symbol>

svg>

的 圓 將需要更多的信息然后它擁有什么才能正確顯示在SVG的 viewBox 

<circle cx="1" cy="1" r="1"/>

的屬性 殘雪 和 cy 協調立場相對于嗎 viewBox SVG的; 象征 在我們的例子中。 為了使點擊感覺自然,我們需要確保下面的觸發點建立直接接收輸入時用戶的指尖。

circle-coordinates-diagram

中間的例子圖的屬性創建一個2 px x 2 px圓半徑為1 px。 這將確保我們的圓作物不像我們看到在底部圖的例子。

<div style="height: 0; width: 0; position: absolute; visibility: hidden;" aria-hidden="true">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false">

    <symbol id="ripply-scott" viewBox="0 0 100 100">

      <circle id="ripple-shape" cx="1" cy="1" r="1"/>

    symbol>

  svg>

div>

最后,我們給它纏上一股 div 包含內聯CSS隱藏雪碧簡潔。 這可以防止它在頁面呈現時占用空間。

在撰寫本文時,SVG雪碧包含符號塊引用它的梯度定義您將看到演示-通過ID不能正確地找到梯度和渲染,的原因 可見性 屬性的使用 顯示:沒有 隨著 整個梯度失敗 在Firefox和其他瀏覽器。

的使用 focusable = " false " 需要所有IE的11;除了邊緣,因為它還沒有被測試。 這是一個提議從SVG 1.2規范 描述鍵盤焦點控制應該是如何工作的 。 即實現這一點,但沒有人。 對于HTML的一致性,以及更大的控制權, SVG 2是采用 tabindex 而不是 。 HT, 阿米莉亞Bellamy-Royds 學校的這一建議。

 
 

做標記

編寫可靠的標記是我們早上起床的原因讓我們編寫一個語義 按鈕 元素作為我們的對象,將揭示這漣漪。

<button>Click for Ripplebutton>

標記的結構 按鈕 最熟悉的是直接包括一些填充文本。

<button>

  Click for Ripple

  <svg>

    <use xlink:href="#ripply-scott">use>

  svg>

button>

利用 象征 元素創建之前,我們需要一種方法來參考利用 使用 在按鈕的SVG元素引用的符號的ID屬性的值。

<button id="js-ripple-btn" class="button styl-material">

  Click for Ripple

  <svg class="ripple-obj" id="js-ripple">

    <use width="100" height="100" xlink:href="#ripply-scott" class="js-ripple">use>

  svg>

button>

最后一個標記為CSS和JavaScript鉤子具有額外的屬性。 屬性值開始“js -”表示值只有在JavaScript,從而刪除它們會妨礙相互作用,但不影響造型。 這有助于區分CSS選擇器從JavaScript鉤子為了避免彼此需要刪除或更新時,造成混亂。

的 使用 元素必須有一個寬度和高度定義否則將不可見的觀眾。 你也可以定義這個CSS如果你決定不把它直接在元素本身。

樣式的聯合

時間編寫CSS時,很少需要達到期望的結果。

.ripple-obj {

  height: 100%;

  pointer-events: none;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 0;

  fill: #0c7cd5;

}



.ripple-obj use {

  opacity: 0;

}

這是剩下的,當刪除聲明用于一般樣式。 的使用 pointer-events 消除了SVG脈動成為鼠標事件的目標,因為我們只需要父對象的反應, 按鈕 元素。

最初因此必須無形的漣漪 不透明度 值設置為零。 我們也定位漣漪對象的左上角 按鈕 。 我們可以中心波紋形狀,但因為這事件發生時根據用戶交互擔心是毫無意義的地位。

賦予它生命

呼吸生命這種交互是這都是什么和什么材料設計指導方針文檔作為視覺語言的最重要的一個部分。

本文標簽   網頁設計   SVG  

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

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

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