gsap实现图形粒子变换动画效果代码
代码语言:html
所属分类:粒子
代码描述:gsap实现图形粒子变换动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--width: 600;
--height: 500;
--background: #87CE01;
}
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: white;
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--background);
position: relative;
}
#container canvas {
width: calc(var(--width) *1px);
height: calc(var(--height) *1px);
}
.gsap-3-logo {
width: 100px;
position: fixed;
bottom: 8px;
right: 60px;
z-index: 100;
}
</style>
<style>
.sg {
width: 35px;
height: 35px;
position: fixed;
bottom: 10px;
right: 10px;
}
.sg .eye {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.sg:hover .eye {
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
-webkit-transform: translateX(12px);
transform: translateX(12px);
}
</style>
</head>
<body>
<div id="container">
<canvas width="750" height="625" style="touch-action: none; cursor: inherit;"></canvas>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MotionPathPlugin.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/PixiPlugin3.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.5.1.5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ScrubGSAPTimeline.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi-filters.js"></script>
<script >
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value, enumerable: true, configurable: true, writable: true
});
} else {
obj[key] = value;
}return obj;
} // set this to true to enable Chris Gannon's timeline scrubber...
useChrisGannonsScrubber = false;
gsap.registerPlugin(MotionPathPlugin);
class PackedParticles
{
constructor(element, width, height, count = 100) {
_defineProperty(this, "particleImages", [{
name: 'particle_dot', url: '//repo.bfw.wiki/bfwrepo/image/608378e7e170f.png'
}, {
name: 'particle_hex', url: '//repo.bfw.wiki/bfwrepo/image/608379050cfc3.png'
}, {
name: 'particle_ring', url: '//repo.bfw.wiki/bfwrepo/image/6083791cb94c3.png'
}, {
name: 'particle_hex_ring', url: '//repo.bfw.wiki/bfwrepo/image/6083793469865.png'
}, {
name: 'particle_star', url: '//repo.bfw.wiki/bfwrepo/image/6083794b11fa8.png'
}]); _defineProperty(this, "shapeImages", [{
name: 'shape_G', url: '//repo.bfw.wiki/bfwrepo/image/6083796064b55.png'
}, {
name: 'shape_S', url: '//repo.bfw.wiki/bfwrepo/image/60837972d6bab.png'
}, {
name: 'shape_A', url: '//repo.bfw.wiki/bfwrepo/image/60837984b723e.png'
}, {
name: 'shape_P', url: '//repo.bfw.wiki/bfwrepo/image/608379975cc48.png'
}, {
name: 'shape_3', url: '//repo.bfw.wiki/bfwrepo/image/608379ac2b31d.png'
}]);
this.colors = {
background: Utils.hexToNumber(Utils.getVar('--background'))
};
this.app = new PIXI.Application({
width: width,
height: height,
antialias: false,
backgroundColor: this.colors.background,
resolution: window.devicePixelRatio || 1
});
this.width = width;
this.height = height;
this.count = count;
this.shapes = [];
this.particles = [];
this.loader = PIXI.Loader.shared;
this.html = e.........完整代码请登录后点击上方下载按钮下载查看
网友评论0