论坛 › 动画音画 › Earth

马黑黑 发表于 2024-9-24 12:38

Earth

<style>
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/earth.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 0 0 6px #111; z-index: 1; position: relative; }
#player { position: absolute; cursor: pointer; fill: none; stroke: green; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;}
li-zi { position: absolute; width: 10px; height: 6px; offset-path: path('M100 100Q200 800,1024 360'); offset-distance: 0%; background: green; animation: moving 10s linear infinite var(--state); }
@keyframes moving {        to { offset-distance: 100%; } }
</style>

<div id="tz">
        <!-- Earth -->
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=18649290" autoplay loop></audio>
        <svg id="player" width="200" height="200" viewBox="-100 -100 200 200">
                <ellipse cx="0" cy="0" rx="80" ry="60" fill="none" stroke-width="4" stroke="green" stroke-dasharray="4 8"></ellipse>
                <polygon points="0 -50, 50 50, -50 50" pathLength="1">
                        <animate id="b1" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="0s;e1.end+.5s" fill="freeze"/>
                        <animate id="e1" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="e2.end" fill="freeze"/>
                </polygon>
                <circle cx="0" cy="0" r="50" pathLength="1">
                        <animate id="b2" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="b1.end" fill="freeze"/>
                        <animate id="e2" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="e3.end" fill="freeze"/>
                </circle>
                <rect x="-50" y="-50" width="100" height="100" pathLength="1" transform="rotate(45)">
                        <animate id="b3" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="b2.end" fill="freeze"/>
                        <animate id="e3" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="b3.end+1s" fill="freeze"/>
                </rect>
        </svg>
</div>

<script>
Array(total=40).fill(0).forEach((lz,key) => {
        lz = document.createElement('li-zi');
        lz.style.cssText += `animation-delay: -${10 / total * key}s`;
        if(key % 2 === 0) lz.style.offsetPath = `path('M100 100Q800 -150,1024 360')`;
        tz.appendChild(lz);
        console.log(lz);
});

mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), player.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), player.unpauseAnimations());
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-9-24 12:39

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/earth.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 0 0 6px #111; z-index: 1; position: relative; }
#player { position: absolute; cursor: pointer; fill: none; stroke: green; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;}
li-zi { position: absolute; width: 10px; height: 6px; offset-path: path('M100 100Q200 800,1024 360'); offset-distance: 0%; background: green; animation: moving 10s linear infinite var(--state); }
@keyframes moving {        to { offset-distance: 100%; } }
&lt;/style&gt;

&lt;div id="tz"&gt;
        &lt;!-- Earth --&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=18649290" autoplay loop&gt;&lt;/audio&gt;
        &lt;svg id="player" width="200" height="200" viewBox="-100 -100 200 200"&gt;
                &lt;ellipse cx="0" cy="0" rx="80" ry="60" fill="none" stroke-width="4" stroke="green" stroke-dasharray="4 8"&gt;&lt;/ellipse&gt;
                &lt;polygon points="0 -50, 50 50, -50 50" pathLength="1"&gt;
                        &lt;animate id="b1" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="0s;e1.end+.5s" fill="freeze"/&gt;
                        &lt;animate id="e1" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="e2.end" fill="freeze"/&gt;
                &lt;/polygon&gt;
                &lt;circle cx="0" cy="0" r="50" pathLength="1"&gt;
                        &lt;animate id="b2" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="b1.end" fill="freeze"/&gt;
                        &lt;animate id="e2" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="e3.end" fill="freeze"/&gt;
                &lt;/circle&gt;
                &lt;rect x="-50" y="-50" width="100" height="100" pathLength="1" transform="rotate(45)"&gt;
                        &lt;animate id="b3" attributeName="stroke-dashoffset" from="1" to="0" dur="2s" begin="b2.end" fill="freeze"/&gt;
                        &lt;animate id="e3" attributeName="stroke-dashoffset" from="0" to="1" dur="2s" begin="b3.end+1s" fill="freeze"/&gt;
                &lt;/rect&gt;
        &lt;/svg&gt;
&lt;/div&gt;

&lt;script&gt;
Array(total=40).fill(0).forEach((lz,key) =&gt; {
        lz = document.createElement('li-zi');
        lz.style.cssText += `animation-delay: -${10 / total * key}s`;
        if(key % 2 === 0) lz.style.offsetPath = `path('M100 100Q800 -150,1024 360')`;
        tz.appendChild(lz);
        console.log(lz);
});

mState = () =&gt; aud.paused ? (tz.style.setProperty('--state', 'paused'), player.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), player.unpauseAnimations());
aud.onplaying = aud.onpause = () =&gt; mState();
player.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-9-24 12:43

本帖：

（一）小播使用内嵌SVG代码制作，虚线框椭圆里的三角形、圆、转45度的矩形依次反复描边、擦除；
（二）粒子用HTML元素做成，做相抵路径运动，分两个路径，一个走上，一个走下，入、出处两线交汇。

梦江南 发表于 2024-9-24 14:32

老师辛苦了！{:4_190:}

醉美水芙蓉 发表于 2024-9-24 16:48

冬天的雨 发表于 2024-9-24 19:40

马老师好，背景黑色有点神秘感，加上这个效果特别有吸引力{:4_178:}

冬天的雨 发表于 2024-9-24 19:41

仔细欣赏，感觉现在的制作有点难的，冬雨好像不会做了

冬天的雨 发表于 2024-9-24 19:43

地球中间的金黄色好像是流出了钢铁洪流，钢水的奔涌而下，{:4_199:}

冬天的雨 发表于 2024-9-24 19:44

代码粒子效果还可以这样做，马老师太厉害了{:4_178:}

马黑黑 发表于 2024-9-24 20:12

冬天的雨 发表于 2024-9-24 19:41
仔细欣赏，感觉现在的制作有点难的，冬雨好像不会做了

{:4_191:}

马黑黑 发表于 2024-9-24 20:13

冬天的雨 发表于 2024-9-24 19:41
仔细欣赏，感觉现在的制作有点难的，冬雨好像不会做了

用了svg，这个有点繁琐

花飞飞 发表于 2024-9-24 20:29

马黑黑 发表于 2024-9-24 12:43
本帖：

（一）小播使用内嵌SVG代码制作，虚线框椭圆里的三角形、圆、转45度的矩形依次反复描边、擦除；
...

这个小播好新啊。。
stroke: green; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
这么长一串的stroke:参数，是SVG专用的吧。以前没见过。。有些12行又出现了一次。。。。

花飞飞 发表于 2024-9-24 20:37

马黑黑 发表于 2024-9-24 12:43
本帖：

（一）小播使用内嵌SVG代码制作，虚线框椭圆里的三角形、圆、转45度的矩形依次反复描边、擦除；
...

粒子路径第一次看代码时大概知道了。。完全不明白的是虚线。。。
又仔细看过，小绿点是宽10高6，现在明白了，这是一个粒子的大小。。
贴子里这样的粒子共设了40个，
lz.style.cssText += `animation-delay: -${10 / total * key}s`;
这句是控制粒子延迟出现的时间。。这样，粒子就跟排队一样顺着设好的路径跑了。。

花飞飞 发表于 2024-9-24 20:39

感觉又有无限可能了，因为路径它就有无限可能。{:4_170:}
这创意，真是拍案叫绝。。

马黑黑 发表于 2024-9-24 20:49

花飞飞 发表于 2024-9-24 20:39
感觉又有无限可能了，因为路径它就有无限可能。
这创意，真是拍案叫绝。。

就两个简单的Q路径

马黑黑 发表于 2024-9-24 20:51

花飞飞 发表于 2024-9-24 20:37
粒子路径第一次看代码时大概知道了。。完全不明白的是虚线。。。
又仔细看过，小绿点是宽10高6，现在明 ...

提前的延时。注意看负数符号。当使用负数值的 animation-delay，表示提前运行多少时间，这样，页面一打开，粒子就在路上了

马黑黑 发表于 2024-9-24 20:53

花飞飞 发表于 2024-9-24 20:29
这个小播好新啊。。
stroke: green; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; st ...

12行是椭圆绘制，它静止不动

红影 发表于 2024-9-24 20:54

这个帖子好神奇，那小播还能这样设计，三个图形依次展开和收起，就是黑黑说的小猫咬尾巴的自己触发把，还做了个不动的椭圆做参照。这设计的构思太绝妙了。{:4_199:}

马黑黑 发表于 2024-9-24 20:55

红影 发表于 2024-9-24 20:54
这个帖子好神奇，那小播还能这样设计，三个图形依次展开和收起，就是黑黑说的小猫咬尾巴的自己触发把，还做 ...

去熟悉一下svg，大致都可以做出来的

红影 发表于 2024-9-24 21:09

对stroke-dasharray: 1; stroke-dashoffset: 1不够熟悉，原来它们还能操控动画呢。
粒子的那个也很神奇，使用js就可以让它们沿着不同路径分流了呢{:4_199:}

查看完整版本: Earth