久久人人爽人人爽人人片ⅴ,成人亚洲欧美在线电影www色,国产chinese男男gay视频网

這是熟悉 SVG 語法和真實動畫的一個很好的練習。我們將使用一個預制的 SVG 心臟，提醒自己是如何viewBox工作的，然后添加一個 animateTransform元素來控制跳動運動。在最初的“簡單”方法之后，我們將討論它有什么問題并進行一些改進。最后，我還將向您展示一些替代的跳動心臟動畫。讓我們開始！

1. 創(chuàng)建一個心形圖標
在您選擇的矢量工具中，繪制一個簡單的心形圖標。它不需要是完美的，但為了方便起見，讓它成為一條連續(xù)的路徑。我在 100x100 像素的畫布上創(chuàng)建了我的，幾乎填滿了整個東西。

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>

在這里，我們?yōu)?SVG 賦予了與原始畫布相同的高度和寬度。我們還將 viewBox 設置為0 0 100 100. 這意味著我們查看 SVG 的窗口從坐標 0 0（左上角）開始，尺寸為 100x100px，因此它與我們的 SVG 完美匹配。
為了清楚地看到您正在處理的內容，添加一個 CSS 規(guī)則來為 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. 添加心路

現(xiàn)在我們需要在 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>

所有這些都將創(chuàng)建以下內容：

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（像往常一樣）為您介紹了：
我們使用的屬性是不言自明的。我們正在創(chuàng)建一個持續(xù)時間為 1 秒的比例變換，它將無限期地重復。

向轉換添加值

現(xiàn)在我們需要添加一個值列表，所以它知道要設置多少動畫：

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 只會表現(xiàn)出一動不動的心，因為它們不喜歡animateTransform被應用到<svg>元素上。
“保持我跳動的心”——斯汀
此外，我們正在為整個 SVG 制作動畫；在內容動畫<svg>化的同時保持相同的比例會更有用。這是可能的——我們需要稍微調整一下坐標系——但這是可能的。

添加包裝元素并縮小

首先將我們的<path>和<animateTransform>元素包裝在一個組<g>元素中。這<g>就是現(xiàn)在動畫的內容：

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>從而掩蓋它。