小伙伴们来用Tizen做个小动画吧~~

泰泽小白 · 发表于 2017-3-17 22:50:35

介绍
在本文中，我们想向您介绍一个2D动画库，它可以帮助您在开发Tizen Web应用程序时的动画任务。它非常容易使用，并允许您内插任何值和任何你想要的动画。我们在这里写的是关于Anime.js库。由Julian Garner于2016年创建。正如他在网站上写的 - Anime.js是“...一个灵活而轻巧的JavaScript动画库。它适用于CSS，个别变换，SVG，DOM属性和JS对象。

先决条件

使用Anime.js非常容易。首先要做的是访问GitHub上的Anime.js项目，复制库文件或将源下载到本地。

然后在<script> </ script>标签中，将库导入到您的项目，如下所示：

<font size="3"><script src="anime.js" type="text/javascript"></script></font>

复制代码

另外，为了使用库，你应该有一些CSS样式，SVG图形，DOM元素或纯JavaScript对象。对于我们对Anime.js的试验，我们使用了使用Adobe Illustrator创建的SVG图形。正如你可以看到下面（图1），我们用矢量图形和三个堆叠的球创造了这个可爱的羊。当然，如果你喜欢使用免费的工具，不要犹豫，随意使用Inkscape。它是创建矢量图形的一个伟大的工具。

图1 - SVG图形与可爱的羊

为了使您的工作流尽可能顺利使用SVG和Anime.js，我们建议您将您的SVG分成几个层使用矢量图形创建套件。在Adobe Illustrator和Inkscape中，您可以通过将图形的片段分发到不同的图层，然后相应地命名这些图层来轻松地完成。这将是非常有用的，当作动画SVG的不同部分。

下面，在图2中，我们向您展示了我们如何使用Illustrator将我们的字符分为多个层。

图2 - SVG图形图层

像这样给SVG节点的层名称分割你的图形，因此它将很容易识别整个SVG的部分在其代码和钩住Anime.js和动画。下面我们给你生成的我们的羊的SVG。你可以很容易地把它放入任何HTML文件，看看它的样子。

<font size="3"><?xml version="1.0" encOding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
height="299px" viewBox="0 0 600 499" enable-background="new 0 0 600 499" xml:space="preserve">
<g id="shadow1">
<ellipse fill="#B3B3B3" cx="168.919" cy="460.5" rx="134.919" ry="14.5"/>
</g>
<g id="shadow2">
<ellipse fill="#B3B3B3" cx="464.919" cy="464.992" rx="75.081" ry="7.008"/>
</g>
<g id="legLeft">
<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"
/>
</g>
<g id="legRight">
<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
"/>
</g>
<g id="body">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="23.332" y1="272.5693" x2="301.5746" y2="111.9259">
<stop offset="0" style="stop-color:#C7C7C7"/>
<stop offset="0.6" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#000000" stroke-width="12" stroke-miterlimit="10" d="M235.224,104.913
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
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
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
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
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
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
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
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
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
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
c9.675-17.7,5.164-30.202,5.164-30.202L235.224,104.913z"/>
</g>
<g id="leftHand">
<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"
/>
</g>
<g id="mouth">
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="131.6792" y1="248.1689" x2="311.0361" y2="248.1689">
<stop offset="0" style="stop-color:#FFA86A"/>
<stop offset="1" style="stop-color:#FFD8BF"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#000000" stroke-width="12" stroke-miterlimit="10" d="M237.208,163.188
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
l4.88-22.894c0,0,42.141-3.797,54.658-13.939C204.878,145.499,237.208,163.188,237.208,163.188z"/>
<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
c16.261-3.193,17.391-1.63,15.082,9.327c-2.311,10.957-2.311,10.957-2.311,10.957"/>
<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
c14.986,7.071,14.971,9,6.612,16.453c-8.357,7.452-8.357,7.452-8.357,7.452"/>
</g>
<g id="leftEye">
<circle fill="#FFFFFF" stroke="#000000" stroke-width="12" stroke-miterlimit="10" cx="155.774" cy="131.773" r="38.735"/>
</g>
<g id="rightEye">
<circle fill="#FFFFFF" stroke="#000000" stroke-width="12" stroke-miterlimit="10" cx="223.179" cy="132.362" r="27.45"/>
</g>
<g id="leftEyeBall">
<circle cx="160.349" cy="137.242" r="17.69"/>
<circle fill="#FFFFFF" cx="153.896" cy="130.18" r="6.302"/>
</g>
<g id="rightEyeBall">
<circle cx="223.234" cy="136.688" r="13.974"/>
<circle fill="#FFFFFF" cx="221.606" cy="131.399" r="6.302"/>
</g>
<g id="leftEyeBrow">
<path fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" d="M117.039,85.357c0,0,22.909-34.085,61-6.806"/>
</g>
<g id="RightEyeBrow">
<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"/>
</g>
<g id="ballGreen">
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="399.9238" y1="415.2471" x2="528.0762" y2="369.7158">
<stop offset="0" style="stop-color:#1B7F00"/>
<stop offset="1" style="stop-color:#7FFF80"/>
</linearGradient>
<circle fill="url(#SVGID_3_)" stroke="#000000" stroke-width="12" stroke-miterlimit="10" cx="464" cy="392.481" r="68"/>
</g>
<g id="ballYellow">
<circle fill="#FFFF00" stroke="#000000" stroke-width="12" stroke-miterlimit="10" cx="461.306" cy="294.064" r="48.751"/>
</g>
<g id="ballRed">
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="427.4658" y1="233.7324" x2="490.6478" y2="211.2845">
<stop offset="0" style="stop-color:#1B7F00"/>
<stop offset="0" style="stop-color:#AA1700"/>
<stop offset="1" style="stop-color:#FF9B7F"/>
<stop offset="1" style="stop-color:#FAF8E1"/>
<stop offset="1" style="stop-color:#D41D00"/>
</linearGradient>
<circle fill="url(#SVGID_5_)" stroke="#000000" stroke-width="12" stroke-miterlimit="10" cx="459.057" cy="222.508" r="33.525"/>
</g>
</svg>
</svg></font>

复制代码

正如你在代码中可以看到的，每个节点都是命名的，因此他们可以很容易地使用Anime.js。

使用Anime.js进行动画制作
我们要用我们的羊SVG实现我们想要实现的图3所示。正如你看到的羊的眼睛越来越大，并改变他们的颜色为红色。也有一个球是悬浮在我们毛茸茸的英雄。我们也移动他的手和嘴，给整个场景一个更现实的看法。

图3 - 使用Anime.js的动画羊SVG

现在，一步一步，我们将告诉你如何使用Anime.js在我们的羊SVG上实现这种效果。但在这之前，我们将向您展示一个动画实例在Anime.js中的样子。如你所见，我们可以创建一个变量，然后为其分配一个动画实例。在它的内部，我们定义一个对象，其属性描述我们的动画。还请记住，这是一个好习惯等待窗口对象加载之前，做任何动画，这就是为什么我们把一切放在window.onload函数内。

<font size="3">window.onload = function() {
var myAnimation = anime({
// animation parameters
});
}</font>

复制代码

首先我们想让最小的球跳起来。这就是为什么我们需要定位到正确的SVG图层。然后我们使用translate变量，我们分配一个两个值的数组，在这两个值之间我们所需的移动将发生。在我们的例子中，它在0和-100之间。接下来，我们指定以毫秒为单位的持续时间。在我们的情况下，它将是一个一秒钟的动画。我们要做的最后一件事是在我们的动画完成并运行ballRedDown动画时调用一个函数。但是我们要确保它将从头开始，这就是为什么我们调用restart（）函数。

<font size="3">window.onload = function() {
var ballRedUp = anime({
targets: "#ballRed",
translateY: [0, -100],
duration: 1000,
complete: function() {
ballRedDown.restart();
}
});
}</font>

复制代码

由于我们可以将数组放入许多Anime.js参数中，因此我们将一次创建三个SVG图层的动画。正如你可以看到，目标参数有三个条目，左眼球图形，右眼球和羊的嘴。我们只是希望它们沿Y轴移动10个像素。此外，我们将三个层次缩放到其基础尺度的1.05。所有这一切都需要一秒钟作为球的动画，因为我们希望他们被同步。我们也在改变眼球的填充从黑色到红色。也许在这个公平的时刻，你问自己为什么羊的嘴不改变颜色，因为当前的动画目标的眼睛和嘴在一起。答案很简单。嘴没有填充颜色。相反，它有一个渐变，所以它不受更改填充参数的影响。和往常一样，最后一件事是重新启动eyeBallsDown动画，以使所有三层动画回到其起始位置，比例，颜色等。

<font size="3">window.onload = function() {
var eyeBallsUp = anime({
targets: ["#leftEyeBall", "#rightEyeBall", "#mouth"],
translateY: [0, -10],
scale: 1.05,
fill: "#FF0000",
duration: 1000,
complete: function() {
eyeBallsDown.restart();
}
});
}</font>

复制代码

正如你可能猜到的eyeBallsDown动画将是与eyeBallsUp动画的相反，像以前的ballRedDown函数是相反的ballRedUp函数。唯一的改变是关于目标的计数，因为我们在这里有三个自动播放，因为我们希望它是false，以便在eyeBallsDown动画完成时手动启动动画。我们将缩放比例改回1，填充为黑色，我们再次使用easeOutBounce缓动函数，以便使用ballRedDown动画同步eyeBallsDown动画，该动画使用相同类型的缓动和持续时间。最后，我们希望我们的动画重新启动eyeBallsUp动画。

<font size="3">window.onload = function() {
var eyeBallsDown = anime({
targets: ["#leftEyeBall", "#rightEyeBall", "#mouth"],
translateY: [-10, 0],
scale: 1,
fill: "#000000",
duration: 1000,
easing: 'easeOutBounce',
autoplay: false,
complete: function() {
eyeBallsUp.restart();
}
});
}</font>

复制代码

我们的羊动画中还缺少的是左臂运动。让我们通过应用使用Anime.js的适当的变换来解决它。这里我们定位leftHand SVG图层。我们需要从-2度到1度的旋转。还有我们想让这个动画循环，所以我们将该变量设置为true。现在它将循环，我们还将方向参数设置为交替，以显示您可以在循环中更改动画的顺序。循环将从动画正常播放开始，但是循环播放将通过以相反的顺序播放动画来执行。请记住，我们可以使整个羊动画在代码复杂性和长度方面更简单，但我们想使用一系列动画向您展示更多的可能性。

<font size="3">window.onload = function() {
var leftHandRotate = anime({
targets: "#leftHand",
rotate: [-2,1],
duration: 1000,
loop: true,
direction: 'alternate',
});
}</font>

复制代码

概要
现在我们的羊动画应该如图3所示。完整的代码可以在这篇文章附带的AnimeTizen.zip附件中找到。还请注意，我们在本文中添加了第二个附件，名为AnimeTizenSymbol.zip，其中使用Anime.js为Tizen徽标添加动画。随意地玩两个例子，以了解更多关于在Tizen使用Anime.js。我们希望本文将帮助您正确设置，使用和动画的对象，SVG和光栅图形在您的Tizen项目，使他们看起来很漂亮。

文件附件下载：

		自动登录	找回密码
密码			立即注册

小伙伴们来用Tizen做个小动画吧~~

本帖子中包含更多资源

相关帖子

浏览过的版块