注册表单-线条运动粒子

今天聊一聊gsap动画库，这个库也是每年都在更新，现在都出到3.9了。国外是相对火的，但是国内貌似不温不火，主要是缺乏这方面的运用案例。

首先你要有一个SVG多<path>线条背景，为粒子运动的路径。

两侧向周围蔓延且左右对称，

<g class="group-elements" data-motion-path="M 0 161 C 432 161 576 324 884 324">
    <path d="M 0 161 C 432 161 576 324 884 324 v 1.5 C 576 325.5 432 163 0 163" fill="url(#start-lgradient-base-lines)"></path>
    <clipPath id="start-clip-path-4">
        <path d="M 0 161 C 432 161 576 324 884 324 v 1.5 C 576 325.5 432 163 0 163"></path>
    </clipPath>
    <rect id="start-rect-4" width="100%" height="100%" fill="url(#start-lgradient-01)" clip-path="url(#start-clip-path-4)" x="-100%"></rect>
    <g id="${id}-circles-${i}" class="dot" style="opacity: 0;">
        <circle r="30" fill="url(#start-rgradient-dot-back)"></circle>
        <circle r="15" fill="url(#start-rgradient-dot-front)"></circle>
        <circle r="2.25" fill="white"></circle>
    </g>
</g>

• path为显示出来的静态线条
• clipPath为与path拥有相同路径的遮挡层
• rect为遮挡布
• g为运动光点

实现逻辑很简单：rect遮挡布跟随clipPath运动轨迹运动，同时进行g光点运动，遮挡层添加渐变填充，塑造彩虹拖尾效果。

核心代码

gsap.registerEffect({
    name: "trail", // 自定义效果名称
    effect(elements, options) {
        const container = elements[0],
            dot = container ? container.querySelector(".dot") : null, // 获取容器中的点元素
            rect = container ? container.querySelector("rect") : null; // 获取容器中的矩形元素
        return gsap.timeline({
            defaults: {
                ease: "none",
                duration: duration, // 设置默认动画持续时间
            },
            ...options
        }).set(dot, {
            opacity: 1 // 设置点元素的初始不透明度为1
        }).to(dot, {
            motionPath: {
                path: container.dataset.motionPath // 从容器的数据属性获取运动路径
            },
            onUpdate() {
                var rectWidth,
                    rectBaseVal;
                const xPosition = +gsap.getProperty(this.targets()[0], "x"); // 获取点元素的x坐标
                rect.x.baseVal.value = xPosition - ((rectBaseVal = (rectWidth = rect ? rect.width : null) ? rectWidth.baseVal : null) ? rectBaseVal.value : 0); // 更新矩形元素的x坐标
            }
        }, "<").to(rect, {
            attr: {
                x: "100%" // 将矩形元素的x属性设置为100%
            }
        }, ">")
    }
});

之后给一个随机队列重复执行就行了。

成品Demo

今天分享就到这里，喜欢的朋友们点个免费的小星星，这对我们真的很重要，谢谢。

【转载自gsap注册表单】