<mark id="sc1zy"><output id="sc1zy"></output></mark>
<ruby id="sc1zy"></ruby><strong id="sc1zy"><u id="sc1zy"><dl id="sc1zy"></dl></u></strong>

    <optgroup id="sc1zy"><li id="sc1zy"></li></optgroup>

    1. 400-800-9385
      網站建設資訊詳細

      如何使用SVG制作跳動的心臟動畫

      發表日期:2022-09-30 10:35:13   作者來源:馮稷梁   瀏覽:48   標簽:SVG動畫制作    
      這是熟悉 SVG 語法和真實動畫的一個很好的練習。我們將使用一個預制的 SVG 心臟,提醒自己是如何viewBox工作的,然后添加一個 animateTransform元素來控制跳動運動。在最初的“簡單”方法之后,我們將討論它有什么問題并進行一些改進。最后,我還將向您展示一些替代的跳動心臟動畫。讓我們開始!
       
      1. 創建一個心形圖標
      在您選擇的矢量工具中,繪制一個簡單的心形圖標。它不需要是完美的,但為了方便起見,讓它成為一條連續的路徑。我在 100x100 像素的畫布上創建了我的,幾乎填滿了整個東西。

      SVG動畫1

      2.開始寫SVG

      在 Codepen(或 blanco HTML 文件)中,首先編寫 SVG 元素的基本內容:
      1
      2
      3
      <svg width="100" height="100" viewBox="0 0 100 100"><font></font>
        <font></font>
      </svg>
      在這里,我們為 SVG 賦予了與原始畫布相同的高度和寬度。我們還將 viewBox 設置為0 0 100 100. 這意味著我們查看 SVG 的窗口從坐標 0 0(左上角)開始,尺寸為 100x100px,因此它與我們的 SVG 完美匹配。
      為了清楚地看到您正在處理的內容,添加一個 CSS 規則來為 SVG 背景著色: 
      1
      2
      3
      svg {<font></font>
        background: blue;<font></font>
      }
      讓我們也使用 flexbox 將我們正在查看的內容居中:
      1
      2
      3
      4
      5
      6
      body {<font></font>
        height: 100vh;<font></font>
        display: flex;<font></font>
        align-items: center;<font></font>
        justify-content: center;<font></font>
      }

      3. 添加心路

      現在我們需要在 SVG 中嵌套一個路徑元素。從空路徑開始,帶有fill顏色和空d:
      1 <path fill="tomato" d="">
      定義了一個繪制的d路徑,所以讓我們添加我們的路徑坐標。在您粘貼到文本編輯器中的 SVG 片段中,從d屬性中獲取所有內容并將其粘貼到我們的空屬性中。你應該得到一個看起來像這樣的混亂字符串:
      1
      2
      <path fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"><font></font>
      </path>
      所有這些都將創建以下內容:

      SVG動畫制作2

      4. 讓你的心成長

      我想要一顆更大的心。
      通過將 SVG 的寬度和高度屬性加倍,width="200" height="200"我們將加倍整個物體的大小?;蛘呶覀兛梢詫⑺袃热菘s放 150%  width="150" height="150"?;蛘呤瞧渌麞|西。我們不需要觸摸 viewBox 的值,因為它們會相對于我們剛剛更改的 Viewport 保持不變。

      5. 添加一點動畫

      為了使跳動的心臟動畫化,我們將使用一個animateTransform嵌套在 SVG 中的元素。 
      首先在 SVG 中添加元素,作為路徑的兄弟:
      1
      2
      3
      4
      5
      6
      <animateTransform <font></font>
          attributeName="transform" <font></font>
          type="scale" <font></font>
          dur="1s" <font></font>
          repeatCount="indefinite"><font></font>
      </animateTransform>
      這將為父元素設置動畫,即:整個 <svg>. 這在很多情況下都不合適,最好為 中的元素設置動畫,但<svg>這種方法對我們來說效果很好。為了復習 animateTransform 的工作原理,Kezz(像往常一樣)為您介紹了:
      我們使用的屬性是不言自明的。我們正在創建一個持續時間為 1 秒的比例變換,它將無限期地重復。 

      向轉換添加值

      現在我們需要添加一個值列表,所以它知道要設置多少動畫:
      1
      2
      3
      4
      5
      6
      7
      <animateTransform<font></font>
            attributeName="transform"<font></font>
            type="scale"<font></font>
            dur="1s"<font></font>
            values="1; 1.5; 1.25; 1.5; 1.5; 1;"<font></font>
            repeatCount="indefinite"><font></font>
      </animateTransform>
      所以這里的心臟從正常大小 ( 1) 開始,然后縮放到1.5正常大小,然后稍微縮小到1.25,然后回到1.5,依此類推。這些值給了我們跳動的效果。

      6. 更好的解決方案

      改變我們的方式有幾個原因,第一個(重要的)原因是:這在許多移動瀏覽器上不起作用。iOS Safari 和 Chrome 只會表現出一動不動的心,因為它們不喜歡animateTransform被應用到<svg>元素上。
      “保持我跳動的心”——斯汀
      此外,我們正在為整個 SVG 制作動畫;在內容動畫<svg>化的同時保持相同的比例會更有用。這是可能的——我們需要稍微調整一下坐標系——但這是可能的。

      添加包裝元素并縮小

      首先將我們的<path>和<animateTransform>元素包裝在一個組<g>元素中。這<g>就是現在動畫的內容:
      1
      2
      3
      4
      5
      6
      <svg><font></font>
          <g><font></font>
              <path></path><font></font>
              <animateTransform ></animateTransform><font></font>
          </g><font></font>
      </svg>
      我還想通過增加viewBox. 這將防止我們的心超越界限,<svg>從而掩蓋它。
      1 <svg width="150" height="150" viewBox="0 0 200 200">
      在這一點上,<svg>再次給背景顏色是個好主意,所以我們可以看到發生了什么:

      SVG動畫制作3

      好吧,它有效,我們有一個 SVG 心跳,但坐標讓我們感到困惑。group 元素從 0、0 縮放,而我們需要我們的心以某種方式從中心縮放。我們可以通過對 應用一個變換<path>,將它的一半高度向上移動一半寬度向左移動來做到這一點:
      1 <path transform="translate(-50 -42.5)"

      結論

      心形SVG完成

       
       
      如沒特殊注明,文章均為方維網絡原創,轉載請注明來自http://www.carlodifabbio.com/news/6546.html
      秋霞鲁丝片AV无码少妇,强奷漂亮少妇高潮A片久久,日本丰满少妇BBBBBB,无码少妇一区二区浪潮免费