尹人香蕉99久久综合网站,精品无码一区二区三区AV,人人妻人人澡人人爽视频69,久久精品夜夜夜夜夜久久,国产成人亚洲综合无码加勒比一

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

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

        發表日期:2022-09-30 10:35:13   作者來源:馮稷梁   瀏覽:348   標簽: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.tipscaraalami.com/news/6546.html
        尹人香蕉99久久综合网站,精品无码一区二区三区AV,人人妻人人澡人人爽视频69,久久精品夜夜夜夜夜久久,国产成人亚洲综合无码加勒比一