搜索

用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项目,复制库文件或将源下载到本地。

然后在
复制代码

另外,为了使用库,你应该有一些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. Oding="utf-8"?>
  2.                     
  3.                         
  4.                         
  5.                                  height="299px" viewBox="0 0 600 499" enable-background="new 0 0 600 499" xml:space="preserve">
  6.                         
  7.                                 
  8.                         
  9.                         
  10.                                 
  11.                         
  12.                         
  13.                                 
  14.                                         />
  15.                         
  16.                         
  17.                                 
  18.                         
  19.                         
  20.                                 
  21.                                        
  22.                                        
  23.                                        
  24.                                 
  25.                                 
  26.                         
  27.                         
  28.                                 
  29.                                         />
  30.                         
  31.                         
  32.                                 
  33.                                        
  34.                                        
  35.                                 
  36.                                 
  37.                                 
  38.                                 
  39.                         
  40.                         
  41.                                 
  42.                         
  43.                         
  44.                                 
  45.                         
  46.                         
  47.                                 
  48.                                 
  49.                         
  50.                         
  51.                                 
  52.                                 
  53.                         
  54.                         
  55.                                 
  56.                         
  57.                         
  58.                                 
  59.                         
  60.                         
  61.                                 
  62.                                        
  63.                                        
  64.                                 
  65.                                 
  66.                         
  67.                         
  68.                                 
  69.                         
  70.                         
  71.                                 
  72.                                        
  73.                                        
  74.                                        
  75.                                        
  76.                                        
  77.                                 
  78.                                 
  79.                         
  80.                         
  81.                
复制代码
正如你在代码中可以看到的,每个节点都是命名的,因此他们可以很容易地使用Anime.js。

使用Anime.js进行动画制作

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

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

  8. }
复制代码

首先我们想让最小的球跳起来。 这就是为什么我们需要定位到正确的SVG图层。 然后我们使用translate变量,我们分配一个两个值的数组,在这两个值之间我们所需的移动将发生。 在我们的例子中,它在0和-100之间。 接下来,我们指定以毫秒为单位的持续时间。 在我们的情况下,它将是一个一秒钟的动画。 我们要做的最后一件事是在我们的动画完成并运行ballRedDown动画时调用一个函数。 但是我们要确保它将从头开始,这就是为什么我们调用restart()函数。
  1. 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. }
复制代码
由于我们可以将数组放入许多Anime.js参数中,因此我们将一次创建三个SVG图层的动画。正如你可以看到,目标参数有三个条目,左眼球图形,右眼球和羊的嘴。我们只是希望它们沿Y轴移动10个像素。此外,我们将三个层次缩放到其基础尺度的1.05。所有这一切都需要一秒钟作为球的动画,因为我们希望他们被同步。我们也在改变眼球的填充从黑色到红色。也许在这个公平的时刻,你问自己为什么羊的嘴不改变颜色,因为当前的动画目标的眼睛和嘴在一起。答案很简单。嘴没有填充颜色。相反,它有一个渐变,所以它不受更改填充参数的影响。和往常一样,最后一件事是重新启动eyeBallsDown动画,以使所有三层动画回到其起始位置,比例,颜色等。
  1. 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. }
复制代码
正如你可能猜到的eyeBallsDown动画将是与eyeBallsUp动画的相反,像以前的ballRedDown函数是相反的ballRedUp函数。 唯一的改变是关于目标的计数,因为我们在这里有三个自动播放,因为我们希望它是false,以便在eyeBallsDown动画完成时手动启动动画。 我们将缩放比例改回1,填充为黑色,我们再次使用easeOutBounce缓动函数,以便使用ballRedDown动画同步eyeBallsDown动画,该动画使用相同类型的缓动和持续时间。 最后,我们希望我们的动画重新启动eyeBallsUp动画。
  1. 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. }
复制代码

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

概要
现在我们的羊动画应该如图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 bet36多少地方_bet36体育滚球投注_bet36体育投注 All ownership X3.4

禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,如遇版权问题,请及时联系([email protected])

今天是:  |  本站已经安全运行: 技术支持:泰泽网

分享泰泽网:
返回顶部