我試圖從在一個苗條組件中作業的 codepen 獲得這個影片多邊形背景。
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');
});
我已經嘗試了很多事情，但似乎無法使其正常作業，我嘗試制作一個苗條的 repl 來顯示我的進度，但這也不起作用。
我認為問題的根源是不知道如何處理 svelte 組件的腳本標簽中的 $ 。
uj5u.com熱心網友回復：
這里$，來自jquery（一個很久以前非常流行的圖書館）。
你不需要$(function () {，$('body').addClass('loaded');因為 svelte 會為你處理（基本上是在執行函式之前等待你的頁面被加載并在正文上添加一個加載的類）。
bind:this您可以使用in svelte （而不是 using ）獲取多邊形元素的參考$('.bg > polygon')，然后您可以觸發onMount例如函式上的影片。我對這個東西不太了解TweenMax，我認為你應該在 svelte 中使用影片助手來重新創建影片。
uj5u.com熱心網友回復：
一般來說，您應該避免$查詢 jQuery（實用程式）所用的 DOM 。要獲得對 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>
REPL
添加了一個viewBox以縮小 SVG 內容。如前所述，jQuery 可以被替換：
const polygons = node.querySelectorAll('polygon');
uj5u.com熱心網友回復：
非常感謝您的回復。借助@httpete的見解，我以一種對苗條更有意義的方式重建了邏輯。
https://svelte.dev/repl/28905c0b02fa43278e77d9adc9b76d44?version=3.50.1
首先，我將多邊形的定義重建為 JSON 檔案，然后使用每個回圈來構造 SVG。然后我使用了一個苗條的過渡來影片它。影片并不完美，但很有效，請隨時評論如何使它看起來更好。再次感謝您的幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/506576.html
標籤：javascript 动画 苗条 苗条的