一番左が制御点Aのx座標、その右隣が制御点Aのy座標
右から二番目が制御点Bのx座標、一番右が制御点Bのy座標
となっています
入力可能な数字は -1.99 ~ 1.99 です
cubic-bezier(0.33/0.66/1/0.14)の場合、この4点からなる二次曲線に沿って動作する
《box:w21,h21,bg#ddd,relative,overhidden》
《box:absolute(0/0),h21,rx180,lh1,overhidden》
《box:rx180,bg#0fd,overhidden》
始点(0,0)
↙
●
《/box》
《/box》《box:absolute(0/0),w100%,ry180,lh1,overhidden》
《box:ry180,bg#0fd,inline,overhidden》《right》
●
↗《opacity:0》空《/opacity》
終点(1,1)《opacity:0》空白《/opacity》
《/right》《/box》
《/box》
《box:absolute(0/0),w7,h8,rz180,overhidden》
●
《box:rz180,overhidden》《right》《left》
制御点A
(0.33,0.66)《opacity:0》空《/opacity》
《/left》《/right》《/box》
《/box》《box:absolute(0/0),w21,h18,rz180,overhidden》
●
《box:rz180,overhidden》《right》《left》
制御点B《opacity:0》空《/opacity》
(1,0.14)
《/left》《/right》《/box》
《/box》《box:absolute(0/0),m0.5,w20,h20,bo#000,overhidden》
《/box》
《/box》
詳しくはそれ専用のサイトを覗き、二次関数のグラフを見た方が早いかと思われます
ttps://cubic-bezier.com/
x軸が時間の経過率、y軸が再生の進捗率となっており、比例のグラフと同じく『x軸がnの時、y軸はm』ということを表しています(関数なので当然ではありますが)
《blink》と《fade》は名称こそ異なりますが、実態はどちらも初期設定が異なるだけの同じタグです
見比べると分かりやすいと思われますので、こちらをご活用ください
《u》《|《》blink》を《|《》fade》と同様にするコマンド《/u》
《box:overhidden》《big》
《table:#000》
[[.《|《》blink:《red》ease《/red》》[.《blink:ease》テスト《/blink》
[[.《|《》fade》[.《fade》テスト《/fade》
《/table》
《/big》《/box》
《u》《|《》fade》を《|《》blink》と同様にするコマンド《/u》
《box:overhidden》《big》
《table:#000》
[[.《|《》blink》[.《blink》テスト《/blink》
[[.《|《》fade:《red》steps(1)《/red》》[.《fade:steps(1)》テスト《/fade》
《/table》
《/big》《/box》
《blink》の再生方向は、端的に言えば「再生開始時に点灯しているか、消灯しているか」を表しています
これは《marquee》と《fade》で視覚化すると、多少噛み砕きやすいかと思われます
《box:font15,overhidden》《table:#000》
[[/2.[\2=.奇数回[\2=.偶数回
[[.開始[.終了[.開始[.終了
[[.normal[_.《i》出現《/i》[.消失[_.《i》出現《/i》[.消失
[[.reverse[.消失[_.《i》出現《/i》[.消失[_.《i》出現《/i》
[[.alternate[_.《i》出現《/i》[.消失[.消失[_.《i》出現《/i》
[[.alternate
-reverse[.消失[_.《i》出現《/i》[_.《i》出現《/i》[.消失
《/table》《/box》
※文字の不透明度を「出現」の線の時100%、「消失完了」の線の時0%とする
※消失完了~消失中の区間は不透明度0%(つまり画面に表示されていない)
タイマーとセット、5秒で再生1回である
[aa]《box:lh1,relative,inline,overhidden》《table:#000》
[[=.《box:w4,overhidden》
《box:inline,overhidden》
《box:inline,relative,overhidden》《opacity:0》123《/opacity》:《opacity:0》45《/opacity》《box:absolute(0/0),z9,overhidden》《blink:t10,v0-9》《opacity:0》1《/opacity》00《/blink》:《blink:t1,v0-9》0《/blink》《/box》《box:absolute(0/0),z8,overhidden》《blink:t10,v10-19》《opacity:0》1《/opacity》01《/blink》:《blink:t1,v10-19》1《/blink》《/box》《box:absolute(0/0),z7,overhidden》《blink:t10,v20-29》《opacity:0》1《/opacity》02《/blink》:《blink:t1,v20-29》2《/blink》《/box》《box:absolute(0/0),z6,overhidden》《blink:t10,v30-39》《opacity:0》1《/opacity》03《/blink》:《blink:t1,v30-39》3《/blink》《/box》《box:absolute(0/0),z5,overhidden》《blink:t10,v40-49》《opacity:0》1《/opacity》04《/blink》:《blink:t1,v40-49》4《/blink》《/box》《box:absolute(0/0),z4,overhidden》《blink:t10,v50-59》《opacity:0》1《/opacity》05《/blink》:《blink:t1,v50-59》5《/blink》《/box》《box:absolute(0/0),z3,overhidden》《blink:t10,v60-69》《opacity:0》1《/opacity》06《/blink》:《blink:t1,v60-69》6《/blink》《/box》《box:absolute(0/0),z2,overhidden》《blink:t10,v70-79》《opacity:0》1《/opacity》07《/blink》:《blink:t1,v70-79》7《/blink》《/box》《box:absolute(0/0),z1,overhidden》《blink:t10,v80-89》《opacity:0》1《/opacity》08《/blink》:《blink:t1,v80-89》8《/blink》《/box》《box:absolute(0/0),z,overhidden》《blink:t10,v90-100》《opacity:0》1《/opacity》09《/blink》:《blink:t1,v90-99》9《/blink》《/box》《/box》
《/box》《/box》[=_.《box:w5,overhidden》normal《/box》[=_.《box:w5,overhidden》reverse《/box》[=_.《box:w5,overhidden》alternate《/box》[=_.《box:w5,overhidden》alternate《box:改行,overhidden》《/box》-reverse《/box》[[>.《box:h10,rx180,inline,overhidden》《text:rx180》消失中《/text》《box:h5,rx180,overhidden》《box:lh0.5,overhidden》《opacity:0》空白《/opacity》《/box》《red》消失完了《/red》《/box》《/box》[=.《marquee:t5,h10,vertical-visible》●《/marquee》[=.《marquee:t5,h10,vertical-visible,reverse》●《/marquee》[=.《marquee:t5,h10,vertical-visible,alternate》●《/marquee》[=.《marquee:t5,h10,vertical-visible,alternate-reverse》●《/marquee》[[=.《|《》fade》[=.《fade:normal》《red》●《/red》《/fade》[=.《fade:reverse》《red》●《/red》《/fade》[=.《fade:alternate》《red》●《/red》《/fade》[=.《fade:alternate-reverse》《red》●《/red》《/fade》《/table》《box:absolute(0/0),overhidden》
《table:#000》[[.《box:w4,overhidden》《opacity:0》空白《/opacity》《/box》[.《box:w5,overhidden》《opacity:0》空白《/opacity》《/box》[.《box:w5,overhidden》《opacity:0》空白《/opacity》《/box》[.《box:w5,overhidden》《opacity:0》空白《/opacity》《/box》[.《box:w5,overhidden》《opacity:0》空白《/opacity》《box:改行,overhidden》《/box》《opacity:0》空白《/opacity》《/box》[[>.《box:h10,inline,overhidden》出現《/box》[\4.《box:h10,relative,overhidden》《box:lh0.5,overhidden》《opacity:0》空白《/opacity》《/box》《hr》《box:h4,overhidden》《/box》《box:lh0.4,overhidden》《opacity:0》空白《/opacity》《/box》《hr》《box:absolute(0/0),w100%,h10,rx180,overhidden》《box:lh0.5,overhidden》《opacity:0》空白《/opacity》《/box》《hr》《/box》《/box》《/table》《/box》《/box》[/aa]
▲短縮する