论坛 › 〖互。助〗求助探讨 › 再开发一个动画【请难老师控制它】已解决

亚伦影音工作室 发表于 2024-11-11 19:12

再开发一个动画【请难老师控制它】已解决

本帖最后由 亚伦影音工作室 于 2025-11-2 07:34 编辑 <br /><br /><style>
#papa{
        position: relative;
        width: 1286px;
        height: 720px;
      margin-left:-300px;
        margin-top:180px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:#000 url(https://pic.imgdb.cn/item/67162d12d29ded1a8c2f45cf.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{
background:#fff;
position: absolute;
left: 50%;
top: 50%; mix-blend-mode: screen;
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"loop ></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)=>{
      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/1.4142/1.25
      for(i=3;i--;){
      X = S(p=Math.PI*2/3*i) * size/1.25
      Y = C(p) * size/1.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/1.25
      Y = C(p) * size/1.25
      Z = h
      a = [...a, ]
      X = S(p=Math.PI*2/3*(j+1)) * size/1.25
      Y = C(p) * size/1.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/1.5:-size/1.5),a[(j+1)%3]*l,a[(j+2)%3]*l]]
      return CB
    }
   
    Octahedron = size => {
      ret = []
      let h = size/1.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/1.25
      Y = C(p) * size/1.25
      Z = 0
      a = [...a, ]
      X = S(p=Math.PI*2/4*(j+1)) * size/1.25
      Y = C(p) * size/1.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/2.25
          q*=size/2.25
          q*=size/2.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=1) => {
      if(scol){
      //x.closePath()
      x.globalAlpha = .2
      x.strokeStyle = scol
      x.lineWidth = Math.min(100,600*lwo/Z)
      x.stroke()
      x.lineWidth /= 10
      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('#0f82','',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 = 100
    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=24
Rl = t/4, Pt = -t, Yw = C(t/6)*10

x.globalAlpha = 1
x.fillStyle='#000'
x.fillRect(0,0,c.width,c.height)
x.lineJoin = x.lineCap = 'round'

for(m=2;m--;) base_waveSystem.map((v, i)=>{
    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?'#40f6':'#0f26')
    }
})

t+=1/60
if(!aud.paused)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 >

起个网名好难 发表于 2024-11-11 19:25

是再不是在

梦油 发表于 2024-11-11 20:47

欣赏佳，作问候亚伦。

愤怒的葡萄 发表于 2024-11-11 22:21

这个应该是李一桐吧。

红影 发表于 2024-11-11 22:53

很漂亮呢，动画的控制我也不会，跟着一起学习{:4_187:}

起个网名好难 发表于 2024-11-11 23:15

本帖最后由 起个网名好难 于 2024-11-12 06:34 编辑

1.
mdiv.onclick = () => aud.paused ? (aud.play(), requestAnimationFrame(Draw)): (aud.pause());

2.

if(!aud.paused)    requestAnimationFrame(Draw);

亚伦影音工作室 发表于 2024-11-12 08:54

本帖最后由 亚伦影音工作室 于 2024-11-12 10:22 编辑

起个网名好难 发表于 2024-11-11 23:15
1.
mdiv.onclick = () => aud.paused ? (aud.play(), requestAnimationFrame(Draw)): (aud.pause());


歌词
假如有一天你不再爱我(DJ 版)
演唱: 姜雨涵
词: 未子夫
曲: 徐嘉良
编曲:DJ 阿能
【未经著作权人许可不得翻唱翻录或使用】
假如有一天你不再爱我
请你一定要直接告诉我
别让我这样傻傻地等着
你也别再让我一人失落
假如有一天你不再爱我
请你一定要坦白对我说
如果你遇见比我更好的
我会真心的祝福你快乐
有种分开 叫无可奈何
有种幸福叫 曾经拥有过
有种遗憾叫 不再打扰了
有种释怀叫爱过就够了
假如有一天你不再爱我
请你一定要坦白对我说
如果你遇见比我更好的
那么我错过也还算值得
假如有一天你不再爱我
请你一定要直接告诉我
别让我这样傻傻地等着
你也别再让我一人失落
假如有一天你不再爱我
请你一定要坦白对我说
如果你遇见比我更好的
我会真心的祝福你快乐
假如有一天你不再爱我
请你一定要坦白对我说
如果你遇见比我更好的
那么我错过也还算值得

起个网名好难 发表于 2024-11-12 08:58

亚伦影音工作室 发表于 2024-11-12 08:54
无法使用

找到两句所在 改一下， 不是添加！

起个网名好难 发表于 2024-11-12 09:02

亚伦影音工作室 发表于 2024-11-12 08:54
无法使用

两处都要改！

亚伦影音工作室 发表于 2024-11-12 09:49

起个网名好难 发表于 2024-11-12 09:02
两处都要改！

我找了只有在最后有。

起个网名好难 发表于 2024-11-12 09:53

亚伦影音工作室 发表于 2024-11-12 09:49
我找了只有在最后有。

就是最后的那句啊。

亚伦影音工作室 发表于 2024-11-12 09:57

本帖最后由 亚伦影音工作室 于 2024-11-12 10:01 编辑

起个网名好难 发表于 2024-11-12 09:53
就是最后的那句啊。
可是打开后动画不能自动，需要点击播放按钮才能动起来！

起个网名好难 发表于 2024-11-12 10:00

亚伦影音工作室 发表于 2024-11-12 09:57
可是打开后不能自动

那是因为歌曲没自动开始播放， 两者是联动的。

亚伦影音工作室 发表于 2024-11-12 10:02

起个网名好难 发表于 2024-11-12 10:00
那是因为歌曲没自动开始播放， 两者是联动的。

歌曲自动播放了，他不动。

起个网名好难 发表于 2024-11-12 10:36

亚伦影音工作室 发表于 2024-11-12 10:02
歌曲自动播放了，他不动。

大约是两者开始的同步没配合好吧。

亚伦影音工作室 发表于 2024-11-12 10:40

起个网名好难 发表于 2024-11-12 10:36
大约是两者开始的同步没配合好吧。

你是老师，我佩服，还是你来解决吧！

醉美水芙蓉 发表于 2024-11-12 11:15

起个网名好难 发表于 2024-11-12 12:02

亚伦影音工作室 发表于 2024-11-12 10:40
你是老师，我佩服，还是你来解决吧！

搞不定， 干脆让大家开始都别动{:5_102:}

小辣椒 发表于 2024-11-14 15:44

成功了啊，太好了{:4_199:}

查看完整版本: 再开发一个动画【请难老师控制它】已解决