摘要:简明教程中文版上滚动动画使用,你可以快速实现垂直和水平滚动动画。下面的显示了一条微笑鱼的图像。不幸的是,浏览器不支持的,并且没有为此错误提供兼容性修补程序。这是为了防止用户在动画过程中重复按下按钮,这将构建动画队列。
Velocity.js简明教程(中文版上)
滚动动画
使用Velocity.js,你可以快速实现垂直和水平滚动动画。滚动可以与整个页面或元素相关。无论哪种方式,都要在即将滚动到视图中的元素上调用Velocity。
下面的demo使用两个链接:点击顶部链接将容器滚动到最后一部分,单击底部链接将容器滚动到第一部分。
由于两个链接的滚动动作相同,为避免写重复的代码,将其组织成一个函数:
const scrolling = (element, container, direction) => { let offsetDistance = 0; direction === "up" ? offsetDistance = -200 : 200; Velocity(element, "scroll", { container: container, duration: 500, offset: offsetDistance, easing: "ease-out" }); };
element代表要滚动到视图中的元素,在这个demo中指的是第一个部分或最后一个部分,具体取决于滚动的方向。
滚动的方向存储在direction中。如果值为"up",那么offsetDistance的值为-200px,即滚动到相对当前element向上偏移200px的位置,否则offsetDistance的值将为200px。offsetDistance将为Velocity的offset属性存储一个值,可以将目标滚动位置偏移指定的量。
因为demo中的滚动不是相对于浏览器窗口,而是容器元素,上面的代码将这个信息存储在container参数中。因为这样,将容器元素CSS的position属性设置为relative,absolute或fixed不起作用。
最后,通过调用上面的函数来处理相关链接上的点击事件。 例如,要滚动到最后一部分,您的事件处理函数可能如下所示:
Link.addEventListener("click", (e) => { e.preventDefault(); scrolling(lastSection, scrollerContainer, "down"); });
具体实现效果如下:
https://codepen.io/mengmengpr...
SVG动画
Velocity可以用一个number值对任何属性进行动画处理,包括应用于SVG的CSS属性,例如fill,stroke,stroke-width,stroke-color,rx,ry等。
有关Velocity可以操控的SVG属性完整列表,可以去这里查看。
下面的demo显示了一条微笑鱼的SVG图像。气泡淡入淡出,眼睛每隔几秒钟闪烁一次。如果单击播放按钮,鱼将移动到其容器的左侧,消失,返回并转动。
Bug alert:不幸的是,IE/Edge浏览器不支持CSS的transform,并且Velocity没有为此错误提供兼容性修补程序。 因此,demo在这些浏览器中无法正常工作。
让SVG图像准备动画在编写任何代码之前,请确保你的SVG图像可以使用Velocity.js进行动画。
将class或id添加到即将动画的SVG。
如果要将某些元素作为一个整体进行动画,请将元素包含在
简化和优化你的图形。
使用Velocity.js下面是移动鱼的代码:
const moveFish = (elem, moveBy, initialPos, btn, bool = false) => { Velocity(elem, { translateX: [moveBy, initialPos] }, { duration: 5000, easing: "linear", complete: () => { if (bool) { btn.disable = false; } } }); };
分析上面的代码:
调用Velocity,并使用forcefeeding设置translateX属性的值,该值决定了元素的最终和初始位置。当稍后调用此函数时,提供的elem参数将是对SVG鱼的引用。
只有在整个动画结束之后,才能利用Velocity.js内置的complete()方法来激活“播放”按钮。这是为了防止用户在动画过程中重复按下按钮,这将构建动画队列。
动画完成后,播放按钮再次激活,用户可以选择重播动画。此功能通过bool参数实现。
我们还使用了一个ES6特性功能:默认参数,即代码中的bool = false。当你调用moveFish()时,你可以选择不输入相应的参数,因为设置的默认值将自动应用。或者,你可以通过显式输入参数来更改默认值。
要实现不同的移动动画,在主函数内使用不同的参数多次调用moveFish(),如下所示:
const play = () => { moveFish(fish, "-1000", 0, btnPlay); moveFish(fish, 0, "-1000", btnPlay, true); //可以继续调用 };
注意你调用moveFish()的不同方式:第一次没有第五个参数,第二次第五个参数的值为true。在第一种情况下,第五个参数的值是您在构建moveFish()函数时提供的默认参数。
最后,只需在开始按钮的click事件上调用上面的play()函数即可。
可以试试做出来的效果哦:
https://codepen.io/mengmengpr...
Velocity UI Pack
我们称之为UI包。你可以用它来补充Velocity.js,这是一个大大提高了动画工作流程的插件。
你需要下载UI Pack并且在引用Velocity.js之后引用它。
你可以在UI Pack文档中看到可以获得的所有效果的列表。此外,你还可以注册自己的自定义效果。
在下面的demo中,我使用UI Pack在提交后隐藏表单,并向用户显示成功图标。
这是Velocity隐藏表单的方法:
Velocity(formEl, "transition.bounceUpOut", 500);
第一个参数是要操作的元素,在这个demo中即为表单。
第二个参数是UI Pack中的一个预定义特效。
第三个参数是动画时长。
下面是具体的效果:
https://codepen.io/mengmengpr...
更多资料
这里还有一些学习Velocity.js的资料:
Incredibly Fast UI Animation Using Velocity.js
Faster UI Animations With Velocity.js
Improving UI Animation Workflow with Velocity.js
Velocity.js: The Official Collection
来自译者:
这篇文章大致介绍了Velocity.js,在阅读完后推荐先大致浏览一遍官方文档,然后再自己动手写demo。
昨天发布的上半部分被官博分享了,很开心,以后会继续分享高质量文章的。喜欢的话可以关注我或者我的微博,谢谢支持!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82633.html
摘要:需要使用,本文未使用,所以暂不考虑。然后,只需要在主函数中调用这些函数,主函数包含方法。每个函数使用关键字存储在常量中。下面是有计时器的主函数。在主函数里调用以上函数注意全局变量。简而言之,不要在动态上下文的回调函数中使用箭头函数。 本文翻译自https://www.sitepoint.com/how... 在本文中,我将介绍Velocity.js,这是一个快速,高性能的JavaScr...
阅读 3103·2023-04-25 15:02
阅读 2746·2021-11-23 09:51
阅读 2010·2021-09-27 13:47
阅读 1966·2021-09-13 10:33
阅读 913·2019-08-30 15:54
阅读 2627·2019-08-30 15:53
阅读 2833·2019-08-29 13:58
阅读 852·2019-08-29 13:54