中畫網(wǎng)

標(biāo)題: 圖片切換新嘗試 [打印本頁(yè)]

作者: 195400 時(shí)間: 2021-10-21 19:05
標(biāo)題: 圖片切換新嘗試
圖片太少花樣不多，僅只是個(gè)圖片切換的初步嘗試。現(xiàn)有圓、橢圓、矩形、六邊形、菱形、五邊形及棋盤格等幾種方式。

作者: 紅楓 時(shí)間: 2021-10-21 19:58
欣賞，學(xué)習(xí)了。贊一個(gè)！

手機(jī)看的，效果很好！

作者: 195400 時(shí)間: 2021-10-21 20:10

紅楓發(fā)表于 2021-10-21 19:58
欣賞，學(xué)習(xí)了。贊一個(gè)！

手機(jī)看的，效果很好！

又增加了三種切換方式

作者: 寒冬殘荷 時(shí)間: 2021-10-21 21:38
欣賞了！手機(jī)和電腦都看到效果！老師天天有新作品！

作者: 195400 時(shí)間: 2021-10-21 21:40

寒冬殘荷發(fā)表于 2021-10-21 21:38
欣賞了！手機(jī)和電腦都看到效果！老師天天有新作品！

繼續(xù)SVG的學(xué)習(xí)

作者: 寒冬殘荷 時(shí)間: 2021-10-21 22:37

195400 發(fā)表于 2021-10-21 21:40
繼續(xù)SVG的學(xué)習(xí)

才剛發(fā)現(xiàn)，只得前面的三種切換方式，后面的三種不行（只在中間有一小點(diǎn)，不放大），我的電腦和手機(jī)都是一樣的效果。

作者: 紅楓 時(shí)間: 2021-10-21 23:00
棱形，對(duì)老師來(lái)說(shuō)應(yīng)該也不難的！
后三種效果，六角形明顯，后兩種是八角形，十二角形？過(guò)渡快，難分辨！

作者: 195400 時(shí)間: 2021-10-21 23:11

寒冬殘荷發(fā)表于 2021-10-21 22:37
才剛發(fā)現(xiàn)，只得前面的三種切換方式，后面的三種不行（只在中間有一小點(diǎn)，不放大），我的電腦和手機(jī)都是一 ...

可能還是版本兼容性的問(wèn)題，我的手機(jī)和電腦都行，但一個(gè)老的ipad2就完全沒(méi)效果，只有圖片的淡入淡出

作者: 195400 時(shí)間: 2021-10-21 23:16

紅楓發(fā)表于 2021-10-21 23:00
棱形，對(duì)老師來(lái)說(shuō)應(yīng)該也不難的！
后三種效果，六角形明顯，后兩種是八角形，十二角形？過(guò)渡快，難分辨！

邊多了只有2秒鐘的過(guò)渡時(shí)間數(shù)不過(guò)來(lái)，除圓和橢圓外其他幾種都是由矩形切割（clip-path）而來(lái)的，菱形也簡(jiǎn)單。

作者: 195400 時(shí)間: 2021-10-21 23:35

寒冬殘荷發(fā)表于 2021-10-21 22:37
才剛發(fā)現(xiàn)，只得前面的三種切換方式，后面的三種不行（只在中間有一小點(diǎn)，不放大），我的電腦和手機(jī)都是一 ...

手機(jī)說(shuō)不清楚，但360的極速模式應(yīng)該是行的。

作者: 雄鷹翱翔 時(shí)間: 2021-10-22 05:36
欣賞您的佳作，贊一個(gè)！

作者: 西椅子胡同 時(shí)間: 2021-10-22 06:25
欣賞精彩，贊美創(chuàng)新！

作者: 195400 時(shí)間: 2021-10-22 09:31

雄鷹翱翔發(fā)表于 2021-10-22 05:36
欣賞您的佳作，贊一個(gè)！

作者: 195400 時(shí)間: 2021-10-22 09:31

西椅子胡同發(fā)表于 2021-10-22 06:25
欣賞精彩，贊美創(chuàng)新！

作者: 195400 時(shí)間: 2021-10-22 12:19

紅楓發(fā)表于 2021-10-21 23:00
棱形，對(duì)老師來(lái)說(shuō)應(yīng)該也不難的！
后三種效果，六角形明顯，后兩種是八角形，十二角形？過(guò)渡快，難分辨！

再幫忙看看改進(jìn)后的效果，謝謝！

作者: 靜竹. 時(shí)間: 2021-10-22 15:29
老師的切換又增加了三種百葉窗變化，老師玩SVG已出神入化了！

作者: 195400 時(shí)間: 2021-10-22 16:42

靜竹. 發(fā)表于 2021-10-22 15:29
老師的切換又增加了三種百葉窗變化，老師玩SVG已出神入化了！

瞎折騰

作者: 紅楓 時(shí)間: 2021-10-22 17:19

195400 發(fā)表于 2021-10-22 12:19
再幫忙看看改進(jìn)后的效果，謝謝！

太好了，欣賞、學(xué)習(xí)、點(diǎn)贊！

作者: 195400 時(shí)間: 2021-10-22 18:03

紅楓發(fā)表于 2021-10-22 17:19
太好了，欣賞、學(xué)習(xí)、點(diǎn)贊！

作者: 寒冬殘荷 時(shí)間: 2021-10-22 22:38
我這里看到的效果（錄屏軟件錄下的）：

作者: 寒冬殘荷 時(shí)間: 2021-10-22 22:40

寒冬殘荷發(fā)表于 2021-10-22 22:38
我這里看到的效果（錄屏軟件錄下的）：

感覺過(guò)渡時(shí)間還要調(diào)節(jié)

作者: 195400 時(shí)間: 2021-10-22 23:17

寒冬殘荷發(fā)表于 2021-10-22 22:40
感覺過(guò)渡時(shí)間還要調(diào)節(jié)

把里面的SVG代碼改一下就行了，過(guò)渡銜接無(wú)非就是上一動(dòng)畫結(jié)束與下一動(dòng)畫開始時(shí)刻重疊或不重疊的選擇。
試驗(yàn)的目的主要如何實(shí)現(xiàn)這些切換，而切換的表現(xiàn)效果還在其次，

作者: 寒冬殘荷 時(shí)間: 2021-10-23 09:26

195400 發(fā)表于 2021-10-22 23:17
把里面的SVG代碼改一下就行了，過(guò)渡銜接無(wú)非就是上一動(dòng)畫結(jié)束與下一動(dòng)畫開始時(shí)刻重疊或不重疊的選擇。
...

老師，早上好！可以用JS來(lái)實(shí)現(xiàn)隨機(jī)調(diào)用某一種切換方式嗎？

作者: 195400 時(shí)間: 2021-10-23 09:35

寒冬殘荷發(fā)表于 2021-10-23 09:26
老師，早上好！可以用JS來(lái)實(shí)現(xiàn)隨機(jī)調(diào)用某一種切換方式嗎？

用js生成svg文件，生成過(guò)程中就能隨機(jī)指定切換方式。

現(xiàn)在的問(wèn)題是沒(méi)有一組合適的圖片，最好是大小差不多的或者寬高比一致的。

作者: 195400 時(shí)間: 2021-10-23 16:58

寒冬殘荷發(fā)表于 2021-10-23 09:26
老師，早上好！可以用JS來(lái)實(shí)現(xiàn)隨機(jī)調(diào)用某一種切換方式嗎？

http://pan.yinhuabbs.cn/view.php/3ed7ddecae5ec28c82963f555cbedcfc.html
這是做的簡(jiǎn)化版，每次刷新后表現(xiàn)不同。

作者: 寒冬殘荷 時(shí)間: 2021-10-23 22:43

195400 發(fā)表于 2021-10-23 16:58
http://pan.yinhuabbs.cn/view.php/3ed7ddecae5ec28c82963f555cbedcfc.html
這是做的簡(jiǎn)化版，每次刷新 ...

老師，晚上好！很好，太完美了！可當(dāng)模板用了。這下有多少圖片都可以，原來(lái)是一張圖片對(duì)應(yīng)一種切換方式。

作者: 195400 時(shí)間: 2021-10-23 23:08

寒冬殘荷發(fā)表于 2021-10-23 22:43
老師，晚上好！很好，太完美了！可當(dāng)模板用了。這下有多少圖片都可以，原來(lái)是一張圖片對(duì)應(yīng)一種切換方式。

http://pan.yinhuabbs.cn/view.php/db3668ea96fcb2118f1056687118be38.html

歡迎光臨中畫網(wǎng) (http://www.nujv.cn/)