主頁 > 區塊鏈 > 使用D3的transition()復制CSS變換影片

使用D3的transition()復制CSS變換影片

2022-09-14 00:50:02 區塊鏈

我正在使用 css 為 svg 元素設定影片transform，如下所示。

顯示代碼片段

.test>text {
     visibility: hidden;
     font-size: 30px;
     text-rendering: geometricPrecision;
     font-family: 'Oswald', sans-serif;
     stroke: white;
     fill: white;
     text-anchor: start;
     transform: var(--start);
     animation-name: move;
     animation-duration: 1200ms;
     animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    /*easeOutCubic*/
     animation-delay: var(--del);
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 @keyframes move {
     0% {
         transform: var(--start);
    }
     100% {
         visibility: visible;
         transform: var(--finish);
    }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=DM Sans&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
    </style>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 720">
      <rect class="vBoxRect" width="1280" height="720" fill="black"></rect>
      <g class="test" transform="translate(400,300)">
        <text x="-246.6640625" y="-30" data-start="translate(-242.48104095458984,-38.36601257324219)rotate(180)translate(242.48104095458984,38.36601257324219)" data-finish="translate(-242.48104095458984,-38.36601257324219)rotate(0)translate(242.48104095458984,38.36601257324219)" style="--del:0ms; --start:translate(-242.481px,-38.366px)rotate(180deg)translate(242.481px,38.366px); --finish:translate(-242.481px,-38.366px)rotate(0deg)translate(242.481px,38.366px);">A</text>
        <text x="-218.1640625" y="-30" data-start="translate(-218.16404724121094,-38.36601257324219)rotate(180)translate(218.16404724121094,38.36601257324219)" data-finish="translate(-218.16404724121094,-38.36601257324219)rotate(0)translate(218.16404724121094,38.36601257324219)" style="--del:100ms; --start:translate(-218.164px,-38.366px)rotate(180deg)translate(218.164px,38.366px); --finish:translate(-218.164px,-38.366px)rotate(0deg)translate(218.164px,38.366px);">c</text>
        <text x="-198.7890625" y="-30" data-start="translate(-194.60604095458984,-38.36601257324219)rotate(180)translate(194.60604095458984,38.36601257324219)" data-finish="translate(-194.60604095458984,-38.36601257324219)rotate(0)translate(194.60604095458984,38.36601257324219)" style="--del:200ms; --start:translate(-194.606px,-38.366px)rotate(180deg)translate(194.606px,38.366px); --finish:translate(-194.606px,-38.366px)rotate(0deg)translate(194.606px,38.366px);">c</text>
        <text x="-181.8671875" y="-30" data-start="translate(-177.6841812133789,-38.36601257324219)rotate(180)translate(177.6841812133789,38.36601257324219)" data-finish="translate(-177.6841812133789,-38.36601257324219)rotate(0)translate(177.6841812133789,38.36601257324219)" style="--del:300ms; --start:translate(-177.684px,-38.366px)rotate(180deg)translate(177.684px,38.366px); --finish:translate(-177.684px,-38.366px)rotate(0deg)translate(177.684px,38.366px);">l</text>
        <text x="-159.1953125" y="-30" data-start="translate(-159.19529724121094,-38.36601257324219)rotate(180)translate(159.19529724121094,38.36601257324219)" data-finish="translate(-159.19529724121094,-38.36601257324219)rotate(0)translate(159.19529724121094,38.36601257324219)" style="--del:400ms; --start:translate(-159.195px,-38.366px)rotate(180deg)translate(159.195px,38.366px); --finish:translate(-159.195px,-38.366px)rotate(0deg)translate(159.195px,38.366px);">i</text>
        <text x="-139.8046875" y="-30" data-start="translate(-135.62166595458984,-38.36601257324219)rotate(180)translate(135.62166595458984,38.36601257324219)" data-finish="translate(-135.62166595458984,-38.36601257324219)rotate(0)translate(135.62166595458984,38.36601257324219)" style="--del:500ms; --start:translate(-135.622px,-38.366px)rotate(180deg)translate(135.622px,38.366px); --finish:translate(-135.622px,-38.366px)rotate(0deg)translate(135.622px,38.366px);">m</text>
        <text x="-118.5703125" y="-30" data-start="translate(-118.5703125,-38.36601257324219)rotate(180)translate(118.5703125,38.36601257324219)" data-finish="translate(-118.5703125,-38.36601257324219)rotate(0)translate(118.5703125,38.36601257324219)" style="--del:600ms; --start:translate(-118.57px,-38.366px)rotate(180deg)translate(118.57px,38.366px); --finish:translate(-118.57px,-38.366px)rotate(0deg)translate(118.57px,38.366px);">a</text>
        <text x="-97.8671875" y="-30" data-start="translate(-97.8671875,-38.36601257324219)rotate(180)translate(97.8671875,38.36601257324219)" data-finish="translate(-97.8671875,-38.36601257324219)rotate(0)translate(97.8671875,38.36601257324219)" style="--del:700ms; --start:translate(-97.8672px,-38.366px)rotate(180deg)translate(97.8672px,38.366px); --finish:translate(-97.8672px,-38.366px)rotate(0deg)translate(97.8672px,38.366px);">t</text>
        <text x="-74.0546875" y="-30" data-start="translate(-74.0546875,-38.36601257324219)rotate(180)translate(74.0546875,38.36601257324219)" data-finish="translate(-74.0546875,-38.36601257324219)rotate(0)translate(74.0546875,38.36601257324219)" style="--del:800ms; --start:translate(-74.0547px,-38.366px)rotate(180deg)translate(74.0547px,38.366px); --finish:translate(-74.0547px,-38.366px)rotate(0deg)translate(74.0547px,38.366px);">i</text>
        <text x="-62.9453125" y="-30" data-start="translate(-58.762298583984375,-38.36601257324219)rotate(180)translate(58.762298583984375,38.36601257324219)" data-finish="translate(-58.762298583984375,-38.36601257324219)rotate(0)translate(58.762298583984375,38.36601257324219)" style="--del:900ms; --start:translate(-58.7623px,-38.366px)rotate(180deg)translate(58.7623px,38.366px); --finish:translate(-58.7623px,-38.366px)rotate(0deg)translate(58.7623px,38.366px);">z</text>
        <text x="-41.3515625" y="-30" data-start="translate(-37.16855239868164,-38.36601257324219)rotate(180)translate(37.16855239868164,38.36601257324219)" data-finish="translate(-37.16855239868164,-38.36601257324219)rotate(0)translate(37.16855239868164,38.36601257324219)" style="--del:1000ms; --start:translate(-37.1686px,-38.366px)rotate(180deg)translate(37.1686px,38.366px); --finish:translate(-37.1686px,-38.366px)rotate(0deg)translate(37.1686px,38.366px);">a</text>
        <text x="-20.1171875" y="-30" data-start="translate(-20.117185592651367,-38.36601257324219)rotate(180)translate(20.117185592651367,38.36601257324219)" data-finish="translate(-20.117185592651367,-38.36601257324219)rotate(0)translate(20.117185592651367,38.36601257324219)" style="--del:1100ms; --start:translate(-20.1172px,-38.366px)rotate(180deg)translate(20.1172px,38.366px); --finish:translate(-20.1172px,-38.366px)rotate(0deg)translate(20.1172px,38.366px);">t</text>
        <text x="3.7109375" y="-30" data-start="translate(3.7109375,-38.36601257324219)rotate(180)translate(-3.7109375,38.36601257324219)" data-finish="translate(3.7109375,-38.36601257324219)rotate(0)translate(-3.7109375,38.36601257324219)" style="--del:1200ms; --start:translate(3.71094px,-38.366px)rotate(180deg)translate(-3.71094px,38.366px); --finish:translate(3.71094px,-38.366px)rotate(0deg)translate(-3.71094px,38.366px);">i</text>
        <text x="14.8046875" y="-30" data-start="translate(18.987692832946777,-38.36601257324219)rotate(180)translate(-18.987692832946777,38.36601257324219)" data-finish="translate(18.987692832946777,-38.36601257324219)rotate(0)translate(-18.987692832946777,38.36601257324219)" style="--del:1300ms; --start:translate(18.9877px,-38.366px)rotate(180deg)translate(-18.9877px,38.366px); --finish:translate(18.9877px,-38.366px)rotate(0deg)translate(-18.9877px,38.366px);">o</text>
        <text x="31.7265625" y="-30" data-start="translate(35.909565925598145,-38.36601257324219)rotate(180)translate(-35.909565925598145,38.36601257324219)" data-finish="translate(35.909565925598145,-38.36601257324219)rotate(0)translate(-35.909565925598145,38.36601257324219)" style="--del:1400ms; --start:translate(35.9096px,-38.366px)rotate(180deg)translate(-35.9096px,38.366px); --finish:translate(35.9096px,-38.366px)rotate(0deg)translate(-35.9096px,38.366px);">n</text>
        <text x="53.3203125" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:1500ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="64.4296875" y="-30" data-start="translate(64.4296817779541,-38.36601257324219)rotate(180)translate(-64.4296817779541,38.36601257324219)" data-finish="translate(64.4296817779541,-38.36601257324219)rotate(0)translate(-64.4296817779541,38.36601257324219)" style="--del:1600ms; --start:translate(64.4297px,-38.366px)rotate(180deg)translate(-64.4297px,38.366px); --finish:translate(64.4297px,-38.366px)rotate(0deg)translate(-64.4297px,38.366px);">i</text>
        <text x="75.5234375" y="-30" data-start="translate(75.5234375,-38.36601257324219)rotate(180)translate(-75.5234375,38.36601257324219)" data-finish="translate(75.5234375,-38.36601257324219)rotate(0)translate(-75.5234375,38.36601257324219)" style="--del:1700ms; --start:translate(75.5234px,-38.366px)rotate(180deg)translate(-75.5234px,38.366px); --finish:translate(75.5234px,-38.366px)rotate(0deg)translate(-75.5234px,38.366px);">s</text>
        <text x="96.2265625" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:1800ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="107.3203125" y="-30" data-start="translate(107.3203125,-38.36601257324219)rotate(180)translate(-107.3203125,38.36601257324219)" data-finish="translate(107.3203125,-38.36601257324219)rotate(0)translate(-107.3203125,38.36601257324219)" style="--del:1900ms; --start:translate(107.32px,-38.366px)rotate(180deg)translate(-107.32px,38.366px); --finish:translate(107.32px,-38.366px)rotate(0deg)translate(-107.32px,38.366px);">t</text>
        <text x="131.1484375" y="-30" data-start="translate(135.33144760131836,-38.36601257324219)rotate(180)translate(-135.33144760131836,38.36601257324219)" data-finish="translate(135.33144760131836,-38.36601257324219)rotate(0)translate(-135.33144760131836,38.36601257324219)" style="--del:2000ms; --start:translate(135.331px,-38.366px)rotate(180deg)translate(-135.331px,38.366px); --finish:translate(135.331px,-38.366px)rotate(0deg)translate(-135.331px,38.366px);">h</text>
        <text x="151.4296875" y="-30" data-start="translate(155.6126937866211,-38.36601257324219)rotate(180)translate(-155.6126937866211,38.36601257324219)" data-finish="translate(155.6126937866211,-38.36601257324219)rotate(0)translate(-155.6126937866211,38.36601257324219)" style="--del:2100ms; --start:translate(155.613px,-38.366px)rotate(180deg)translate(-155.613px,38.366px); --finish:translate(155.613px,-38.366px)rotate(0deg)translate(-155.613px,38.366px);">e</text>
        <text x="171.7734375" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:2200ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="182.8671875" y="-30" data-start="translate(187.05017852783203,-38.36601257324219)rotate(180)translate(-187.05017852783203,38.36601257324219)" data-finish="translate(187.05017852783203,-38.36601257324219)rotate(0)translate(-187.05017852783203,38.36601257324219)" style="--del:2300ms; --start:translate(187.05px,-38.366px)rotate(180deg)translate(-187.05px,38.366px); --finish:translate(187.05px,-38.366px)rotate(0deg)translate(-187.05px,38.366px);">k</text>
        <text x="205.5546875" y="-30" data-start="translate(209.7376937866211,-38.36601257324219)rotate(180)translate(-209.7376937866211,38.36601257324219)" data-finish="translate(209.7376937866211,-38.36601257324219)rotate(0)translate(-209.7376937866211,38.36601257324219)" style="--del:2400ms; --start:translate(209.738px,-38.366px)rotate(180deg)translate(-209.738px,38.366px); --finish:translate(209.738px,-38.366px)rotate(0deg)translate(-209.738px,38.366px);">e</text>
        <text x="225.8828125" y="-30" data-start="translate(230.06580352783203,-34.183006286621094)rotate(180)translate(-230.06580352783203,34.183006286621094)" data-finish="translate(230.06580352783203,-34.183006286621094)rotate(0)translate(-230.06580352783203,34.183006286621094)" style="--del:2500ms; --start:translate(230.066px,-34.183px)rotate(180deg)translate(-230.066px,34.183px); --finish:translate(230.066px,-34.183px)rotate(0deg)translate(-230.066px,34.183px);">y</text>
      </g>
    </svg>
    <script type="text/javascript" src="prod4.js"></script>
  </body>
</html>

在 CSS 關鍵幀中，我傳遞如下變換元素；

     @keyframes move {
     0% {
         transform: var(--start);/*translate(-233.311px,-46.0643px)rotate(180deg)translate(233.311px,46.0643px);*/
    }
     100% {
         visibility: visible;
         transform: var(--finish);/*translate(-233.311px,-46.0643px)rotate(0deg)translate(233.311px,46.0643px);*/
    }
}

我正在嘗試在 d3 中復制相同的內容，但我無法做到

d3.selectAll('.test > text')
    .style('visibility', 'hidden')
    .transition(1200)
    .ease(d3.easeCubicOut)
    .delay(
        function(d, i) {
            return i * 100;
        }
    )
    .attrTween('transform', function() {
        const selection = d3.select(this);
        const node = selection.node();
        const start = node.getAttribute('data-start');
        const fin = node.getAttribute('data-finish');
        //console.log(d3.interpolateString(start, fin));
        return d3.interpolateString(start, fin);

    })
    .style('visibility', 'visible')
.test>text {    
     font-size: 30px;
     text-rendering: geometricPrecision;
     font-family: 'Oswald', sans-serif;
     stroke: white;
     fill: white;
     text-anchor: start;     
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=DM Sans&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
    </style>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 720">
      <rect class="vBoxRect" width="1280" height="720" fill="black"></rect>
      <g class="test" transform="translate(400,300)">
        <text x="-246.6640625" y="-30" data-start="translate(-242.48104095458984,-38.36601257324219)rotate(180)translate(242.48104095458984,38.36601257324219)" data-finish="translate(-242.48104095458984,-38.36601257324219)rotate(0)translate(242.48104095458984,38.36601257324219)" style="--del:0ms; --start:translate(-242.481px,-38.366px)rotate(180deg)translate(242.481px,38.366px); --finish:translate(-242.481px,-38.366px)rotate(0deg)translate(242.481px,38.366px);">A</text>
        <text x="-218.1640625" y="-30" data-start="translate(-218.16404724121094,-38.36601257324219)rotate(180)translate(218.16404724121094,38.36601257324219)" data-finish="translate(-218.16404724121094,-38.36601257324219)rotate(0)translate(218.16404724121094,38.36601257324219)" style="--del:100ms; --start:translate(-218.164px,-38.366px)rotate(180deg)translate(218.164px,38.366px); --finish:translate(-218.164px,-38.366px)rotate(0deg)translate(218.164px,38.366px);">c</text>
        <text x="-198.7890625" y="-30" data-start="translate(-194.60604095458984,-38.36601257324219)rotate(180)translate(194.60604095458984,38.36601257324219)" data-finish="translate(-194.60604095458984,-38.36601257324219)rotate(0)translate(194.60604095458984,38.36601257324219)" style="--del:200ms; --start:translate(-194.606px,-38.366px)rotate(180deg)translate(194.606px,38.366px); --finish:translate(-194.606px,-38.366px)rotate(0deg)translate(194.606px,38.366px);">c</text>
        <text x="-181.8671875" y="-30" data-start="translate(-177.6841812133789,-38.36601257324219)rotate(180)translate(177.6841812133789,38.36601257324219)" data-finish="translate(-177.6841812133789,-38.36601257324219)rotate(0)translate(177.6841812133789,38.36601257324219)" style="--del:300ms; --start:translate(-177.684px,-38.366px)rotate(180deg)translate(177.684px,38.366px); --finish:translate(-177.684px,-38.366px)rotate(0deg)translate(177.684px,38.366px);">l</text>
        <text x="-159.1953125" y="-30" data-start="translate(-159.19529724121094,-38.36601257324219)rotate(180)translate(159.19529724121094,38.36601257324219)" data-finish="translate(-159.19529724121094,-38.36601257324219)rotate(0)translate(159.19529724121094,38.36601257324219)" style="--del:400ms; --start:translate(-159.195px,-38.366px)rotate(180deg)translate(159.195px,38.366px); --finish:translate(-159.195px,-38.366px)rotate(0deg)translate(159.195px,38.366px);">i</text>
        <text x="-139.8046875" y="-30" data-start="translate(-135.62166595458984,-38.36601257324219)rotate(180)translate(135.62166595458984,38.36601257324219)" data-finish="translate(-135.62166595458984,-38.36601257324219)rotate(0)translate(135.62166595458984,38.36601257324219)" style="--del:500ms; --start:translate(-135.622px,-38.366px)rotate(180deg)translate(135.622px,38.366px); --finish:translate(-135.622px,-38.366px)rotate(0deg)translate(135.622px,38.366px);">m</text>
        <text x="-118.5703125" y="-30" data-start="translate(-118.5703125,-38.36601257324219)rotate(180)translate(118.5703125,38.36601257324219)" data-finish="translate(-118.5703125,-38.36601257324219)rotate(0)translate(118.5703125,38.36601257324219)" style="--del:600ms; --start:translate(-118.57px,-38.366px)rotate(180deg)translate(118.57px,38.366px); --finish:translate(-118.57px,-38.366px)rotate(0deg)translate(118.57px,38.366px);">a</text>
        <text x="-97.8671875" y="-30" data-start="translate(-97.8671875,-38.36601257324219)rotate(180)translate(97.8671875,38.36601257324219)" data-finish="translate(-97.8671875,-38.36601257324219)rotate(0)translate(97.8671875,38.36601257324219)" style="--del:700ms; --start:translate(-97.8672px,-38.366px)rotate(180deg)translate(97.8672px,38.366px); --finish:translate(-97.8672px,-38.366px)rotate(0deg)translate(97.8672px,38.366px);">t</text>
        <text x="-74.0546875" y="-30" data-start="translate(-74.0546875,-38.36601257324219)rotate(180)translate(74.0546875,38.36601257324219)" data-finish="translate(-74.0546875,-38.36601257324219)rotate(0)translate(74.0546875,38.36601257324219)" style="--del:800ms; --start:translate(-74.0547px,-38.366px)rotate(180deg)translate(74.0547px,38.366px); --finish:translate(-74.0547px,-38.366px)rotate(0deg)translate(74.0547px,38.366px);">i</text>
        <text x="-62.9453125" y="-30" data-start="translate(-58.762298583984375,-38.36601257324219)rotate(180)translate(58.762298583984375,38.36601257324219)" data-finish="translate(-58.762298583984375,-38.36601257324219)rotate(0)translate(58.762298583984375,38.36601257324219)" style="--del:900ms; --start:translate(-58.7623px,-38.366px)rotate(180deg)translate(58.7623px,38.366px); --finish:translate(-58.7623px,-38.366px)rotate(0deg)translate(58.7623px,38.366px);">z</text>
        <text x="-41.3515625" y="-30" data-start="translate(-37.16855239868164,-38.36601257324219)rotate(180)translate(37.16855239868164,38.36601257324219)" data-finish="translate(-37.16855239868164,-38.36601257324219)rotate(0)translate(37.16855239868164,38.36601257324219)" style="--del:1000ms; --start:translate(-37.1686px,-38.366px)rotate(180deg)translate(37.1686px,38.366px); --finish:translate(-37.1686px,-38.366px)rotate(0deg)translate(37.1686px,38.366px);">a</text>
        <text x="-20.1171875" y="-30" data-start="translate(-20.117185592651367,-38.36601257324219)rotate(180)translate(20.117185592651367,38.36601257324219)" data-finish="translate(-20.117185592651367,-38.36601257324219)rotate(0)translate(20.117185592651367,38.36601257324219)" style="--del:1100ms; --start:translate(-20.1172px,-38.366px)rotate(180deg)translate(20.1172px,38.366px); --finish:translate(-20.1172px,-38.366px)rotate(0deg)translate(20.1172px,38.366px);">t</text>
        <text x="3.7109375" y="-30" data-start="translate(3.7109375,-38.36601257324219)rotate(180)translate(-3.7109375,38.36601257324219)" data-finish="translate(3.7109375,-38.36601257324219)rotate(0)translate(-3.7109375,38.36601257324219)" style="--del:1200ms; --start:translate(3.71094px,-38.366px)rotate(180deg)translate(-3.71094px,38.366px); --finish:translate(3.71094px,-38.366px)rotate(0deg)translate(-3.71094px,38.366px);">i</text>
        <text x="14.8046875" y="-30" data-start="translate(18.987692832946777,-38.36601257324219)rotate(180)translate(-18.987692832946777,38.36601257324219)" data-finish="translate(18.987692832946777,-38.36601257324219)rotate(0)translate(-18.987692832946777,38.36601257324219)" style="--del:1300ms; --start:translate(18.9877px,-38.366px)rotate(180deg)translate(-18.9877px,38.366px); --finish:translate(18.9877px,-38.366px)rotate(0deg)translate(-18.9877px,38.366px);">o</text>
        <text x="31.7265625" y="-30" data-start="translate(35.909565925598145,-38.36601257324219)rotate(180)translate(-35.909565925598145,38.36601257324219)" data-finish="translate(35.909565925598145,-38.36601257324219)rotate(0)translate(-35.909565925598145,38.36601257324219)" style="--del:1400ms; --start:translate(35.9096px,-38.366px)rotate(180deg)translate(-35.9096px,38.366px); --finish:translate(35.9096px,-38.366px)rotate(0deg)translate(-35.9096px,38.366px);">n</text>
        <text x="53.3203125" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:1500ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="64.4296875" y="-30" data-start="translate(64.4296817779541,-38.36601257324219)rotate(180)translate(-64.4296817779541,38.36601257324219)" data-finish="translate(64.4296817779541,-38.36601257324219)rotate(0)translate(-64.4296817779541,38.36601257324219)" style="--del:1600ms; --start:translate(64.4297px,-38.366px)rotate(180deg)translate(-64.4297px,38.366px); --finish:translate(64.4297px,-38.366px)rotate(0deg)translate(-64.4297px,38.366px);">i</text>
        <text x="75.5234375" y="-30" data-start="translate(75.5234375,-38.36601257324219)rotate(180)translate(-75.5234375,38.36601257324219)" data-finish="translate(75.5234375,-38.36601257324219)rotate(0)translate(-75.5234375,38.36601257324219)" style="--del:1700ms; --start:translate(75.5234px,-38.366px)rotate(180deg)translate(-75.5234px,38.366px); --finish:translate(75.5234px,-38.366px)rotate(0deg)translate(-75.5234px,38.366px);">s</text>
        <text x="96.2265625" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:1800ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="107.3203125" y="-30" data-start="translate(107.3203125,-38.36601257324219)rotate(180)translate(-107.3203125,38.36601257324219)" data-finish="translate(107.3203125,-38.36601257324219)rotate(0)translate(-107.3203125,38.36601257324219)" style="--del:1900ms; --start:translate(107.32px,-38.366px)rotate(180deg)translate(-107.32px,38.366px); --finish:translate(107.32px,-38.366px)rotate(0deg)translate(-107.32px,38.366px);">t</text>
        <text x="131.1484375" y="-30" data-start="translate(135.33144760131836,-38.36601257324219)rotate(180)translate(-135.33144760131836,38.36601257324219)" data-finish="translate(135.33144760131836,-38.36601257324219)rotate(0)translate(-135.33144760131836,38.36601257324219)" style="--del:2000ms; --start:translate(135.331px,-38.366px)rotate(180deg)translate(-135.331px,38.366px); --finish:translate(135.331px,-38.366px)rotate(0deg)translate(-135.331px,38.366px);">h</text>
        <text x="151.4296875" y="-30" data-start="translate(155.6126937866211,-38.36601257324219)rotate(180)translate(-155.6126937866211,38.36601257324219)" data-finish="translate(155.6126937866211,-38.36601257324219)rotate(0)translate(-155.6126937866211,38.36601257324219)" style="--del:2100ms; --start:translate(155.613px,-38.366px)rotate(180deg)translate(-155.613px,38.366px); --finish:translate(155.613px,-38.366px)rotate(0deg)translate(-155.613px,38.366px);">e</text>
        <text x="171.7734375" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:2200ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="182.8671875" y="-30" data-start="translate(187.05017852783203,-38.36601257324219)rotate(180)translate(-187.05017852783203,38.36601257324219)" data-finish="translate(187.05017852783203,-38.36601257324219)rotate(0)translate(-187.05017852783203,38.36601257324219)" style="--del:2300ms; --start:translate(187.05px,-38.366px)rotate(180deg)translate(-187.05px,38.366px); --finish:translate(187.05px,-38.366px)rotate(0deg)translate(-187.05px,38.366px);">k</text>
        <text x="205.5546875" y="-30" data-start="translate(209.7376937866211,-38.36601257324219)rotate(180)translate(-209.7376937866211,38.36601257324219)" data-finish="translate(209.7376937866211,-38.36601257324219)rotate(0)translate(-209.7376937866211,38.36601257324219)" style="--del:2400ms; --start:translate(209.738px,-38.366px)rotate(180deg)translate(-209.738px,38.366px); --finish:translate(209.738px,-38.366px)rotate(0deg)translate(-209.738px,38.366px);">e</text>
        <text x="225.8828125" y="-30" data-start="translate(230.06580352783203,-34.183006286621094)rotate(180)translate(-230.06580352783203,34.183006286621094)" data-finish="translate(230.06580352783203,-34.183006286621094)rotate(0)translate(-230.06580352783203,34.183006286621094)" style="--del:2500ms; --start:translate(230.066px,-34.183px)rotate(180deg)translate(-230.066px,34.183px); --finish:translate(230.066px,-34.183px)rotate(0deg)translate(-230.066px,34.183px);">y</text>
      </g>
    </svg>
    <script type="text/javascript" src="prod4.js"></script>
  </body>
</html>

我認為不會d3.interpolateString(start, fin)像 CSS 那樣對它進行插值。如何使用 d3 復制它？

只是為了確保它不會因為緩動而發生，我在 d3 中使用了與 CSS easeCubicOut中相同的緩動

此外，data-start并且data-finish具有與 css 變數相同的資訊--start和--finish

uj5u.com熱心網友回復：

在 D3 中，傳遞給transition()方法的值（在檔案中稱為name）就是轉換的名稱。您必須將持續時間傳遞給該方法。如果不這樣做，則默認為 250 毫秒。duration()

因此，而不是...

.transition(1200)

...它應該是：

.transition()
.duration(1200)

這是您進行更改的代碼段：

顯示代碼片段

d3.selectAll('.test > text')
    .style('visibility', 'hidden')
    .transition()
    .duration(1200)
    .ease(d3.easeCubicOut)
    .delay(
        function(d, i) {
            return i * 100;
        }
    )
    .attrTween('transform', function() {
        const selection = d3.select(this);
        const node = selection.node();
        const start = node.getAttribute('data-start');
        const fin = node.getAttribute('data-finish');
        //console.log(d3.interpolateString(start, fin));
        return d3.interpolateString(start, fin);

    })
    .style('visibility', 'visible')
.test>text {    
     font-size: 30px;
     text-rendering: geometricPrecision;
     font-family: 'Oswald', sans-serif;
     stroke: white;
     fill: white;
     text-anchor: start;     
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=DM Sans&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
    </style>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 720">
      <rect class="vBoxRect" width="1280" height="720" fill="black"></rect>
      <g class="test" transform="translate(400,300)">
        <text x="-246.6640625" y="-30" data-start="translate(-242.48104095458984,-38.36601257324219)rotate(180)translate(242.48104095458984,38.36601257324219)" data-finish="translate(-242.48104095458984,-38.36601257324219)rotate(0)translate(242.48104095458984,38.36601257324219)" style="--del:0ms; --start:translate(-242.481px,-38.366px)rotate(180deg)translate(242.481px,38.366px); --finish:translate(-242.481px,-38.366px)rotate(0deg)translate(242.481px,38.366px);">A</text>
        <text x="-218.1640625" y="-30" data-start="translate(-218.16404724121094,-38.36601257324219)rotate(180)translate(218.16404724121094,38.36601257324219)" data-finish="translate(-218.16404724121094,-38.36601257324219)rotate(0)translate(218.16404724121094,38.36601257324219)" style="--del:100ms; --start:translate(-218.164px,-38.366px)rotate(180deg)translate(218.164px,38.366px); --finish:translate(-218.164px,-38.366px)rotate(0deg)translate(218.164px,38.366px);">c</text>
        <text x="-198.7890625" y="-30" data-start="translate(-194.60604095458984,-38.36601257324219)rotate(180)translate(194.60604095458984,38.36601257324219)" data-finish="translate(-194.60604095458984,-38.36601257324219)rotate(0)translate(194.60604095458984,38.36601257324219)" style="--del:200ms; --start:translate(-194.606px,-38.366px)rotate(180deg)translate(194.606px,38.366px); --finish:translate(-194.606px,-38.366px)rotate(0deg)translate(194.606px,38.366px);">c</text>
        <text x="-181.8671875" y="-30" data-start="translate(-177.6841812133789,-38.36601257324219)rotate(180)translate(177.6841812133789,38.36601257324219)" data-finish="translate(-177.6841812133789,-38.36601257324219)rotate(0)translate(177.6841812133789,38.36601257324219)" style="--del:300ms; --start:translate(-177.684px,-38.366px)rotate(180deg)translate(177.684px,38.366px); --finish:translate(-177.684px,-38.366px)rotate(0deg)translate(177.684px,38.366px);">l</text>
        <text x="-159.1953125" y="-30" data-start="translate(-159.19529724121094,-38.36601257324219)rotate(180)translate(159.19529724121094,38.36601257324219)" data-finish="translate(-159.19529724121094,-38.36601257324219)rotate(0)translate(159.19529724121094,38.36601257324219)" style="--del:400ms; --start:translate(-159.195px,-38.366px)rotate(180deg)translate(159.195px,38.366px); --finish:translate(-159.195px,-38.366px)rotate(0deg)translate(159.195px,38.366px);">i</text>
        <text x="-139.8046875" y="-30" data-start="translate(-135.62166595458984,-38.36601257324219)rotate(180)translate(135.62166595458984,38.36601257324219)" data-finish="translate(-135.62166595458984,-38.36601257324219)rotate(0)translate(135.62166595458984,38.36601257324219)" style="--del:500ms; --start:translate(-135.622px,-38.366px)rotate(180deg)translate(135.622px,38.366px); --finish:translate(-135.622px,-38.366px)rotate(0deg)translate(135.622px,38.366px);">m</text>
        <text x="-118.5703125" y="-30" data-start="translate(-118.5703125,-38.36601257324219)rotate(180)translate(118.5703125,38.36601257324219)" data-finish="translate(-118.5703125,-38.36601257324219)rotate(0)translate(118.5703125,38.36601257324219)" style="--del:600ms; --start:translate(-118.57px,-38.366px)rotate(180deg)translate(118.57px,38.366px); --finish:translate(-118.57px,-38.366px)rotate(0deg)translate(118.57px,38.366px);">a</text>
        <text x="-97.8671875" y="-30" data-start="translate(-97.8671875,-38.36601257324219)rotate(180)translate(97.8671875,38.36601257324219)" data-finish="translate(-97.8671875,-38.36601257324219)rotate(0)translate(97.8671875,38.36601257324219)" style="--del:700ms; --start:translate(-97.8672px,-38.366px)rotate(180deg)translate(97.8672px,38.366px); --finish:translate(-97.8672px,-38.366px)rotate(0deg)translate(97.8672px,38.366px);">t</text>
        <text x="-74.0546875" y="-30" data-start="translate(-74.0546875,-38.36601257324219)rotate(180)translate(74.0546875,38.36601257324219)" data-finish="translate(-74.0546875,-38.36601257324219)rotate(0)translate(74.0546875,38.36601257324219)" style="--del:800ms; --start:translate(-74.0547px,-38.366px)rotate(180deg)translate(74.0547px,38.366px); --finish:translate(-74.0547px,-38.366px)rotate(0deg)translate(74.0547px,38.366px);">i</text>
        <text x="-62.9453125" y="-30" data-start="translate(-58.762298583984375,-38.36601257324219)rotate(180)translate(58.762298583984375,38.36601257324219)" data-finish="translate(-58.762298583984375,-38.36601257324219)rotate(0)translate(58.762298583984375,38.36601257324219)" style="--del:900ms; --start:translate(-58.7623px,-38.366px)rotate(180deg)translate(58.7623px,38.366px); --finish:translate(-58.7623px,-38.366px)rotate(0deg)translate(58.7623px,38.366px);">z</text>
        <text x="-41.3515625" y="-30" data-start="translate(-37.16855239868164,-38.36601257324219)rotate(180)translate(37.16855239868164,38.36601257324219)" data-finish="translate(-37.16855239868164,-38.36601257324219)rotate(0)translate(37.16855239868164,38.36601257324219)" style="--del:1000ms; --start:translate(-37.1686px,-38.366px)rotate(180deg)translate(37.1686px,38.366px); --finish:translate(-37.1686px,-38.366px)rotate(0deg)translate(37.1686px,38.366px);">a</text>
        <text x="-20.1171875" y="-30" data-start="translate(-20.117185592651367,-38.36601257324219)rotate(180)translate(20.117185592651367,38.36601257324219)" data-finish="translate(-20.117185592651367,-38.36601257324219)rotate(0)translate(20.117185592651367,38.36601257324219)" style="--del:1100ms; --start:translate(-20.1172px,-38.366px)rotate(180deg)translate(20.1172px,38.366px); --finish:translate(-20.1172px,-38.366px)rotate(0deg)translate(20.1172px,38.366px);">t</text>
        <text x="3.7109375" y="-30" data-start="translate(3.7109375,-38.36601257324219)rotate(180)translate(-3.7109375,38.36601257324219)" data-finish="translate(3.7109375,-38.36601257324219)rotate(0)translate(-3.7109375,38.36601257324219)" style="--del:1200ms; --start:translate(3.71094px,-38.366px)rotate(180deg)translate(-3.71094px,38.366px); --finish:translate(3.71094px,-38.366px)rotate(0deg)translate(-3.71094px,38.366px);">i</text>
        <text x="14.8046875" y="-30" data-start="translate(18.987692832946777,-38.36601257324219)rotate(180)translate(-18.987692832946777,38.36601257324219)" data-finish="translate(18.987692832946777,-38.36601257324219)rotate(0)translate(-18.987692832946777,38.36601257324219)" style="--del:1300ms; --start:translate(18.9877px,-38.366px)rotate(180deg)translate(-18.9877px,38.366px); --finish:translate(18.9877px,-38.366px)rotate(0deg)translate(-18.9877px,38.366px);">o</text>
        <text x="31.7265625" y="-30" data-start="translate(35.909565925598145,-38.36601257324219)rotate(180)translate(-35.909565925598145,38.36601257324219)" data-finish="translate(35.909565925598145,-38.36601257324219)rotate(0)translate(-35.909565925598145,38.36601257324219)" style="--del:1400ms; --start:translate(35.9096px,-38.366px)rotate(180deg)translate(-35.9096px,38.366px); --finish:translate(35.9096px,-38.366px)rotate(0deg)translate(-35.9096px,38.366px);">n</text>
        <text x="53.3203125" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:1500ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="64.4296875" y="-30" data-start="translate(64.4296817779541,-38.36601257324219)rotate(180)translate(-64.4296817779541,38.36601257324219)" data-finish="translate(64.4296817779541,-38.36601257324219)rotate(0)translate(-64.4296817779541,38.36601257324219)" style="--del:1600ms; --start:translate(64.4297px,-38.366px)rotate(180deg)translate(-64.4297px,38.366px); --finish:translate(64.4297px,-38.366px)rotate(0deg)translate(-64.4297px,38.366px);">i</text>
        <text x="75.5234375" y="-30" data-start="translate(75.5234375,-38.36601257324219)rotate(180)translate(-75.5234375,38.36601257324219)" data-finish="translate(75.5234375,-38.36601257324219)rotate(0)translate(-75.5234375,38.36601257324219)" style="--del:1700ms; --start:translate(75.5234px,-38.366px)rotate(180deg)translate(-75.5234px,38.366px); --finish:translate(75.5234px,-38.366px)rotate(0deg)translate(-75.5234px,38.366px);">s</text>
        <text x="96.2265625" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:1800ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="107.3203125" y="-30" data-start="translate(107.3203125,-38.36601257324219)rotate(180)translate(-107.3203125,38.36601257324219)" data-finish="translate(107.3203125,-38.36601257324219)rotate(0)translate(-107.3203125,38.36601257324219)" style="--del:1900ms; --start:translate(107.32px,-38.366px)rotate(180deg)translate(-107.32px,38.366px); --finish:translate(107.32px,-38.366px)rotate(0deg)translate(-107.32px,38.366px);">t</text>
        <text x="131.1484375" y="-30" data-start="translate(135.33144760131836,-38.36601257324219)rotate(180)translate(-135.33144760131836,38.36601257324219)" data-finish="translate(135.33144760131836,-38.36601257324219)rotate(0)translate(-135.33144760131836,38.36601257324219)" style="--del:2000ms; --start:translate(135.331px,-38.366px)rotate(180deg)translate(-135.331px,38.366px); --finish:translate(135.331px,-38.366px)rotate(0deg)translate(-135.331px,38.366px);">h</text>
        <text x="151.4296875" y="-30" data-start="translate(155.6126937866211,-38.36601257324219)rotate(180)translate(-155.6126937866211,38.36601257324219)" data-finish="translate(155.6126937866211,-38.36601257324219)rotate(0)translate(-155.6126937866211,38.36601257324219)" style="--del:2100ms; --start:translate(155.613px,-38.366px)rotate(180deg)translate(-155.613px,38.366px); --finish:translate(155.613px,-38.366px)rotate(0deg)translate(-155.613px,38.366px);">e</text>
        <text x="171.7734375" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:2200ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="182.8671875" y="-30" data-start="translate(187.05017852783203,-38.36601257324219)rotate(180)translate(-187.05017852783203,38.36601257324219)" data-finish="translate(187.05017852783203,-38.36601257324219)rotate(0)translate(-187.05017852783203,38.36601257324219)" style="--del:2300ms; --start:translate(187.05px,-38.366px)rotate(180deg)translate(-187.05px,38.366px); --finish:translate(187.05px,-38.366px)rotate(0deg)translate(-187.05px,38.366px);">k</text>
        <text x="205.5546875" y="-30" data-start="translate(209.7376937866211,-38.36601257324219)rotate(180)translate(-209.7376937866211,38.36601257324219)" data-finish="translate(209.7376937866211,-38.36601257324219)rotate(0)translate(-209.7376937866211,38.36601257324219)" style="--del:2400ms; --start:translate(209.738px,-38.366px)rotate(180deg)translate(-209.738px,38.366px); --finish:translate(209.738px,-38.366px)rotate(0deg)translate(-209.738px,38.366px);">e</text>
        <text x="225.8828125" y="-30" data-start="translate(230.06580352783203,-34.183006286621094)rotate(180)translate(-230.06580352783203,34.183006286621094)" data-finish="translate(230.06580352783203,-34.183006286621094)rotate(0)translate(-230.06580352783203,34.183006286621094)" style="--del:2500ms; --start:translate(230.066px,-34.183px)rotate(180deg)translate(-230.066px,34.183px); --finish:translate(230.066px,-34.183px)rotate(0deg)translate(-230.066px,34.183px);">y</text>
      </g>
    </svg>
    <script type="text/javascript" src="prod4.js"></script>
  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/506786.html

標籤：javascript 动画 svg d3.js 转换

上一篇：讓用戶在ObservableNotebook中添加自己的資料集

下一篇：在svelte中渲染使用d3.js創建的div節點？

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • JAVA使用 web3j 進行token轉賬

    最近新學習了下區塊鏈這方面的知識，所學不多，給大家分享下。 # 1. 關于web3j web3j是一個高度模塊化，反應性，型別安全的Java和Android庫，用于與智能合約配合并與以太坊網路上的客戶端（節點）集成。 # 2. 準備作業 jdk版本1.8 引入maven <dependency> < ......

    uj5u.com 2020-09-10 03:03:06 more
  • 以太坊智能合約開發框架Truffle

    前言 部署智能合約有多種方式，命令列的瀏覽器的渠道都有，但往往跟我們程式員的風格不太相符，因為我們習慣了在IDE里寫了代碼然后打包運行看效果。 雖然現在IDE中已經存在了Solidity插件，可以撰寫智能合約，但是部署智能合約卻要另走他路，沒辦法進行一個快捷的部署與測驗。 如果團隊管理的區塊節點多、 ......

    uj5u.com 2020-09-10 03:03:12 more
  • 谷歌二次驗證碼成為區塊鏈專用安全碼，你怎么看？

    前言 谷歌身份驗證器，前些年大家都比較陌生，但隨著國內互聯網安全的加強，它越來越多地出現在大家的視野中。 比較廣泛接觸的人群是國際3A游戲愛好者，游戲盜號現象嚴重+國外賬號安全應用廣泛，這類游戲一般都會要求用戶系結名為“兩步驗證”、“雙重驗證”等，平臺一般都推薦用谷歌身份驗證器。 后來區塊鏈業務風靡 ......

    uj5u.com 2020-09-10 03:03:17 more
  • 密碼學DAY1

    目錄 ##1.1 密碼學基本概念 密碼在我們的生活中有著重要的作用，那么密碼究竟來自何方，為何會產生呢？ 密碼學是網路安全、資訊安全、區塊鏈等產品的基礎，常見的非對稱加密、對稱加密、散列函式等，都屬于密碼學范疇。 密碼學有數千年的歷史，從最開始的替換法到如今的非對稱加密演算法，經歷了古典密碼學，近代密 ......

    uj5u.com 2020-09-10 03:03:50 more
  • 密碼學DAY1_02

    目錄 ##1.1 ASCII編碼 ASCII（American Standard Code for Information Interchange，美國資訊交換標準代碼）是基于拉丁字母的一套電腦編碼系統，主要用于顯示現代英語和其他西歐語言。它是現今最通用的單位元組編碼系統，并等同于國際標準ISO/IE ......

    uj5u.com 2020-09-10 03:04:50 more
  • 密碼學DAY2

    ##1.1 加密模式 加密模式：https://docs.oracle.com/javase/8/docs/api/javax/crypto/Cipher.html ECB ECB : Electronic codebook, 電子密碼本. 需要加密的訊息按照塊密碼的塊大小被分為數個塊，并對每個塊進 ......

    uj5u.com 2020-09-10 03:05:42 more
  • NTP時鐘服務器的特點（京準電子）

    NTP時鐘服務器的特點（京準電子） NTP時鐘服務器的特點（京準電子） 京準電子官V——ahjzsz 首先對時間同步進行了背景介紹，然后討論了不同的時間同步網路技術，最后指出了建立全球或區域時間同步網存在的問題。 一、概 述 在通信領域，“同步”概念是指頻率的同步，即網路各個節點的時鐘頻率和相位同步 ......

    uj5u.com 2020-09-10 03:05:47 more
  • 標準化考場時鐘同步系統推進智能化校園建設

    標準化考場時鐘同步系統推進智能化校園建設 標準化考場時鐘同步系統推進智能化校園建設 安徽京準電子科技官微——ahjzsz 一、背景概述隨著教育事業的快速發展，學校建設如雨后春筍，隨之而來的學校教育、管理、安全方面的問題成了學校管理人員面臨的最大的挑戰，這些問題同時也是學生家長所擔心的。為了讓學生有更 ......

    uj5u.com 2020-09-10 03:05:51 more
  • 位元幣入門

    引言 位元幣基本結構 位元幣基礎知識 1）哈希演算法 2）非對稱加密技術 3）數字簽名 4）MerkleTree 5）哪有位元幣，有的是UTXO 6）位元幣挖礦與共識 7）區塊驗證（共識） 總結 引言 上一篇我們已經知道了什么是區塊鏈，此篇說一下區塊鏈的第一個應用——位元幣。其實先有位元幣，后有的區塊 ......

    uj5u.com 2020-09-10 03:06:15 more
  • 北斗對時服務器（北斗對時設備）電力系統應用

    北斗對時服務器（北斗對時設備）電力系統應用 北斗對時服務器（北斗對時設備）電力系統應用 京準電子科技官微（ahjzsz） 中國北斗衛星導航系統（英文名稱：BeiDou Navigation Satellite System，簡稱BDS），因為是目前世界范圍內唯一可以大面積提供免費定位服務的系統，所以 ......

    uj5u.com 2020-09-10 03:06:20 more
最新发布
  • web3 產品介紹：metamask 錢包 使用最多的瀏覽器插件錢包

    Metamask錢包是一種基于區塊鏈技術的數字貨幣錢包，它允許用戶在安全、便捷的環境下管理自己的加密資產。Metamask錢包是以太坊生態系統中最流行的錢包之一，它具有易于使用、安全性高和功能強大等優點。 本文將詳細介紹Metamask錢包的功能和使用方法。 一、 Metamask錢包的功能 數字資 ......

    uj5u.com 2023-04-20 08:46:47 more
  • Hyperledger Fabric 使用 CouchDB 和復雜智能合約開發

    在上個實驗中，我們已經實作了簡單智能合約實作及客戶端開發，但該實驗中智能合約只有基礎的增刪改查功能，且其中的資料管理功能與傳統 MySQL 比相差甚遠。本文將在前面實驗的基礎上，將 Hyperledger Fabric 的默認資料庫支持 LevelDB 改為 CouchDB 模式，以實作更復雜的資料... ......

    uj5u.com 2023-04-16 07:28:31 more
  • .NET Core 波場鏈離線簽名、廣播交易（發送 TRX和USDT）筆記

    Get Started NuGet You can run the following command to install the Tron.Wallet.Net in your project. PM> Install-Package Tron.Wallet.Net 配置 public reco ......

    uj5u.com 2023-04-14 08:08:00 more
  • DKP 黑客分析——不正確的代幣對比率計算

    概述： 2023 年 2 月 8 日，針對 DKP 協議的閃電貸攻擊導致該協議的用戶損失了 8 萬美元，因為 execute() 函式取決于 USDT-DKP 對中兩種代幣的余額比率。 智能合約黑客概述： 攻擊者的交易：0x0c850f，0x2d31 攻擊者地址：0xF38 利用合同：0xf34ad ......

    uj5u.com 2023-04-07 07:46:09 more
  • Defi開發簡介

    Defi開發簡介 介紹 Defi是去中心化金融的縮寫， 是一項旨在利用區塊鏈技術和智能合約創建更加開放，可訪問和透明的金融體系的運動. 這與傳統金融形成鮮明對比，傳統金融通常由少數大型銀行和金融機構控制 在Defi的世界里，用戶可以直接從他們的電腦或移動設備上訪問廣泛的金融服務，而不需要像銀行或者信 ......

    uj5u.com 2023-04-05 08:01:34 more
  • solidity簡單的ERC20代幣實作

    // SPDX-License-Identifier: GPL-3.0 pragma solidity >=0.7.0 <0.9.0; import "hardhat/console.sol"; //ERC20 同質化代幣，每個代幣的本質或性質都是相同 //ETH 是原生代幣，它不是ERC20代幣, ......

    uj5u.com 2023-03-21 07:56:29 more
  • solidity 參考型別修飾符memory、calldata與storage 常量修飾符C

    在solidity語言中 參考型別修飾符(參考型別為存盤空間不固定的數值型別) memory、calldata與storage,它們只能修飾參考型別變數，比如字串、陣列、位元組等... memory 適用于方法傳參、返參或在方法體內使用，使用完就會清除掉，釋放記憶體 calldata 僅適用于方法傳參 ......

    uj5u.com 2023-03-08 07:57:54 more
  • solidity注解標簽

    在solidity語言中 注釋符為// 注解符為/* 內容*/ 或者 是 ///內容 注解中含有這幾個標簽給予我們使用 @title 一個應該描述合約/介面的標題 contract, library, interface @author 作者的名字 contract, library, interf ......

    uj5u.com 2023-03-08 07:57:49 more
  • 評價指標：相似度、GAS消耗

    【代碼注釋自動生成方法綜述】 這些評測指標主要來自機器翻譯和文本總結等研究領域,可以評估候選文本(即基于代碼注釋自動方法而生成)和參考文本(即基于手工方式而生成)的相似度. BLEU指標^[^?88^^?^]^:其全稱是bilingual evaluation understudy.該指標是最早用于 ......

    uj5u.com 2023-02-23 07:27:39 more
  • 基于NOSTR協議的“公有制”版本的Twitter,去中心化社交軟體Damus

    最近，一個幽靈，Web3的幽靈，在網路游蕩，它叫Damus，這玩意詮釋了什么叫做病毒式營銷，滑稽的是，一個Web3產品卻在Web2的產品鏈上瘋狂傳銷，各方大佬紛紛為其背書，到底發生了什么？Damus的葫蘆里，賣的是什么藥？ 注冊和簡單實用 很少有什么產品在用戶注冊環節會有什么噱頭，但Damus確實出 ......

    uj5u.com 2023-02-05 06:48:39 more

Copyright © 2010-2020 有解無憂