<var id="vnpxn"><i id="vnpxn"></i></var>

              <rp id="vnpxn"><delect id="vnpxn"><pre id="vnpxn"></pre></delect></rp>
              <rp id="vnpxn"><span id="vnpxn"><th id="vnpxn"></th></span></rp>

              <rp id="vnpxn"></rp>

                <ruby id="vnpxn"><th id="vnpxn"><em id="vnpxn"></em></th></ruby>
                快捷導航 開啟輔助訪問
                搜索

                用Tizen做個小動畫吧 - 可愛的羊~~

                2017-3-17 23:08| 發布者: zouyang5| 查看: 3| 評論: 0|原作者: 泰澤小白|來自: 泰澤網

                摘要: 介紹 在本文中,我們想向您介紹一個2D動畫庫,它可以幫助您在開發Tizen Web應用程序時的動畫任務。 它非常容易使用,并允許您內插任何值和任何你想要的動畫。 我們在這里寫的是關于Anime.js庫。 由Julian Garner ...
                介紹
                      在本文中,我們想向您介紹一個2D動畫庫,它可以幫助您在開發Tizen Web應用程序時的動畫任務。 它非常容易使用,并允許您內插任何值和任何你想要的
                動畫。 我們在這里寫的是關于Anime.js庫。 由Julian Garner于2016年創建。 正如他在網站上寫的 - Anime.js是“...一個靈活而輕巧的JavaScript動畫庫。 它適用于CSS,個別變換,SVG,DOM屬性和JS對象。

                先決條件

                使用Anime.js非常容易。 首先要做的是訪問GitHub上的Anime.js項目,復制庫文件或將源下載到本地。

                然后在<script> </ script>標簽中,將庫導入到您的項目,如下所示:
                1. <font size="3"><script src="anime.js" type="text/javascript"></script></font>
                復制代碼

                另外,為了使用庫,你應該有一些CSS樣式,SVG圖形,DOM元素或純JavaScript對象。 對于我們對Anime.js的試驗,我們使用了使用Adobe Illustrator創建的SVG圖形。 正如你可以看到下面(圖1),我們
                用矢量圖形和三個堆疊的球創造了這個可愛的羊。 當然,如果你喜歡使用免費的工具,不要猶豫,隨意使用Inkscape。 它是創建矢量圖形的一個偉大的工具。
                用Tizen做個小動畫
                圖1 - SVG圖形與可愛的羊

                為了使您的工作流盡可能順利使用SVG和Anime.js,我們建議您
                將您的SVG分成幾個層使用矢量圖形創建套件。 在Adobe Illustrator和Inkscape中,您可以通過將圖形的片段分發到不同的圖層,然后相應地命名這些圖層來輕松地完成。 這將是非常有用的,當作動畫SVG的不同部分。

                下面,在圖2中,我們向您展示了我們如何使用Illustrator將我們的字符分為多個層。
                用Tizen做個小動畫
                圖2 - SVG圖形圖層

                像這樣
                給SVG節點的層名稱分割你的圖形,因此它將很容易識別整個SVG的部分在其代碼和鉤住Anime.js和動畫。 下面我們給你生成的我們的羊的SVG。 你可以很容易地把它放入任何HTML文件,看看它的樣子。
                1. <font size="3"><?xml version="1.0" encOding="utf-8"?>
                2.                     <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
                3.                         <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                4.                         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="360px"
                5.                                  height="299px" viewBox="0 0 600 499" enable-background="new 0 0 600 499" xml:space="preserve">
                6.                         <g id="shadow1">
                7.                                 <ellipse fill="#B3B3B3" cx="168.919" cy="460.5" rx="134.919" ry="14.5"/>
                8.                         </g>
                9.                         <g id="shadow2">
                10.                                 <ellipse fill="#B3B3B3" cx="464.919" cy="464.992" rx="75.081" ry="7.008"/>
                11.                         </g>
                12.                         <g id="legLeft">
                13.                                 <path fill="none" stroke="#000000" stroke-width="18" stroke-miterlimit="10" d="M142.659,371.486c0,0-9.843,62.678-25.62,86.498"
                14.                                         />
                15.                         </g>
                16.                         <g id="legRight">
                17.                                 <path fill="none" stroke="#000000" stroke-width="18" stroke-miterlimit="10" d="M187.652,374.889c0,0,39.947,59.275,24.171,83.096
                18.                                         "/>
                19.                         </g>
                20.                         <g id="body">
                21.                                 <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="23.332" y1="272.5693" x2="301.5746" y2="111.9259">
                22.                                         <stop  offset="0" style="stop-color:#C7C7C7"/>
                23.                                         <stop  offset="0.6" style="stop-color:#FFFFFF"/>
                24.                                         <stop  offset="1" style="stop-color:#FFFFFF"/>
                25.                                 </linearGradient>
                26.                                 <path fill="url(#SVGID_1_)" stroke="#000000" stroke-width="12" stroke-miterlimit="10" d="M235.224,104.913
                27.                                         c0,0,0.975-18.705-12.045-31.466c-13.02-12.762-7.429-18.717,0.345-27.225c7.773-8.507,24.068,10.209,24.068,10.209
                28.                                         s18.717-12.762,11.06-17.866c-7.656-5.104-49.393-17.015-49.393-17.015s-4.204,27.224-8.458,32.328
                29.                                         c-4.253,5.105-9.967-24.672-22.761-14.462c-15.309,12.216-17.841-22.97-30.445-5.955c-4.304,5.81,7.535,14.463-4.936,5.955
                30.                                         c-12.47-8.507-23.455,5.955-25.62,13.612c-2.164,7.657-19.179-36.582-19.179-36.582L56.174,37.715c0,0,13.611,28.075,34.88,7.657
                31.                                         c13.58-13.036-5.955,33.179-5.955,33.179s-14.463,11.911-5.956,20.418c8.507,8.507,4.254,15.644-1.701,20.583
                32.                                         c-5.956,4.939-21.269,15.594-14.463,31.109c6.806,15.517,16.164,11.263,7.657,24.875c-8.508,13.611-23.821,25.522-14.462,35.731
                33.                                         c9.358,10.208,16.164,20.417,9.358,25.522c-6.806,5.104-25.522,18.716-15.313,32.329c10.209,13.611,11.453,17.576,9.358,26.373
                34.                                         c-2.127,8.933-17.866,4.679-5.105,25.097c7.706,12.327,22.971,1.276,22.12,18.291c-0.851,17.016-10.588,20.133,8.508,30.627
                35.                                         c8.877,4.879,21.076-3.028,31.94,1.337c18.283,7.346,9.571,12.904,20.806,14.828c22.353,3.828,13.694-9.213,28.534-8.471
                36.                                         c17.015,0.851,9.515,14.083,32.295,9.463c6.292-1.276,5.454-9.002,18.717-16.732c13.866-8.082,18.774,2.553,28.074-14.462
                37.                                         c9.675-17.7,5.164-30.202,5.164-30.202L235.224,104.913z"/>
                38.                         </g>
                39.                         <g id="leftHand">
                40.                                 <path fill="none" stroke="#000000" stroke-width="18" stroke-miterlimit="10" d="M79.994,214.67c0,0-74.015,11.911-61.254,94.433"
                41.                                         />
                42.                         </g>
                43.                         <g id="mouth">
                44.                                 <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="131.6792" y1="248.1689" x2="311.0361" y2="248.1689">
                45.                                         <stop  offset="0" style="stop-color:#FFA86A"/>
                46.                                         <stop  offset="1" style="stop-color:#FFD8BF"/>
                47.                                 </linearGradient>
                48.                                 <path fill="url(#SVGID_2_)" stroke="#000000" stroke-width="12" stroke-miterlimit="10" d="M237.208,163.188
                49.                                         c0,0,156.769,144.569,13.421,178.729c-56.881,13.555-142.453-68.323-102.833-114.895c21.092-24.794-16.117-33.62-16.117-33.62
                50.                                         l4.88-22.894c0,0,42.141-3.797,54.658-13.939C204.878,145.499,237.208,163.188,237.208,163.188z"/>
                51.                                 <path fill="none" stroke="#000000" stroke-width="12" stroke-miterlimit="10" d="M218.538,270.487c0,0-15.563-14.929,0.697-18.123
                52.                                         c16.261-3.193,17.391-1.63,15.082,9.327c-2.311,10.957-2.311,10.957-2.311,10.957"/>
                53.                                 <path fill="none" stroke="#000000" stroke-width="12" stroke-miterlimit="10" d="M285.293,262.519c0,0-3.679-21.25,11.308-14.179
                54.                                         c14.986,7.071,14.971,9,6.612,16.453c-8.357,7.452-8.357,7.452-8.357,7.452"/>
                55.                         </g>
                56.                         <g id="leftEye">
                57.                                 <circle fill="#FFFFFF" stroke="#000000" stroke-width="12" stroke-miterlimit="10" cx="155.774" cy="131.773" r="38.735"/>
                58.                         </g>
                59.                         <g id="rightEye">
                60.                                 <circle fill="#FFFFFF" stroke="#000000" stroke-width="12" stroke-miterlimit="10" cx="223.179" cy="132.362" r="27.45"/>
                61.                         </g>
                62.                         <g id="leftEyeBall">
                63.                                 <circle cx="160.349" cy="137.242" r="17.69"/>
                64.                                 <circle fill="#FFFFFF" cx="153.896" cy="130.18" r="6.302"/>
                65.                         </g>
                66.                         <g id="rightEyeBall">
                67.                                 <circle cx="223.234" cy="136.688" r="13.974"/>
                68.                                 <circle fill="#FFFFFF" cx="221.606" cy="131.399" r="6.302"/>
                69.                         </g>
                70.                         <g id="leftEyeBrow">
                71.                                 <path fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" d="M117.039,85.357c0,0,22.909-34.085,61-6.806"/>
                72.                         </g>
                73.                         <g id="RightEyeBrow">
                74.                                 <path fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" d="M194.509,93.864c0,0,19.171-28.925,56.12,2.552"/>
                75.                         </g>
                76.                         <g id="ballGreen">
                77.                                 <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="399.9238" y1="415.2471" x2="528.0762" y2="369.7158">
                78.                                         <stop  offset="0" style="stop-color:#1B7F00"/>
                79.                                         <stop  offset="1" style="stop-color:#7FFF80"/>
                80.                                 </linearGradient>
                81.                                 <circle fill="url(#SVGID_3_)" stroke="#000000" stroke-width="12" stroke-miterlimit="10" cx="464" cy="392.481" r="68"/>
                82.                         </g>
                83.                         <g id="ballYellow">
                84.                                 <circle fill="#FFFF00" stroke="#000000" stroke-width="12" stroke-miterlimit="10" cx="461.306" cy="294.064" r="48.751"/>
                85.                         </g>
                86.                         <g id="ballRed">
                87.                                 <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="427.4658" y1="233.7324" x2="490.6478" y2="211.2845">
                88.                                         <stop  offset="0" style="stop-color:#1B7F00"/>
                89.                                         <stop  offset="0" style="stop-color:#AA1700"/>
                90.                                         <stop  offset="1" style="stop-color:#FF9B7F"/>
                91.                                         <stop  offset="1" style="stop-color:#FAF8E1"/>
                92.                                         <stop  offset="1" style="stop-color:#D41D00"/>
                93.                                 </linearGradient>
                94.                                 <circle fill="url(#SVGID_5_)" stroke="#000000" stroke-width="12" stroke-miterlimit="10" cx="459.057" cy="222.508" r="33.525"/>
                95.                         </g>
                96.                         </svg>
                97.                 </svg></font>
                復制代碼
                正如你在代碼中可以看到的,每個節點都是命名的,因此他們可以很容易地使用Anime.js。

                使用Anime.js進行動畫制作

                我們要用我們的羊SVG實現我們想要實現的圖3所示。正如你看到的羊的眼睛越來越大,并改變他們的顏色為紅色。 也有一個球是懸浮在我們毛茸茸的英雄。 我們也移動他的手和嘴,給整個場景一個更現實的看法。
                用Tizen做個小動畫
                圖3 - 使用Anime.js的動畫羊SVG

                現在,一步一步,我們將告訴你如何使用Anime.js在我們的羊SVG上實現這種效果。 但在這之前,我們將向您展示一個動畫實例在Anime.js中的樣子。 如你所見,我們可以創建一個變量,然后為其分配一個動畫實例。 在它的內部,我們定義一個對象,其屬性描述我們的動畫。 還請記住,這是一個好習慣等待窗口對象加載之前,做任何動畫,這就是為什么我們把一切放在window.onload函數內。
                1. <font size="3">window.onload = function() {
                2.             
                3.        var myAnimation = anime({
                4.                
                5.                     // animation parameters
                6.                
                7.        });

                8. }</font>
                復制代碼

                首先我們想讓最小的球跳起來。 這就是為什么我們需要定位到正確的SVG圖層。 然后我們使用translate變量,我們分配一個兩個值的數組,在這兩個值之間我們所需的移動將發生。 在我們的例子中,它在0和-100之間。 接下來,我們指定以毫秒為單位的持續時間。 在我們的情況下,它將是一個一秒鐘的動畫。 我們要做的最后一件事是在我們的動畫完成并運行ballRedDown動畫時調用一個函數。 但是我們要確保它將從頭開始,這就是為什么我們調用restart()函數。
                1. <font size="3">window.onload = function() {
                2.             
                3.        var ballRedUp = anime({
                4.                
                5.                         targets: "#ballRed",
                6.                         translateY: [0, -100],
                7.                         duration: 1000,
                8.                         complete: function() {
                9.                                 ballRedDown.restart();
                10.                         }

                11.        });

                12. }</font>
                復制代碼
                由于我們可以將數組放入許多Anime.js參數中,因此我們將一次創建三個SVG圖層的動畫。正如你可以看到,目標參數有三個條目,左眼球圖形,右眼球和羊的嘴。我們只是希望它們沿Y軸移動10個像素。此外,我們將三個層次縮放到其基礎尺度的1.05。所有這一切都需要一秒鐘作為球的動畫,因為我們希望他們被同步。我們也在改變眼球的填充從黑色到紅色。也許在這個公平的時刻,你問自己為什么羊的嘴不改變顏色,因為當前的動畫目標的眼睛和嘴在一起。答案很簡單。嘴沒有填充顏色。相反,它有一個漸變,所以它不受更改填充參數的影響。和往常一樣,最后一件事是重新啟動eyeBallsDown動畫,以使所有三層動畫回到其起始位置,比例,顏色等。
                1. <font size="3">window.onload = function() {
                2.    
                3.         var eyeBallsUp = anime({
                4.                
                5.                 targets: ["#leftEyeBall", "#rightEyeBall", "#mouth"],
                6.                 translateY: [0, -10],
                7.                 scale: 1.05,
                8.                 fill: "#FF0000",
                9.                 duration: 1000,
                10.                 complete: function() {
                11.                         eyeBallsDown.restart();
                12.                 }
                13.                
                14.         });
                15.         
                16. }</font>
                復制代碼
                正如你可能猜到的eyeBallsDown動畫將是與eyeBallsUp動畫的相反,像以前的ballRedDown函數是相反的ballRedUp函數。 唯一的改變是關于目標的計數,因為我們在這里有三個自動播放,因為我們希望它是false,以便在eyeBallsDown動畫完成時手動啟動動畫。 我們將縮放比例改回1,填充為黑色,我們再次使用easeOutBounce緩動函數,以便使用ballRedDown動畫同步eyeBallsDown動畫,該動畫使用相同類型的緩動和持續時間。 最后,我們希望我們的動畫重新啟動eyeBallsUp動畫。
                1. <font size="3">window.onload = function() {
                2.    
                3.         var eyeBallsDown = anime({
                4.                
                5.                 targets: ["#leftEyeBall", "#rightEyeBall", "#mouth"],
                6.                 translateY: [-10, 0],
                7.                 scale: 1,
                8.                 fill: "#000000",
                9.                 duration: 1000,
                10.                 easing: 'easeOutBounce',
                11.                 autoplay: false,
                12.                 complete: function() {
                13.                         eyeBallsUp.restart();
                14.                 }
                15.                
                16.         });        
                17. }</font>
                復制代碼

                我們的羊動畫中還缺少的是左臂運動。 讓我們通過應用使用Anime.js的適當的變換來解決它。 這里我們定位leftHand SVG圖層。 我們需要從-2度到1度的旋轉。 還有我們想讓這個動畫循環,所以我們將該變量設置為true。 現在它將循環,我們還將方向參數設置為交替,以顯示您可以在循環中更改動畫的順序。 循環將從動畫正常播放開始,但是循環播放將通過以相反的順序播放動畫來執行。 請記住,我們可以使整個羊動畫在代碼復雜性和長度方面更簡單,但我們想使用一系列動畫向您展示更多的可能性。
                1. <font size="3">window.onload = function() {
                2.    
                3.         var leftHandRotate = anime({
                4.                
                5.                 targets: "#leftHand",
                6.                 rotate: [-2,1],
                7.                 duration: 1000,
                8.                 loop: true,        
                9.                 direction: 'alternate',
                10.         
                11.         });
                12.         
                13. }</font>
                復制代碼

                概要
                現在我們的羊動畫應該如圖3所示。完整的代碼可以在這篇文章附帶的AnimeTizen.zip附件中找到。 還請注意,我們在本文中添加了第二個附件,名為AnimeTizenSymbol.zip,其中使用Anime.js為Tizen徽標添加動畫。 隨意地玩兩個例子,以了解更多關于在Tizen使用Anime.js。 我們希望本文將幫助您正確設置,使用和動畫的對象,SVG和光柵圖形在您的Tizen項目,使他們看起來很漂亮。

                文件附件下載:animetizen_0.zipanimetizensymbol_1.zip


                鮮花

                握手

                雷人

                路過

                雞蛋
                發表評論

                最新評論

                玩轉泰澤Tizen系統,體驗gear極客時代! 立即登錄泰澤網 立即注冊

                QQ|泰澤應用|泰澤論壇|泰澤網|小黑屋|Archiver|手機版|泰澤郵箱| 百度搜索:泰澤網

                © 2012-2016 泰澤網( 蜀ICP備13024062號-1 )( 川公網安備:51342202000102) Powered by intel and 三星 All ownership X3.4

                禁止發布任何違反國家法律、法規的言論與圖片等內容;本站內容均來自個人觀點與網絡等信息,如遇版權問題,請及時聯系(admin@tizennet.com)

                今天是:  |  本站已經安全運行:    技術支持:泰澤網

                分享泰澤網:

                返回頂部