gsap+MorphSVGPlugin3实现划线等高线动画效果代码
代码语言:html
所属分类:其他
代码描述:gsap+MorphSVGPlugin3实现划线等高线动画效果代码,拖动鼠标按住鼠标左键拖动图形即可看到效果。
代码标签: gsap MorphSVGPlugin3 划线 等高线 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
html, body, svg {
width:100%;
height:100%;
background:#111;
overflow:hidden;
font-family:Roboto, sans-serif;
font-size:20px;
}
text {
user-select:none;
}
</style>
</head>
<body >
<svg class="stage" fill="none" stroke="#fff">
<path class="path1" d="M0,0"/>
<path class="path2" d="M0,0"/>
<g class="blended"></g>
<rect width="100%" height="100%" fill="rgba(0,0,0,0)" stroke="none"/>
<text class="dir" x="80" y="40" text-anchor="middle" stroke="none" fill="#fff">Draw 2 Paths</text>
</svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MorphSVGPlugin3.min.js"></script>
<script type="module">
console.clear()
import { spline, pointsInPath } from "https://cdn.skypack.dev/@georgedoescode/generative-utils@1.0.0";
const blendSteps = 25,
precision = 99,
stage = document.querySelector('.stage'),
path1 = document.querySelector('.path.........完整代码请登录后点击上方下载按钮下载查看
网友评论0