找回密码
 立即注册
Tizen|泰泽论坛,中国领先的泰泽Tizen论坛! › 泰泽网 ›Tizen开发破解 › 查看内容

用Tizen做个小动画吧 - 可爱的羊~~

2017-3-17 23:08| 发布者: zouyang5| 查看: 9| 评论: 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.        });

  9. }</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.                         }

  12.        });

  14. }</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手机, tizen开发, tizen

路过
雷人
握手
鲜花
鸡蛋
收藏 分享 邀请
上一篇：Tizen Extension SDKs添加教程简版下一篇：Visual Studio Tools Preview for Tizen和Tizen.NET 3.0.0现已发布
发表评论

最新评论

相关分类

QQ|泰泽应用|泰泽论坛|泰泽网|小黑屋|Archiver|手机版|泰泽邮箱|泰泽网 ( 蜀ICP备13024062号-1 )

GMT+8, 2023-9-7 23:21 , Processed in 0.119245 second(s), 24 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

返回顶部