天津网站定制网站页面设计代码

天津网站定制,网站页面设计代码,门户网站建设jz190,建网站多少费用大家好#xff0c;我是jobleap.cn的小九。 你想要学习 Anime.js 库的常用用法#xff0c;并获取一份基于 Next.js 15 的实战教程#xff0c;要求串联 Anime.js 的核心 API 并完整落地。需要先说明#xff1a;Anime.js 是前端浏览器端的动画库#xff08;非 Node.js 服务端…大家好我是jobleap.cn的小九。你想要学习 Anime.js 库的常用用法并获取一份基于 Next.js 15 的实战教程要求串联 Anime.js 的核心 API 并完整落地。需要先说明Anime.js 是前端浏览器端的动画库非 Node.js 服务端库Next.js 15 中需在客户端组件中使用它下面的教程会完整覆盖 Anime.js 所有高频 API并基于 Next.js 15 的最新特性实现实战案例。一、环境准备1. 创建 Next.js 15 项目# 初始化 Next.js 15 项目npx create-next-applatest animejs-next15-democdanimejs-next15-demo# 安装 Anime.jsnpminstallanimejs# 可选安装 types/animejs 获得类型提示TypeScript 项目npminstall-D types/animejs2. 核心前提Next.js 15 默认开启 React Server Components (RSC)Anime.js 依赖浏览器 DOM因此必须在客户端组件中使用添加use client指令。二、Anime.js 核心常用 API 梳理Anime.js 的核心能力围绕「动画目标」「动画属性」「时间控制」「动画编排」「交互控制」展开常用 API 分类如下类别核心 API/配置作用基础配置targetsdurationeasing指定动画目标、时长、缓动时间控制delayloopdirection延迟、循环、播放方向动画属性translatescaleopacityrotate位移、缩放、透明度、旋转动画编排anime.timeline()时间线串联/并行动画交互控制play()pause()restart()seek()播放/暂停/重置/跳转高级动画pathstrokeDashoffset路径动画、SVG 描边动画回调函数completeupdate动画完成/更新时触发三、Next.js 15 实战串联所有常用 API下面创建一个客户端组件AnimeDemo.tsx整合 Anime.js 所有高频 API实现「基础动画 时间线 路径动画 滚动触发 交互控制 SVG 动画」的完整案例。完整代码app/anime-demo/page.tsxuse client; // 必须声明为客户端组件 import { useEffect, useRef, useState } from react; import anime from animejs/lib/anime.es.js; // 导入 Anime.js 核心 export default function AnimeJsDemo() { // 1. 定义 DOM 引用用于指定动画目标 const boxRef useRefHTMLDivElement(null); const svgRef useRefSVGSVGElement(null); const pathRef useRefSVGPathElement(null); const ballRef useRefHTMLDivElement(null); const [isScrollTriggered, setIsScrollTriggered] useState(false); const animationRef useRefanime.AnimeInstance | null(null); // 保存动画实例用于控制 // 2. 初始化基础动画 时间线 useEffect(() { // 校验 DOM 元素是否存在 if (!boxRef.current || !svgRef.current || !pathRef.current || !ballRef.current) return; // API 1: 基础动画配置targets/duration/easing/delay/loop/direction const baseAnimation anime({ targets: boxRef.current, // 动画目标指定 DOM 元素 translateX: [0, 300], // 位移从 0 到 300px scale: [1, 1.5], // 缩放从 1 到 1.5 倍 opacity: [0.5, 1], // 透明度从 0.5 到 1 rotate: [0, 360], // 旋转从 0 到 360 度 duration: 2000, // 动画时长2000ms2 秒 easing: easeInOutCubic,// 缓动函数先慢后快再慢 delay: 500, // 延迟 500ms 执行 loop: 2, // 循环 2 次默认无限循环用 true direction: alternate, // 播放方向往返normal正向reverse反向 update: (anim) { // 回调动画更新时触发 console.log(基础动画进度, anim.progress %); }, complete: () { // 回调动画完成时触发 console.log(基础动画执行完毕); }, }); // API 2: 时间线timeline—— 串联/并行动画 const timeline anime.timeline({ easing: easeOutExpo, duration: 1500, delay: 100, // 时间线整体延迟 }); // 步骤 1SVG 描边动画strokeDashoffset timeline.add({ targets: svgRef.current.querySelector(path), strokeDashoffset: [anime.setDashoffset, 0], // 从完整描边隐藏到显示 duration: 2000, label: svg-stroke, // 给动画步骤加标签方便控制 }) // 步骤 2并行动画和上一步间隔 0ms即同时执行 .add({ targets: boxRef.current, backgroundColor: [#6366f1, #ec4899], // 颜色过渡 duration: 1000, }, 0) // 0 表示和上一步同时开始正值延迟负值提前 // 步骤 3顺序动画上一步完成后执行 .add({ targets: boxRef.current, borderRadius: [0px, 50%], // 圆角过渡 }); // API 3: 路径动画沿 SVG 路径运动 const pathAnimation anime({ targets: ballRef.current, translateX: anime.path(pathRef.current).x, // 沿路径的 X 坐标 translateY: anime.path(pathRef.current).y, // 沿路径的 Y 坐标 rotate: anime.path(pathRef.current).angle, // 沿路径角度旋转 duration: 4000, loop: true, easing: linear, autoplay: false, // 初始暂停后续通过按钮触发 }); // 保存动画实例用于后续交互控制 animationRef.current { base: baseAnimation, timeline: timeline, path: pathAnimation, }; // 清理函数组件卸载时停止所有动画 return () { baseAnimation.pause(); timeline.pause(); pathAnimation.pause(); }; }, []); // API 4: 滚动触发动画 useEffect(() { const handleScroll () { const scrollTop window.scrollY; // 滚动到 200px 时触发动画 if (scrollTop 200 !isScrollTriggered) { setIsScrollTriggered(true); anime({ targets: .scroll-trigger, opacity: [0, 1], translateY: [50, 0], duration: 1000, stagger: 200, // 逐个元素延迟错开动画 }); } }; window.addEventListener(scroll, handleScroll); return () window.removeEventListener(scroll, handleScroll); }, [isScrollTriggered]); // API 5: 动画交互控制play/pause/restart/seek const controlAnimation (action: play | pause | restart | seek) { if (!animationRef.current?.path) return; switch (action) { case play: animationRef.current.path.play(); break; case pause: animationRef.current.path.pause(); break; case restart: animationRef.current.path.restart(); break; case seek: animationRef.current.path.seek(1000); // 跳转到 1000ms 位置 break; } }; return ( div style{{ padding: 50px, maxWidth: 1200px, margin: 0 auto }} h1Anime.js Next.js 15 实战演示/h1 {/* 1. 基础动画演示区 */} div style{{ margin: 50px 0 }} h2基础动画位移/缩放/旋转/透明度/h2 div ref{boxRef} style{{ width: 100px, height: 100px, backgroundColor: #6366f1, margin: 20px 0, }} / /div {/* 2. SVG 描边 路径动画演示区 */} div style{{ margin: 50px 0 }} h2SVG 描边 路径动画/h2 svg ref{svgRef} width400 height200 viewBox0 0 400 200 style{{ border: 1px solid #eee }} path ref{pathRef} dM50,100 C150,50 250,150 350,100 fillnone stroke#ec4899 strokeWidth2 strokeDasharray1000 strokeDashoffset1000 / /svg div ref{ballRef} style{{ width: 20px, height: 20px, borderRadius: 50%, backgroundColor: #8b5cf6, position: absolute, top: 50%, left: 0, transform: translate(-50%, -50%), }} / {/* 动画控制按钮 */} div style{{ marginTop: 20px }} button onClick{() controlAnimation(play)} style{{ margin: 0 5px }} 播放路径动画 /button button onClick{() controlAnimation(pause)} style{{ margin: 0 5px }} 暂停路径动画 /button button onClick{() controlAnimation(restart)} style{{ margin: 0 5px }} 重置路径动画 /button button onClick{() controlAnimation(seek)} style{{ margin: 0 5px }} 跳转到 1000ms 位置 /button /div /div {/* 3. 滚动触发动画演示区 */} div style{{ height: 800px, margin: 50px 0 }} h2 style{{ marginTop: 300px }}滚动触发动画向下滚动查看/h2 div classNamescroll-trigger style{{ margin: 10px 0, opacity: 0 }} 滚动触发元素 1 /div div classNamescroll-trigger style{{ margin: 10px 0, opacity: 0 }} 滚动触发元素 2 /div div classNamescroll-trigger style{{ margin: 10px 0, opacity: 0 }} 滚动触发元素 3 /div /div /div ); }代码关键 API 解释targets动画的核心目标可以是 DOM 元素、选择器、DOM 引用或数组示例中用boxRef.current指定具体 DOM。基础动画属性translateX水平位移、scale缩放、opacity透明度、rotate旋转是最常用的动画属性支持「起始值-结束值」数组格式。时间配置duration动画时长、delay延迟执行、loop循环次数、direction播放方向控制动画的时间行为。anime.timeline()时间线是 Anime.js 编排复杂动画的核心通过add()方法串联/并行动画第二个参数控制执行时机0并行正值延迟。路径动画anime.path(pathRef.current).x/y/angle让元素沿 SVG 路径运动自动计算坐标和角度。交互控制通过保存AnimeInstance实例调用play()/pause()/restart()/seek()实现动画的手动控制。滚动触发结合window.scroll事件和状态判断实现滚动到指定位置时触发动画stagger实现元素逐个动画。SVG 描边动画利用strokeDashoffset和anime.setDashoffset实现描边逐步显示的效果。四、运行与验证启动 Next.js 项目npmrun dev访问http://localhost:3000/anime-demo可以看到基础动画方块自动执行位移、缩放、旋转、透明度变化SVG 区域描边动画自动执行点击按钮可控制小球沿路径运动滚动区域向下滚动到指定位置元素逐个显示滚动触发动画。五、进阶技巧缓动函数Anime.js 内置多种缓动函数如easeInOutCubic、easeOutExpo、linear可在 Anime.js 官网 查看所有缓动效果。响应式动画结合 Next.js 的useMediaQuery适配不同屏幕尺寸的动画参数。性能优化动画优先使用transform和opacity浏览器硬件加速避免修改width/height等触发重排的属性。自定义属性支持对 CSS 自定义属性--custom-color做动画实现更灵活的样式控制。总结Anime.js 核心是「目标 属性 时间」Next.js 15 中需在客户端组件use client中使用避免服务端渲染报错常用 API 分为基础配置targets/duration、时间线timeline、交互控制play/pause、高级动画路径/SVG四大类实战中需保存动画实例用于交互控制结合浏览器事件如滚动可实现更贴合业务的动画效果优先使用transform/opacity保证性能。