我试图得到这个动画多角形背景,从代码依赖工作在一个苗条组件。
https://codepen.io/NyX/pen/bEbKZz
$(function () {
const $polygons = $('.bg > polygon');
const ANIM = {
duration: 0.6,
stagger: 0.005,
from: {
opacity: 0,
scale: 0,
transformOrigin: 'center center',
force3D: true },
to: {
opacity: 1,
scale: 1,
ease: Elastic.easeInOut,
force3D: true } };
const timeline = new TimelineMax({
delay: 0,
repeat: 0
//repeatDelay: 0.5,
//yoyo: true
});
timeline.staggerFromTo($polygons, ANIM.duration, ANIM.from, ANIM.to, ANIM.stagger, 0);
//TweenMax.staggerFromTo(polygons, ANIM.duration, ANIM.from, ANIM.to, ANIM.stagger);
$('body').addClass('loaded');
});
我尝试了很多事情,但我似乎无法使它发挥作用,我试着做一个苗条的爬虫来展示我的进步,但这也不起作用。
我认为问题的根源在于不知道如何处理svelte组件的脚本标记中的$。
发布于 2022-09-09 23:55:08
这里的$
来自jquery
(一个很久以前很流行的库)。
您不需要$(function () {
和$('body').addClass('loaded');
,因为svelte将为您处理这个问题(基本上是在执行函数之前等待加载页面,并在主体上添加一个已加载的类)。
您可以使用bind:this
获得多边形元素的引用(而不是使用$('.bg > polygon')
),然后就可以在onMount
函数上触发动画。我不太了解这个TweenMax
的东西,我认为你应该使用动画助手在苗条,以重新创造动画。
发布于 2022-09-10 01:25:25
通常,您应该避免查询DOM,这正是jQuery ( $
实用程序)的目的。要获得对Svelte中元素的引用,可以使用bind:this
或通过use:
应用操作。
如果您真的需要查询DOM,也不一定需要jQuery,因为浏览器现在无论如何都支持查询。
但是如果您需要jQuery,例如使用它的许多插件中的一些,您通常可以直接从它的NPM包导入它,从而避免使用它的全局定义的快捷方式($
)。
import jQuery from 'jquery'; // jQuery == $
但是,在这个特定的例子中,jQuery是完全不必要的,可以用querySelectorAll
代替。
对于动画,也可以直接导入gsap
。代码似乎使用了一个非常旧的版本。在较新的版本中,您的做法略有不同。
在查询DOM时,我建议至少在根元素上使用bind:this
或操作,这样选择就变得相对,并且不会意外地影响组件之外的任何内容。(使用bind:this
时,只能在onMount
之后访问绑定值。)
使用操作的完整示例:
<script>
import jQuery from 'jquery';
import gsap from 'gsap'
function animate(node) {
const polygons = jQuery(node).find('polygon');
const ANIM = {
duration: 0.6,
stagger: 0.005,
from: {
opacity: 0,
scale: 0,
transformOrigin: 'center center',
force3D: true
},
to: {
opacity: 1,
scale: 1,
ease: 'elastic',
force3D: true
}
};
const timeline = gsap.timeline({
delay: 0,
repeat: 0,
});
timeline.staggerFromTo(polygons, ANIM.duration, ANIM.from, ANIM.to, ANIM.stagger, 0);
}
</script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
use:animate
width="100%" height="100%">
...
</svg>
添加了一个viewBox
来缩小SVG内容。正如前面提到的,jQuery可以被替换如下:
const polygons = node.querySelectorAll('polygon');
发布于 2022-09-10 03:17:25
非常感谢你的回复。根据@httpete的见解,我以一种对svelte更有意义的方式重建了逻辑。
https://svelte.dev/repl/28905c0b02fa43278e77d9adc9b76d44?version=3.50.1
首先,我将多边形的定义重新构建为JSON文件,然后使用每个循环来构造SVG。然后我用了一个纤细的转换来给它动画。动画不是完美的,但工作,请随时评论如何使它看起来更好。再次感谢你的帮助。
https://stackoverflow.com/questions/73668139
复制相似问题