greensock下载_初识GreenSock的“ GSDevTools”
greensock下载
当涉及到SVG和其他复杂的Web动画时,GreenSock一直是并且一直以来是我在这个星球上最喜欢的库之一。 对于本文,我很高兴为GSAP平台提供一个名为“ GSDevTools”的精彩补充。 这是一系列工具,这些工具肯定会使许多需要接口才能与其GreenSock代码进行交互的GreenSock用户兴奋。 让我们更深入地了解一下GreenSock的朋友Jack和Carl所提供的这一出色的新功能。
视觉化
对于熟悉GreenSock的人,您可能熟悉Sara Drasner( GSAP Player )和Chris Gannon( ScrubGSAPTimeline )当前向公众提供的时间轴工具。 这两个选项都是很棒的,但是它们有一些共同点。 它们仅“擦洗”时间轴序列。
GreenSock用户一直表达了他们对高级播放控制器的渴望,以便隔离其动画序列的各个部分。 幸运的是,那个时候终于到来了,新的GSAP插件恰当地命名为GSDevTools ; 一个回放控制器,它可以使您的序列变得更整齐,还可以隔离场景的回放,以及我们将讨论的许多其他奇妙的选项。 让我们深入研究一下GSDevTools的全部内容。
GSDevTools如何工作
加载包含插件代码的简单JavaScript文件,然后调用GSDevTools.create()
可提供具有键盘快捷键, GSDevTools.create()
和GSDevTools.create()
出点等的清理器。 您甚至可以分离特定序列以进行更好的控制。 终于有了GSAP的可视化时间轴工具,它具有用户友好的UI以及大量的选项来帮助您的动画工作流程,真是令人惊讶。
当然,拥有“可擦除”时间轴是一个了不起的功能,但是GSDevTools还提供了一个选择菜单来隔离运动序列。 即使是ID值也是如此。 例如,如果要倒带一个动画,则它周围的所有其他内容也会在上下文中倒带。 这样,您可以选择该特定元素,它将播放该特定部分。
默认情况下,属性globalSync
为true
,这意味着它将动画保留在全局时间轴的上下文中(如果倒带一个动画,则其周围的所有其他内容也会在上下文中倒带)。 这是完善动画的一种非常不错的方法。
您还会注意到“最小模式”选项。 将窗口拖动到小于600像素的位置,以查看时间轴/滑块是否完美固定。 右下角的徽标也链接到文档!
GSDevTools设置
在使用GSDevTools注册任何场景之前,您需要从JavaScript文件(包括插件本身的脚本)中调用GSDevTools
。
<script src="GSDevTools.min.js"></script>
<script>
// Animation code goes gbove this line
GSDevTools.create({});
</script>
当涉及到GSDevTools.create()
调用的放置时,建议在创建动画代码后执行此操作。 这使您可以设置可以使用播放控制器进行擦洗的inTime
/ outTime
。 如果在GSDevTools.create()
调用之前不存在动画,则很难将运动序列添加到时间线检查器中。
现在我们的播放控制器已经被召唤了,如果您愿意,可以通过一些选项。 所有参数都是可选的,您只需编写GSDevTools.create()
即可使用GSDevTools.create()
即用提供的所有默认值。
GSDevTools.create({
animation: tl, // tween or timeline
timeScale: 0.5, // numerical value
paused: false, // true, false
loop: true, // true, false
globalSync: true, // true, false
inTime: 0.3, // time or label
outTime: 1.2, // time or label
css: { width: "90%", bottom: 30 },
container: '#id', // any selector text (class works too)
visibility: 'auto', // hidden, visible
minimal: false // true, false
});
minimal
将此选项设置为true
将提供基本控件,但低于600像素时,它将自动切换到最小模式。
paused
此选项允许时间线自动播放或在初始页面加载时暂停。
globalSync
如果您定义动画并想将其从全局时间轴中取消挂起,请通过传入false
禁用此选项。
css
在时间轴检查器的外部div
上设置所需CSS样式。
animation
如果您定义动画,例如animation: myTimeline
, animation: myTween
或animation: "id"
,则将首先选择该动画。 默认情况下,将选择全局时间轴。
visibility
设置为auto
,控件将在您向外部滚动约1.3秒或更长时间时自动隐藏,并在将鼠标再次置于时间轴区域上时返回。
inTime / outTime
对于inTime
和outTime
您可以以秒为单位定义时间值,如果动画是时间轴,则可以使用标签。 如果您定义了inTime
或outTime
,即使在最小模式下也将保持原样,并且如果您离开动画然后从下拉菜单中返回动画,也将记住您的输入/输出点。 他们甚至可以识别时间轴的ID和相对偏移量。 例如, inTime:"myAnimation-=2"
使其在myAnimation
之前myAnimation
开始,或者inTime:"-=5"
观看最后五秒。
timeScale
您可以定义一个timeScale
来加快或减慢序列。 也可以从时间轴UI手动设置。
container
如果希望将GSDevTools <div>
放入特定的容器元素,选择器文本或实例中,则可以根据需要这样做。
loop
此属性使您可以在页面加载之前手动设置循环,但是也可以从检查器UI设置此选项。
persist
将此设置为false
将使GSDevTools关闭页面刷新之间的持久性。
键盘快捷键
希望本节的标题能说明一切; 您可以使用键盘导航和控制时间轴。 以下是可能的列表:
- 空格键 :播放/暂停
- 向上/向下箭头 :增加/减少时间比例
- 左箭头 :倒带
- 右箭头 :跳到结尾
- L :切换循环
- I :将入点设置为播放头所在的位置
- O :将播放点设置到播放头所在的位置
- H :显示/隐藏(切换)整个过程。
现在我们了解了键盘操作,是时候注册场景了。
注册场景
如前所述,您可以隔离动画序列的特定场景以进行更好的控制。 为了隔离动画序列并从选择菜单中显示它,您需要为序列指定一个ID。
var tl = new TimelineLite({ id: 'Leia' });
为时间轴或补间分配一个ID将使它显示在动画菜单中,从而易于隔离该场景。 如此甜蜜!
时间轴洗涤器
您会非常兴奋地看到洗涤器功能还允许您手动隔离进出点。
我敢打赌,您在想自己“我的一生都在哪里?” 这确实是GSDevTools的魔力。 您不仅可以进行清理,还可以定义序列的时间戳,放慢速度,加快速度或重复整个目标序列。 手动或将选项传递给GSDevTool.create()
调用。
补充笔记
请注意以下有关GSDevTools的其他信息:
- 手动设置输入/输出点将在刷新页面后保留。 如果要放大动画的特定部分,注意到需要进行的更改,或者只是需要对代码进行调整,这将非常方便。 您不必再次手动重置这些输入/输出点。 如果您在
GSDevTools.create()
中定义一个inTime
/outTime
,它将覆盖上述行为。 timeScale
和循环状态在页面刷新时保持timeScale
。- 双击入点标记或出点标记将同时重置这两个标记(而不是将它们都拖动回到起点/终点,这很快速)。
- GSDevTools使用了Draggable,但是由于GreenSock不想让用户不得不单独加载此插件,因此他们将Draggable包含在GSDevTools文件本身中。
结论
这肯定是一个功能强大的实用程序,它与DrawSVG和MorphSVG等其他出色的GSAP附加功能一起首次亮相。 如果您想知道如何获取自己的GSDevTools副本,它是Club GreenSock会员资格(令人震惊的绿色或更高)的一部分,并且可以免费在CodePen和JSFiddle上使用。
最后,GSDevTools将需要GSAP 1.20.3或更高版本,您可以在GreenSock的网站上阅读有关它的更多信息以及可在CodePen上查看的演示。 我还要特别感谢GreenSock的Carl和Jack创造了令人敬畏的产品并一直努力突破极限。 编码愉快!
翻译自: https://webdesign.tutsplus.com/tutorials/a-first-look-at-gsdevtools-by-greensock--cms-29531
greensock下载
greensock下载_初识GreenSock的“ GSDevTools”相关推荐
- greensock下载_使用GreenSock绘制Alligator.io SVG徽标
greensock下载 To get the most out of this article it is important that you have a solid understanding ...
- greensock下载_使用GreenSock的DrawSVG创建动画SVG加载器
greensock下载 今天的教程是一个使您印象深刻的东西,您编写了很少的代码即可实现如此令人愉快的动画. GreenSock的一个非常聪明的小组的DrawSVG允许您逐步显示(或隐藏)SVG的笔触. ...
- greensock下载_GreenSock引人注目的动画
greensock下载 引人注目的网站动画可以真正吸引眼球,并有助于增加转化次数. 不幸的是,动画绝不容易创建. 网站开发人员花了很多时间来设计,审查和修改其动画,然后才能将其投放世界. 尽管许多开发 ...
- greensock下载_GreenSock MorphSVGPlugin
greensock下载 作者 克里斯·科耶尔 最近更新时间 2018年8月29日 翻译自: https://css-tricks.com/greensock-morphsvgplugin/ green ...
- figma下载_在Figma上进行原型制作的各种触发选项
figma下载 Prototypes are model versions of digital products. They're used to measure usability by test ...
- figma下载_在Figma中进行原型制作的技巧和窍门
figma下载 自定义过渡和微交互 (Custom transitions and micro-interactions) Yep, I know that there are a lot of us ...
- 魔兽怀旧网站模块下载_一个人的网站重新设计和怀旧
魔兽怀旧网站模块下载 Despite how I look, I'm the kind kind of person that loves to play old video games. (Full ...
- figma下载_通过构建7个通用UI动画来掌握Figma中的动画
figma下载 Originally published on my personal blog. 最初发布在我的 个人博客上 . Most designers will spend many hou ...
- illustrator下载_平面设计:16个Illustrator快捷方式可加快工作流程
illustrator下载 I know, I know - keyboard shortcuts sound so nerdy, and you're a graphic designer, not ...
- figma下载_素描vs Figma困境
figma下载 I distinctly remember how much hatred I had in my heart when I lived through my first UI upd ...
最新文章
- Java组合实体模式
- 单个APP接入多个微信支付宝支付的一种解决方案
- NYOJ 52 无聊的小明
- 'weblogic.kernel.Default (self-tuning) 问题weblogic层面解决办法
- ERROR 1093 解决方法
- Java读取Excel文件
- 火星民众彻夜排队接种飞鸽传书
- 这个小伙因WannaCry勒索软件一夜成名,获得一年免费披萨
- python 图片拼接成固定行列
- Linux如何安装python pandas科学库
- Rails UVA - 514(栈)
- 更适合智能家庭使用的新 Wi-Fi 技术问世了
- vue+axios 拦截器实现统一token
- linux svn下载文件到本地
- 华硕服务器 u盘安装系统,华硕u盘装系统图解教程
- 常吃西红柿治疗十种病以及食用的一些禁忌
- 如何在html表格中添加超链接,excel怎么将工作表制作成网页 excel如何加入网页超链接...
- 记录解决Win10底部任务栏转圈圈问题的过程(Windows假死)
- 为什么软件开发周期总是预估的2~3倍?
- 【转载】【《Real-Time Rendering 3rd》 提炼总结】(九) 第十章 · 游戏开发中基于图像的渲染技术总结