开发动画
本帖最后由 亚伦影音工作室 于 2025-11-7 19:48 编辑 <br /><br /><style>#papa{
position: relative;
width: 1286px;
height: 720px;
margin-left:-300px;
margin-top:10px;
border: 0px solid rgba(36, 201, 219,.95);
border-radius: 0px;
background:#000 url(https://pic1.imgdb.cn/item/6862641f58cb8da5c87f852b.jpg)no-repeat center/cover;
overflow: hidden;
}
#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite ;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
#c{
mix-blend-mode: darken;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.lrc{position: absolute;z-index: 90;transform:rotate(0deg);
width: 960px;
height: 160px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
overflow: hidden;
display: block;
margin: 360px 40px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 50px;
line-height: 50px;
font-family:悟空大字库;
font-size: 30px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
color: #00fff0;transform: translate(0%,0%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
display: block;
width: 100%;
margin: 0 auto;
}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 35px;color: #F1612A;
}
text-align:center;
transform: translate(0%,0%);
font-weight: normal;
</style>
<div id="papa">
<canvas id="c"></canvas>
<img id="mdiv"src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png">
<div class="lrc">
<ul id="ullrc">
</ul>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/38/79/f3/6d0566d678248daf47950fc3193d35c9/audio.mp3"loopautoplay ></audio>
</div>
<script>
mdiv.onclick = () => aud.paused ? aud.play(): aud.pause();
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
</script>
<script >
c = document.querySelector('#c')
c.width = 1980
c.height = 1080
x = c.getContext('2d')
C = Math.cos
S = Math.sin
t = 0
T = Math.tan
rsz=window.onresize=()=>{
setTimeout(()=>{
if( document.papa.clientWidth > document.papa.clientHeight*1.77777778){
c.style.height = '100vh'
setTimeout(()=>c.style.width = c.clientHeight*1.77777778+'px',0)
} else{
c.style.width = '100vw'
setTimeout(()=>c.style.height = c.clientWidth/1.77777778 + 'px',0)
}
},0)
}
rsz()
async function Draw(){
if(!t){
R=(Rl,Pt,Yw,m)=>{if(!aud.paused){
M=Math
A=M.atan2
H=M.hypot
X=S(p=A(X,Y)+Rl)*(d=H(X,Y))
Y=C(p)*d
Y=S(p=A(Y,Z)+Pt)*(d=H(Y,Z))
Z=C(p)*d
X=S(p=A(X,Z)+Yw)*(d=H(X,Z))
Z=C(p)*d
if(m){
X+=oX
Y+=oY
Z+=oZ
}
} }
Q=()=>
I=(A,B,M,D,E,F,G,H)=>(K=((G-E)*(B-F)-(H-F)*(A-E))/(J=(H-F)*(M-A)-(G-E)*(D-B)))>=0&&K<=1&&(L=((M-A)*(B-F)-(D-B)*(A-E))/J)>=0&&L<=1?:0
Rn = Math.random
geoSphere = (mx, my, mz, iBc, size) => {
let collapse=0
let B=Array(iBc).fill().map(v=>{
X = Rn()-.5
Y = Rn()-.5
Z = Rn()-.5
return
})
for(let m=99;m--;){
B.map((v,i)=>{
X = v
Y = v
Z = v
B.map((q,j)=>{
if(j!=i){
X2=q
Y2=q
Z2=q
d=1+(Math.hypot(X-X2,Y-Y2,Z-Z2)*(3+iBc/40)*3)**4
X+=(X-X2)*99/d
Y+=(Y-Y2)*99/d
Z+=(Z-Z2)*99/d
}
})
d=Math.hypot(X,Y,Z)
v=X/d
v=Y/d
v=Z/d
if(collapse){
d=25+Math.hypot(X,Y,Z)
v=(X-X/d)/1.1
v=(Y-Y/d)/1.1
v=(Z-Z/d)/1.1
}
})
}
B.map(v=>{
v*=size
v*=size
v*=size
v+=mx
v+=my
v+=mz
})
return
}
Cylinder = (rw,cl,ls1,ls2) => {
let a = []
for(let i=rw;i--;){
let b = []
for(let j=cl;j--;){
X = S(p=Math.PI*2/cl*j) * ls1
Y = (1/rw*i-.5)*ls2
Z = C(p) * ls1
b = [...b, ]
}
//a = [...a, b]
for(let j=cl;j--;){
b = []
X = S(p=Math.PI*2/cl*j) * ls1
Y = (1/rw*i-.5)*ls2
Z = C(p) * ls1
b = [...b, ]
X = S(p=Math.PI*2/cl*(j+1)) * ls1
Y = (1/rw*i-.5)*ls2
Z = C(p) * ls1
b = [...b, ]
X = S(p=Math.PI*2/cl*(j+1)) * ls1
Y = (1/rw*(i+1)-.5)*ls2
Z = C(p) * ls1
b = [...b, ]
X = S(p=Math.PI*2/cl*j) * ls1
Y = (1/rw*(i+1)-.5)*ls2
Z = C(p) * ls1
b = [...b, ]
a = [...a, b]
}
}
b = []
for(let j=cl;j--;){
X = S(p=Math.PI*2/cl*j) * ls1
Y = ls2/2
Z = C(p) * ls1
b = [...b, ]
}
//a = [...a, b]
return a
}
Tetrahedron = size => {
ret = []
a = []
let h = size/0.4142/0.25
for(i=3;i--;){
X = S(p=Math.PI*2/3*i) * size/0.25
Y = C(p) * size/0.25
Z = h
a = [...a, ]
}
ret = [...ret, a]
for(j=3;j--;){
a = []
X = 0
Y = 0
Z = -h
a = [...a, ]
X = S(p=Math.PI*2/3*j) * size/0.25
Y = C(p) * size/0.25
Z = h
a = [...a, ]
X = S(p=Math.PI*2/3*(j+1)) * size/0.25
Y = C(p) * size/0.25
Z = h
a = [...a, ]
ret = [...ret, a]
}
ax=ay=az=ct=0
ret.map(v=>{
v.map(q=>{
ax+=q
ay+=q
az+=q
ct++
})
})
ax/=ct
ay/=ct
az/=ct
ret.map(v=>{
v.map(q=>{
q-=ax
q-=ay
q-=az
})
})
return ret
}
Cube = size => {
for(CB=[],j=6;j--;CB=[...CB,b])for(b=[],i=4;i--;)b=[...b,[(a=)*(l=j<3?size/0.5:-size/0.5),a[(j+1)%3]*l,a[(j+2)%3]*l]]
return CB
}
Octahedron = size => {
ret = []
let h = size/0.25
for(j=8;j--;){
a = []
X = 0
Y = 0
Z = h * (j<4?-1:1)
a = [...a, ]
X = S(p=Math.PI*2/4*j) * size/0.25
Y = C(p) * size/0.25
Z = 0
a = [...a, ]
X = S(p=Math.PI*2/4*(j+1)) * size/0.25
Y = C(p) * size/0.25
Z = 0
a = [...a, ]
ret = [...ret, a]
}
return ret
}
Dodecahedron = size => {
ret = []
a = []
mind = -6e6
for(i=5;i--;){
X=S(p=Math.PI*2/5*i + Math.PI/5)
Y=C(p)
Z=0
if(Y>mind) mind=Y
a = [...a, ]
}
a.map(v=>{
X = v
Y = v-=mind
Z = v
R(0, .553573, 0)
v = X
v = Y
v = Z
})
b = JSON.parse(JSON.stringify(a))
b.map(v=>{
v *= -1
})
ret = [...ret, a, b]
mind = -6e6
ret.map(v=>{
v.map(q=>{
X = q
Y = q
Z = q
if(Z>mind)mind = Z
})
})
d1=Math.hypot(ret-ret,ret-ret,ret-ret)
ret.map(v=>{
v.map(q=>{
q-=mind+d1/2
})
})
b = JSON.parse(JSON.stringify(ret))
b.map(v=>{
v.map(q=>{
q*=-1
})
})
ret = [...ret, ...b]
b = JSON.parse(JSON.stringify(ret))
b.map(v=>{
v.map(q=>{
X = q
Y = q
Z = q
R(0,0,Math.PI/2)
R(0,Math.PI/2,0)
q = X
q = Y
q = Z
})
})
e = JSON.parse(JSON.stringify(ret))
e.map(v=>{
v.map(q=>{
X = q
Y = q
Z = q
R(0,0,Math.PI/2)
R(Math.PI/2,0,0)
q = X
q = Y
q = Z
})
})
ret = [...ret, ...b, ...e]
ret.map(v=>{
v.map(q=>{
q *= size/2
q *= size/2
q *= size/2
})
})
return ret
}
Icosahedron = size => {
ret = []
B = [
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
[,,],
]
for(p=,i=38;i--;)p=[...p,p+p]
phi = p/p
a = [
[-phi,-1,0],
,
,
[-phi,1,0],
]
for(j=3;j--;ret=[...ret, b])for(b=[],i=4;i--;) b = [...b, ,a[(j+1)%3],a[(j+2)%3]]]
ret.map(v=>{
v.map(q=>{
q*=size/1.25
q*=size/1.25
q*=size/1.25
})
})
cp = JSON.parse(JSON.stringify(ret))
out=[]
a = []
B.map(v=>{
idx1a = v
idx2a = v
idx3a = v
idx1b = v
idx2b = v
idx3b = v
a = [...a, ,cp,cp]]
})
out = [...out, ...a]
return out
}
stroke = (scol, fcol, lwo=0) => {
if(scol){
//x.closePath()
x.globalAlpha = 0.02
x.strokeStyle = scol
x.lineWidth = Math.min(100,600*lwo/Z)
x.stroke()
x.lineWidth /= 5
x.globalAlpha = 1
x.stroke()
}
if(fcol){
x.fillStyle = fcol
x.fill()
}
}
Rn = Math.random
LsystemRecurse = (size, splits, p1, p2, stem, theta, LsystemReduction, twistFactor) => {
if(size < .7) return
let X1 = stem
let Y1 = stem
let Z1 = stem
let X2 = stem
let Y2 = stem
let Z2 = stem
let p1a = Math.atan2(X2-X1,Z2-Z1)
let p2a = -Math.acos((Y2-Y1)/(Math.hypot(X2-X1,Y2-Y1,Z2-Z1)+.0001))+Math.PI
size/=LsystemReduction
for(let i=splits;i--;){
X = 0
Y = -size
Z = 0
R(0, theta, 0)
R(0, 0, Math.PI*2/splits*i+twistFactor)
R(0, p2a, 0)
R(0, 0, p1a+twistFactor)
X+=X2
Y+=Y2
Z+=Z2
let newStem =
Lshp = [...Lshp, newStem]
LsystemRecurse(size, splits, p1+Math.PI*2/splits*i+twistFactor, p2+theta, newStem, theta, LsystemReduction, twistFactor)
}
}
DrawLsystem = shp => {
shp.map(v=>{
x.beginPath()
X = v
Y = v
Z = v
R(Rl,Pt,Yw,1)
if(Z>0)x.lineTo(...Q())
X = v
Y = v
Z = v
R(Rl,Pt,Yw,1)
if(Z>0)x.lineTo(...Q())
lwo = Math.hypot(v-v,v-v,v-v)
stroke('#ff0000','#00aa00',lwo)
})
}
Lsystem = (size, splits, theta, LsystemReduction, twistFactor) => {
Lshp = []
stem =
Lshp = [...Lshp, stem]
LsystemRecurse(size, splits, 0, 0, stem, theta, LsystemReduction, twistFactor)
Lshp.map(v=>{
v+=size*1.5
v+=size*1.5
})
return Lshp
}
Sphere = (ls, rw, cl) => {
a = []
ls/=1.25
for(j = rw; j--;){
for(i = cl; i--;){
b = []
X = S(p = Math.PI*2/cl*i) * S(q = Math.PI/rw*j) * ls
Y = C(q) * ls
Z = C(p) * S(q) * ls
b = [...b, ]
X = S(p = Math.PI*2/cl*(i+1)) * S(q = Math.PI/rw*j) * ls
Y = C(q) * ls
Z = C(p) * S(q) * ls
b = [...b, ]
X = S(p = Math.PI*2/cl*(i+1)) * S(q = Math.PI/rw*(j+1)) * ls
Y = C(q) * ls
Z = C(p) * S(q) * ls
b = [...b, ]
X = S(p = Math.PI*2/cl*i) * S(q = Math.PI/rw*(j+1)) * ls
Y = C(q) * ls
Z = C(p) * S(q) * ls
b = [...b, ]
a = [...a, b]
}
}
return a
}
iWaveSystemc = 120
iWsp = .1
a = [], b = []
for(i=iWaveSystemc;i--;){
X = (-iWaveSystemc/2+i)*iWsp
Y = 0
Z = 0
a = [...a, ]
b = [...b, ]
}
base_waveSystem =
cl = 3
rw = 4
br = 4
sp = 8
iBc = rw*cl*br
B = Array(iBc).fill().map((v,i)=>{
X = ((i%cl)-cl/2+.5)*sp*4.95/3
Y = (((i/cl|0)%rw)-rw/2+.5)*sp
Z = ((i/cl/rw|0)-br/2+.5)*sp
return
})
}
oX=0, oY=0, oZ=14
Rl = t/3, Pt = -t, Yw = C(t/8)*10
x.globalAlpha = 2
x.fillStyle='#44aa88'
x.fillRect(0,0,c.width,c.height)
x.lineJoin = x.lineCap = 'round'
for(m=2;m--;) base_waveSystem.map((v, i)=>{ if(!aud.paused){
v=(m?-1:1)*iWsp + Math.max(0, ((S(p=Math.PI*8/iWaveSystemc*i+(v>0?1:-1)*C(t/4)*5)*4)**16/10000000000)+S((v>0?1:-1)*Math.PI*4/iWaveSystemc*i+t*5)+S((v>0?1:-1)*Math.PI*(S(t/4+t/2)*4)**3/iWaveSystemc*i+t*10)+S((v>0?1:-1)*Math.PI/iWaveSystemc*i+t*20))*(m?-1:1)
} })
B.map(v=>{
tx = v
ty = v
tz = v
for(m=2;m--;){
x.beginPath()
v.map(q=>{
X = q
Y = q
Z = q
p = Math.atan2(ty,tz)+Math.PI/2
R(0,p,0)
X += tx
Y += ty
Z += tz
R(Rl,Pt,Yw,1)
if(Z>0)x.lineTo(...Q())
})
stroke(m?'#ff0000':'#000078')
}
})
t+=1/60
requestAnimationFrame(Draw)
}
Draw()
</script>
<script >
var lrc = `假如有一天你不再爱我(DJ 版)
演唱: 姜雨涵
词: 未子夫
曲: 徐嘉良
编曲:DJ 阿能
【未经著作权人许可不得翻唱翻录或使用】
假如有一天你不再爱我
请你一定要直接告诉我
别让我这样傻傻地等着
你也别再让我一人失落
假如有一天你不再爱我
请你一定要坦白对我说
如果你遇见比我更好的
我会真心的祝福你快乐
有种分开 叫无可奈何
有种幸福叫 曾经拥有过
有种遗憾叫 不再打扰了
有种释怀叫爱过就够了
假如有一天你不再爱我
请你一定要坦白对我说
如果你遇见比我更好的
那么我错过也还算值得
假如有一天你不再爱我
请你一定要直接告诉我
别让我这样傻傻地等着
你也别再让我一人失落
假如有一天你不再爱我
请你一定要坦白对我说
如果你遇见比我更好的
我会真心的祝福你快乐
假如有一天你不再爱我
请你一定要坦白对我说
如果你遇见比我更好的
那么我错过也还算值得
`;
function $(id) {
return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 50, lrc_ul_height = 50;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
</script >
玄幻又不失科技感！点个大赞！{:4_199:} 亚伦老师创作辛苦创作愉快！ 漂亮~谢谢亚伦老师精彩分享{:4_191:} 很玄幻很漂亮，歌词同步的高亮在第一行也很奇妙。
欣赏亚伦老师好帖{:4_199:}
页:
[1]