10个月前 (09-08)  互联网 |   抢沙发  7 
文章评分 0 次,平均分 0.0

 

今天我们要创建一个SVG动画鼓工具包,可以通过点击播放,开发或使用你的键盘,这本身也可以被编程来玩!我们将利用GreenSock的TweenMax动画库、jQuery和 <audio>元素。

创建SVG

打开你的矢量编辑软件的选择(我使用Adobe Illustrator但是有很多替代品可供选择,如亲和力的设计师,草图),得到图!我发现有几个很有用的照片我想画遍布我的画板参考。保持风格的公寓,相当简单的将使生活更轻松,无论是绘画和动画,和更少的强大的设备将谢谢你拥有更少的东西呈现。在这种风格鼓工具实际上是一个相当简单的组(大部分)矩形对象。而绘画任何你打算的SVG动画有几件事情要记住:

<g>是关键

“g元素是一个容器用于集团其他SVG元素。转换应用到g元素上执行它的所有子元素,和它的任何属性都继承了它的子元素。”

为我们这部分的关键是“g转换应用到元素上执行它的所有子元素”这将会非常方便,当我们SVG动画,例如,而不是将动画应用于每个小军鼓的组件,我们可以简单地我们想要动画的元素并应用一个动画组。组织性,命名组将操纵SVG以后更容易!

如果你的绘图应用程序有一个选项,使XML id名称(在Illustrator中首选项> >识别对象:单位> XML id)这允许您编辑/看到实际的 id元素的属性和组,我们将使用目标。

有两个主要的元素,我们需要集合:

1。开发/点击目标

我们希望能够触发动画和声音基于各自的鼓被挖掘/点击,所以我们需要水龙头/单击“目标”元素分组。例如,整个小军鼓,包括站,所以任何用户触摸部分将触发动画和声音。

如何创建一个交互式动画SVG鼓工具包

 

2。动画的目标

我们想要动画元素分组。例如,组织小军鼓;当小军鼓动画被触发我们只希望将鼓,不站。

 

画出来,然后揭示

“我觉得是有用的画一切然后揭示部分在需要的时候。”

我们希望能够与键盘打鼓,所以一些的指示键触发鼓会是有用的。选择键你想“玩”每一个鼓和添加一些说明SVG。这些分组以后我们可以隐藏/显示这些。

导出SVG

保存您的文件与你所有的组可见。svg和在文本编辑器中打开它。

我们可以把这直接进入我们的HTML文档。然而,我建议首先优化SVG Web。有很多工具可这样做,SVGOMG可能是一个最简单的使用。

看到鼓,听到鼓

我们不只是想要我们的鼓看起来像他们玩;我们想要听的,!我们需要单独的音频文件为每个鼓的声音。我导出的音频演示中使用逻辑,使用一些打包免版税的循环。然而,还有许多其他资源获取免费鼓样品在网络上,如99听起来卧室生产商的博客.

我们可以包括音频文件使用 <audio>元素。然后我们设置 src属性的 <audio>元素或一个孩子<source>我们还需要包括其元素 type(音频文件格式)。

我们给音频元素id,这样我们可以针对他们当他们需要。

 

 

<code><span class="hljs-tag">&lt;<span class="hljs-title">audio</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"Snare-Audio"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">source</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"mp3/Snare.mp3"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"audio/mp3"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">audio</span>&gt;</span></code>

(前)节拍的负载

通过添加属性 preload="auto"我们可以告诉浏览器”的用户需求,确保它能下载”。它是如何工作的一些浏览器。其他浏览器(特别是在移动设备上)实际上忽略,从而导致一些奇怪的行为,但是我们以后再回到这里。

 

 

<code><span class="hljs-tag">&lt;<span class="hljs-title">audio</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"Snare-Audio"</span> <span class="hljs-attribute">preload</span>=<span class="hljs-value">"auto"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-title">source</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"mp3/Snare.mp3"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"audio/mp3"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-title">audio</span>&gt;</span></code>

JavaScript的时间!

我们有很多事情要做在我们可以玩鼓,但是每一个鼓部分可分为三个步骤:

  1. 音频。
  2. 动画。
  3. 引发这些用户交互。

我们先将我们需要的DOM元素存储为变量。如。为我们想要的陷阱网罗音频,和小军鼓,两位想要动画的部分将触发动画和音频。

曲调

播放音频其实很简单:我们只使用 .play()方法在音频元素我们想玩。

 

 

<code><span class="hljs-keyword">var</span> snareAudio = $(<span class="hljs-string">'#Snare-Audio'</span>); snareAudio.get(<span class="hljs-number">0</span>).play();</code>

就是这样!几乎好了…这是伟大的,但是如果我们再次调用该方法时,音频已经玩,什么都不会发生。我们希望的声音从一开始就被触发的音频文件每次触发一个鼓。所以我们需要设置音频起始位置在哪里每一次它被触发。

 

 

<code><span class="hljs-keyword">var</span> snareAudio = $(<span class="hljs-string">'#Snare-Audio'</span>); <span class="hljs-keyword">var</span> snareAudioEl = snareAudio.get(<span class="hljs-number">0</span>); snareAudioEl.currentTime = <span class="hljs-number">0</span>; snareAudioEl.play();</code>

吐温类

对于那些不熟悉,TweenMax是一个JavaScript库,处理“渐变”一个或多个属性的对象(或数组的对象)。我不会去太深入的剖析每个动画但是每个都可以分解成几个简单的步骤:

  1. 创建一个新的时间轴
  2. 渐变一个属性(或大量的属性)的元素
  3. 渐变回到原来的状态

我们只是试图效仿接近我们如何“期望”鼓移动的时候。有时会有夸大的运动来获得想要的效果。这部分是试验和错误但幸运的是有很多的例子GreenSock的行动可以检查出灵感。同时,跟着这样的人克里斯•甘农是一个伟大的方式去审视GreenSock能做什么。

最后,宽松是最有用的工具之一GreenSock提供给你的动画正确的“感觉”。GreenSock有很大的缓解视觉型的人它可以帮助你决定什么适合你的动画。

 

 

snareDrum = $('#Snare-Drum');

// Create a new timeline, that's paused by default
var snaretl = new TimelineMax({
paused: true
});

// The animation tweens
snaretl.to(snareDrum, 0.1, {scaleX: 1.04, transformOrigin: "50% 50%", ease: Expo.easeOut})
.to(snareDrum, 0.1, {scaleY: 0.9, transformOrigin: "50% 100%", ease: Expo.easeOut}, '0')
// The last tween, returns the element to it's original properties
.to(snareDrum, 0.4, {scale: 1, transformOrigin: "50% 100%", ease: Elastic.easeOut});

停止。触发时间

我们准备好我们的音频和动画。现在我们只需要把它放在一起并触发用户交互。我们将音频和动画方法封装在一个函数:

 

 

<code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">snare</span><span class="hljs-params">()</span></span>{ snaretl.restart(); snaretl.play(); <span class="hljs-keyword">var</span> snareAudioEl = snareAudio.get(<span class="hljs-number">0</span>); snareAudioEl.currentTime = <span class="hljs-number">0</span>; snareAudioEl.play(); }</code>

然后,调用这个函数在一个点击/触摸事件:

 

除特别注明外,本站所有文章均为日升互动娱乐- 聚合数据平台原创,转载请注明出处来自http://www.rs-sx.com/ruhechuangjianyigejiaohushidonghuasvggugongjubao/

关于

发表评论

表情 格式

暂无评论

writing a term paper may be best approached by using
切换注册

登录

忘记密码 ?

切换登录

注册

扫一扫二维码分享