react+gsap实现grid网格loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:react+gsap实现grid网格loading加载动画效果代码
代码标签: react gsap grid 网格 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #FFF; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg{ width: 100%; height: 100%; overflow: hidden; } #root, #root div{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } </style> </head> <body> <div id="root"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script> <script type="text/babel" > const { useRef, useEffect, useState, } = React; const GridLoader = ( props ) => { const blendEases = (startEase, endEase, blender) => { var parse = function(ease) { return typeof(ease) === "function" ? ease : gsap.parseEase("power4.inOut"); }, s = gsap.parseEase(startEase), e = gsap.parseEase(endEase), blender = parse(blender); return function(v) { var b = blender(v); return s(v) * (1 - b) + e(v) * b; }; } let colorArray =["ff595e","ffca3a","8ac926","279af1","6a4c93"]; colorArray = colorArray.map(x => Array.from(x)[0] == '#' ? x : `#${x}`); const gridTl = gsap.timeline({repeat: -1, defaults: {ease: blendEases('expo.in', 'back(0.93)')}}).timeScale(2); const getColor = (value) => { return colorArray[value % colorArray.length] } let mainSVG = useRef(); let row0 = useRef(); let row1 = useRef(); let row2 = useRef(); let row3 = useRef(); let whole = useRef(); const stagger = 0.16; useEffect(() => { let allCircles = gsap.utils.toArray('circle'); allCircles.forEach((i, c) => { gsap.set(i, { fill: getColor(c) }) }) //Executed on start and only once gridTl.add('step0') .to(row0.current.children, { duration: 1.6, transformOrigin: '50% 50%', x:'-=40', stagger: { each: stagger, from: 'end' }, fill: (i, c) => { return getColor(i+1) }, scale: (i, c) => { return i > 7 ? 0 : 1 }, }, 'step0') .to(row1.current.children, { duration: 1.4, transformOrigin: '50% 50%', x:'-=80', stagger: { each: stagger, from: 'end' }, fill: (i, c) => { return getColor(i+1) }, scale: (i, c) => { return i > 6 ? 0 : 1 }, }, 'step0') .to(row2.current.children, { duration: 1.2, transformOrigin: '50% 50%', x:'-=120', stagger: { each: stagger, from: 'end' }, fill: (i, c) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0