greensock下载_使用GreenSock构建可拖动的画布外菜单
greensock下载
用于GSAP的插件非常不错,但是让我们看一下GreenSock提供的实用程序。 特别是称为Draggable的实用程序。 使用Draggable,创建支持触摸的交互(也可以与键盘和鼠标一起使用)非常简单。 在我们结束GreenSock旅程时,本教程是最后的两部分。 我们将从学习Draggable的语法,设置开始,并在下一个教程中以创建可与鼠标和支持触摸的设备一起使用的画布菜单结束!
拖动之前,获得动力
如果您关注自动应用基于动量的自然运动的基于动量的动画,则可以包含ThrowPropsPlugin 。 这个特定的插件是Club GreenSock的会员权益,因为它不在任何公共CDN或GitHub存储库中。 如果您想演示Draggable,可以使用白色列出的URL(针对CodePen用户)将其用于测试驱动器。 CodePen用户的URL是: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js
://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js,仅在CodePen上可用。
标记
这是一般的标记,以及它的外观,以便更深入地进入JavaScript部分。 在本教程中,我们将重点放在容器上,因为这将是用户可以拖动的主要表面。
…
从鸟瞰来看,标记是语义的,不需要divs来侵入菜单的布局和位置。 最终使该标记具有可移植性,可重用性甚至可扩展性。
可拖动的工作原理
基于定义的自定义指令,Draggable允许任何元素在垂直和水平方向都可以“拖动”。
与任何JavaScript库类似,在进入任何代码或自定义配置之前,我们需要加载脚本。
我们正在使用TweenMax,因此我们首先加载它。 但是,在脚本加载顺序方面,作者不必关心依赖关系链。 这意味着您可以先加载TweenMax,然后加载Draggable,反之亦然。 现在,Draggable将使您能够编写代码,从而使您选择的元素可以轻拂,滑动,旋转甚至拖动!
可拖动的设置
定义并加载了脚本之后,就该编写一些代码了。 对于Draggable,我们将定义一个构造函数作为此过程的初始起点。 构造函数的语法使您可以传递目标和一系列选项 。
Draggable ( target: Object, vars: Object )
除了使用上面的构造函数,您可能会发现以下选项更加灵活:
Draggable.create([obj1, obj2], { option1: value1, option2: value2 })
通常,最好使用Draggable.create()
而不是构造函数,因为一次调用可以容纳多个元素。
Draggable.create(target, options)
被称为create方法的target
的自变量引用应为可拖动元素。 如我们先前所见,它可以是常规DOM元素,jQuery对象或元素数组。 options
参数使我们可以传入一个对象常量,其中包含键/值对以及API提供的众多选项。 有关选项的完整列表,请参阅官方的GreenSock文档 。
测试可拖动
在开始任何项目之前,知道如何调试可拖动事件(万一出了问题)可能是非常有价值的,但是不要试图尝试学习星空下的每个选项而感到不知所措; 熟悉基础知识并从那里开始工作。
var container = document.querySelectorAll('.container')[0];
我们将使用伙伴JavaScript开箱即用提供的document.querySelectorAll
方法来获取容器。 请注意,我们仍在使用我在本教程开始时写的标记。
Draggable.create([container], {});
我们将容器变量添加到数组( []
)内,最后传入一个空对象,在该对象中将定义选项用于调试。
Draggable.create([container], {onDrag: function() {},onDragStart: function() {},onDragEnd: function() {}
});
我在对象文字中添加了三行,其中包含我们将要响应的事件。 具体来说,我们将使用这三个拖动事件来测试事件的响应时间和响应方式。
var container = document.querySelectorAll('.container')[0];function kennyLogger(event) {console.log(event.type + ' ' + 'fired');
}Draggable.create([container], {onDrag: function(event) {kennyLogger(event); // fires 'mousemove' for non-touch devices},onDragStart: function(event) {kennyLogger(event);},onDragEnd: function(event) {kennyLogger(event);}
});
这些功能的内容由您自己决定,但现在,我将添加一个控制台日志记录功能,该功能将告诉我们一些有关发生的事件的信息。 我称之为“ kennyLogger”事件记录器。
传递选项
现在我们已经进行了测试,我们可以传递更多选项来微调拖动事件。
Draggable.create(container, {throwProps: true,dragResistance: 0.25,edgeResistance: 1,throwResistance: 1000
});
这些默认值在GreenSock文档中有很好的解释。 您可能已经注意到throwProps
键设置为true
。 这是因为在我们的下一个也是最后一个教程中,我们将使用throwPropsPlugin在画布关闭菜单打开和关闭时控制其动量。 由于throwPropsPlugin是GreenSock成员的权益,因此您可以使用仅可通过CodePen使用的URL,如本教程开头所述。
演示时间
首先包括所有包含throwPropsPlugin,Draggable和TweenMax的脚本(请记住:顺序无关紧要!)。
记住,我们正在加载Draggable,TweenMax和throwPropPlugin。 将它们应用于我们的原始标记,并使用命令行进行调试,我们终于可以用鼠标或手指在支持触摸的设备上移动容器了!
随时尝试不同的值和选项。 该演示旨在成为一个游乐场,而不是最终的产品,因此,抓紧时间打破东西,然后修复它!
结论
如果您想进一步使用Draggable之外的其他实用程序,可以访问GreenSock的网站以获取更多信息。 我建议看一下SplitText,了解一些严肃的印刷风格。
下次,您将获得本系列的最后一个也是最后一个教程,我们在这里总结了画布之外的菜单!
翻译自: https://webdesign.tutsplus.com/tutorials/building-a-draggable-off-canvas-menu-with-greensock--cms-24359
greensock下载
greensock下载_使用GreenSock构建可拖动的画布外菜单相关推荐
- greensock下载_使用GreenSock的DrawSVG创建动画SVG加载器
greensock下载 今天的教程是一个使您印象深刻的东西,您编写了很少的代码即可实现如此令人愉快的动画. GreenSock的一个非常聪明的小组的DrawSVG允许您逐步显示(或隐藏)SVG的笔触. ...
- greensock下载_使用GreenSock绘制Alligator.io SVG徽标
greensock下载 To get the most out of this article it is important that you have a solid understanding ...
- css画布背景_如何使用CSS和触摸JavaScript构建画布外菜单
css画布背景 在本教程中,我们将介绍一种简单而有效的方法,以使用HTML,CSS和JavaScript创建画布菜单. 要初步了解我们将要构建的内容,请查看相关的CodePen演示(请查看较大的版本以 ...
- ar foundation_使用Foundation 5构建顶部栏的画布外导航
ar foundation 在较早的教程中,我们学习了如何使用CSS 自定义Foundation 4顶部栏 . 从那时起,ZURB发布了Foundation 5. 比其前身更快,更精简,更强大. 还值 ...
- kiel4.7下载_使用Kiel构建更好,干净的RecyclerView.Adapter
kiel4.7下载 Some years ago, we had only ListView and its Adapter. It had performance issues and these ...
- figma下载_通过构建7个通用UI动画来掌握Figma中的动画
figma下载 Originally published on my personal blog. 最初发布在我的 个人博客上 . Most designers will spend many hou ...
- 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 ...
- illustrator下载_平面设计:16个Illustrator快捷方式可加快工作流程
illustrator下载 I know, I know - keyboard shortcuts sound so nerdy, and you're a graphic designer, not ...
最新文章
- C语言经典算法 1-10
- 阿里云弹性计算产品负责人:让客户用上本地化的公共云
- JAVA程序设计----面向对象(上)
- Star Way To Heaven (prim最小生成树) // [ NOIP提高组 2014]飞扬的小鸟(DP)
- 【原】c#对xml的操作
- 计算机操作系统在线阅读,计算机操作系统3-1.ppt
- 1年内从2000涨到13000的成长经验分享
- [VB.NET]请教一个如何对姓名进行同音字查询?
- 密码应用安全性评估实施之(一)密码应用方案设计
- 微信小程序上线,后台接口失效问题
- 大前端技术发展趋势刨析
- idm站点抓取不了html,IDM站点抓取功能使用详解(下)
- 清理垃圾文件属于计算机安全维护吗,如何清理c盘垃圾文件
- h5与原生app交互的原理
- 流星蝴蝶剑服务器状态,流星蝴蝶剑什么是数据互通 哪些服务器会进行互通
- 虚拟机的迁移和复制分发
- 小强升职记思维导图_《小强升职记》思维导图与总结
- 一文读懂Java接口
- CGR模型文件如何转换成FBX格式文件
- 网络营销广告的类型(CPC、CPM、CPA、CPS, CTR)